/* ============================================================
   MEDIATRIX — RESPONSIVE
   Breakpoints: 1280 laptop · 1024 tablet-L · 768 tablet · 560 mobile
   ============================================================ */

/* ---------- Laptop ---------- */
@media (max-width:1280px){
  :root{--gutter:26px}
  .hero__frame{padding:34px}
  .maturity{gap:12px}
}

/* ---------- Tablet landscape ---------- */
@media (max-width:1024px){
  :root{--shell:12px;--gutter:24px}

  .nav{display:none}
  .nav-toggle{display:block}
  .site-header__bar{gap:16px}
  .nav__cta{margin-left:auto}

  .site-header{padding:calc(var(--shell) + 14px) calc(var(--shell) + 14px)}
  .is-scrolled .nav-toggle{display:none}

  .discover__grid{grid-template-columns:1fr;gap:44px;align-items:start}
  .about-hero__grid{grid-template-columns:1fr 1fr;gap:32px}
  .problem--row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .discover > .shell{padding-inline:var(--gutter)}
  .discover__row{grid-template-columns:1fr 1fr;gap:32px;min-height:0}
  .discover__mark{grid-column:span 2;order:-1;--mark-size:300px;padding-left:0}
  .discover__aside{justify-self:start;align-self:center;margin:8px 0 0}
  .portcards__wire{display:none}
  .portcards__label{left:0;right:auto;bottom:-46px}
  .hud-rule::after{width:calc((var(--gutter) - var(--shell)) * 1.414)}
  .about-hero__mark{grid-column:span 2;order:-1;--mark-size:320px}
  .about-hero__aside{align-items:flex-start}
  .stackcards{margin-left:0}
  .story{grid-template-columns:1fr;gap:40px}
  .partners{gap:14px}
  .contact__grid{grid-template-columns:1fr;gap:44px}
  .maturity{grid-template-columns:repeat(2,1fr);gap:14px}
  .pillars4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-grid--4{grid-template-columns:1fr 1fr}
  .maturity__step{margin-top:0!important}
  .res{grid-template-columns:1fr 1fr}
  .res__card:last-child{grid-column:span 2}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer-mantra{grid-column:span 2;max-width:none}

  /* services: stack, disk above copy */
}

/* ---------- Tablet portrait ---------- */
@media (max-width:768px){
  :root{--gutter:20px}
  body{font-size:15px}

  .hero{padding-top:118px}
  .site-header__bar{gap:12px}
  .hero__frame{padding:26px 20px}
  .hero__row{flex-direction:column;gap:10px}
  .hero__row .btn{align-self:flex-start}
  .hero__meta{gap:14px 20px;font-size:.6875rem}

  /* Un-pin the service rail: nested scrolling is a trap on touch. */

  .marquee--giant .marquee__track > * > span{font-size:16vw}
  .band-giant{padding-block:76px}

  .trail{height:150px}

  .pillars__track{grid-auto-columns:minmax(280px,86vw)}
  .file-card{min-height:290px;padding:44px 26px 32px}
  .file-card__tag{left:26px}

  .tst__rail{-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
  .tst__rail .marquee__track > *{gap:20px;padding-right:20px;animation-duration:75s}
  .tcard{min-height:0;padding:42px 26px 34px;gap:26px}
  .tcard__name{font-size:1.3rem}
  .tcard::after{width:50px;height:43px;right:24px;bottom:30px}

  .ind__row{grid-template-columns:auto 1fr auto;gap:14px}
  .ind__row:hover{padding-left:14px}

  .res{grid-template-columns:1fr}
  .res__card:last-child{grid-column:span 1}

  .about-hero__grid{grid-template-columns:1fr;gap:28px}
  .problem--row{grid-template-columns:1fr;gap:18px}
  .hud-rule{width:100%}
  .discover__row{grid-template-columns:1fr;gap:26px}
  .discover__mark{grid-column:span 1;--mark-size:min(74vw,290px)}
  .discover__body{margin-top:20px}
  .discover__cta{margin-top:24px}
  .hud-rule{margin-top:28px}
  .about-hero__mark{grid-column:span 1;--mark-size:min(74vw,300px)}
  .values{grid-template-columns:1fr}
  .partners{grid-template-columns:1fr;gap:24px}
  .steps3{grid-template-columns:1fr}

  .form{grid-template-columns:1fr}
  .field--full{grid-column:span 1}
  .form__consent,.form__actions,.form__note{grid-column:span 1}
  .form__actions{justify-content:flex-start}

  .footer-signal{padding:18px 20px}
  .cookiebar{padding-inline:12px;flex-wrap:wrap;bottom:12px}
  .cookiebar__msg{order:-1;flex-basis:100%;max-width:none}
  .to-top{display:none}

  /* HUD: shorter caps and tab */
  .hud{--hud-cap:40px;--hud-tab:200px}
  .hud__rail{top:44px;bottom:44px}
  .hud__cross{top:28px}
  .hud__cross--bl,.hud__cross--br{top:calc(100% - 28px)}
  .hud__notch{height:30px;margin-top:-15px}

  /* banner */
  .banner__media{aspect-ratio:4/3}
  .banner__trace{display:none}
  .banner__bracket{width:34px;height:34px;bottom:-22px}
}

/* ---------- Mobile ---------- */
@media (max-width:560px){
  :root{--gutter:16px;--shell:10px}

  .section{padding-block:60px}
  .hero__frame{padding:22px 16px}
  h1,.d1{font-size:clamp(1.4rem,7vw,2.1rem)}
  h2,.d2{font-size:clamp(1.3rem,6.6vw,1.9rem)}
  .d-xl{font-size:clamp(2rem,13vw,3.4rem)}
  .marquee--giant .marquee__track > * > span{font-size:19vw}

  .nav__cta{display:none}
  .brand{font-size:1.25rem}
  .hero{padding-top:104px}
  .frame .f-left{top:24px;height:calc(100% - 52px)}
  .frame .f-top{left:24px}
  .frame .f-corner{width:36px;transform:translate(-5px,12px) rotate(-45deg)}
  .frame .f-star{width:22px;height:22px;right:-11px}

  .btn{font-size:1rem;padding:11px 15px;gap:11px}
  .maturity{grid-template-columns:1fr}
  .pillars4{grid-template-columns:1fr}
  .pillars5{grid-template-columns:1fr}
  .footer-grid,.footer-grid--4{grid-template-columns:1fr}
  .footer-mantra{grid-column:span 1}
  .footer-bottom{flex-direction:column;gap:8px}

  .ind__name{font-size:1.1rem}
  .ind__tags{display:none}
  .ind__row{grid-template-columns:1fr auto}
  .ind__no{display:none}

  .trail{display:none}
  .about-hero__mark{--mark-size:min(78vw,260px)}
  .stackcards{width:150px;height:190px}
  .discover__mark{--mark-size:min(80vw,250px)}
  .discover__cta{gap:12px}
  .wire{display:none}
  .portcards{width:170px;height:132px}
  .portcards__card{width:86px;height:118px}
  .portcards__label{font-size:1.25rem}

  .tst__title .trace{display:none}
  .tcard{width:84vw}
  .tcard__q p{font-size:.875rem}
  .tcard__co{font-size:.8125rem}
}

/* ---------- Coarse pointer: no cursor trail, no hover-only reveals ---------- */
@media (hover:none){
  .trail{display:none}
  .mark3d:hover .mark3d__stack{animation-duration:var(--spin,7s)}
  .marquee:hover .marquee__track > *{animation-play-state:running}
}

/* ---------- Very wide ---------- */
@media (min-width:1600px){
  :root{--maxw:1520px}
  h1,.d1{font-size:3.75rem}
}