/* Mobile layer. The site's layout is authored desktop-first in inline styles; these rules narrow it down.
   Grid overrides need !important to beat the style attribute — everything else is a plain declaration. */

img{max-width:100%}
.sbg-burger{display:none!important}
.sbg-drawer{display:none}

/* Tablet — multi-up card grids drop to two columns, the page loses its fixed max width. */
@media (max-width:1024px){
  :root{--page-max:100%}
  [style*="repeat("]{grid-template-columns:repeat(2,1fr)!important}
}

/* Phone — everything stacks. */
@media (max-width:860px){
  .sbg-nav,.sbg-cta{display:none!important}
  .sbg-burger{display:inline-flex!important}
  .sbg-drawer{display:block}
  .sbg-bar{height:64px!important;gap:var(--space-4)!important}
  .sbg-wordmark{font-size:var(--size-3xs)!important;white-space:nowrap}
}
@media (max-width:760px){
  :root{
    --page-pad:20px;--gutter-section:var(--space-8);
    --hero-pad:var(--space-9);--hero-h:240px;
    --split-pad:0px;--split-b:var(--space-6);--split-t:0px;
    --size-6xl:42px;--size-5xl:34px;--size-4xl:30px;--size-3xl:25px;--size-2xl:21px;--size-xl:18px;
  }
  body{overflow-x:hidden}
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [style*="grid-column"]{grid-column:auto!important}
  div[style*="display: flex"]{flex-wrap:wrap}
  h1,h2,h3,blockquote{overflow-wrap:break-word}
  .sbg-hero-portrait{max-width:420px;margin:0 auto}
}