/* Shared small-screen safeguards for every Sequence surface. */
html{-webkit-text-size-adjust:100%;}
body{overflow-x:hidden;}
img,svg,video{max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;}

@media (max-width:760px){
  html{scroll-padding-top:64px;}
  body{overflow-wrap:break-word;}

  /* Comfortable, edge-safe page gutters on phones with display cutouts. */
  .container,
  .wrap{
    padding-left:max(16px,env(safe-area-inset-left))!important;
    padding-right:max(16px,env(safe-area-inset-right))!important;
  }

  section{scroll-margin-top:64px;}
  .hero{padding-top:48px!important;padding-bottom:42px!important;}
  section{padding-top:48px;padding-bottom:48px;}
  .sechead{margin-bottom:30px!important;}

  /* Controls remain easy to tap without forcing horizontal overflow. */
  .btn,
  .opt,
  .toggle button,
  .fnpick button{min-height:44px;}
  .herobtns{display:grid!important;grid-template-columns:1fr;gap:10px!important;}
  .herobtns .btn{width:100%;text-align:center;}

  .meta,.legend{gap:10px 14px!important;}
  .card,.pcard,.scard,.rwcard,.rung,.cta,.contact{padding:20px!important;}

  /* Content grids collapse before their minimum card widths exceed the viewport. */
  .grid,.series,.rwgrid,.dims,.creds,.fnpick{grid-template-columns:minmax(0,1fr)!important;}
  .method-grid{grid-template-columns:minmax(0,1fr)!important;}

  /* Price and service rows read vertically instead of squeezing their copy. */
  .rung{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;align-items:start!important;}
  .rung .rp{text-align:left!important;white-space:normal!important;}
  .rung .rl .tag{display:table;margin:7px 0 0!important;}

  .credstrip{display:grid!important;grid-template-columns:1fr 1fr;gap:22px 14px!important;margin-top:34px!important;}
  .diffstrip{align-items:flex-start!important;gap:8px!important;}
  .diffstrip .dot{display:none;}
  .diffstrip span:not(.dot){width:100%;}

  .aboutphoto{max-width:220px!important;}
  .scorehead{align-items:flex-start!important;}
  .scorehead>div[style*="min-width"],
  .tickrow>div[style*="min-width"]{min-width:0!important;}

  /* Wide data remains usable without widening the entire document. */
  .hmwrap,.tbl-wrap,[style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch;max-width:100%;}
  table{max-width:none;}

  .foot{align-items:flex-start!important;flex-direction:column;}
}

@media (max-width:420px){
  h1{font-size:clamp(30px,10vw,38px)!important;}
  .credstrip{grid-template-columns:1fr;}
  .card,.pcard,.scard,.rwcard,.rung,.cta,.contact{padding:18px!important;}
  .nav{align-items:stretch!important;flex-direction:column-reverse;}
  .nav .btn{width:100%;}
  #cookieNotice{left:10px!important;right:10px!important;bottom:10px!important;padding:14px!important;}
  #cookieNotice button{width:100%;min-height:44px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .reveal{opacity:1!important;transform:none!important;}
}

/* Portrait: hold true 4:5 proportions on every surface, overriding the global img rule. */
.aboutphoto img{width:100%!important;height:auto!important;aspect-ratio:4/5;object-fit:cover;}