/* Phone-only polish for header + heroes. Desktop (≥761px) is untouched. */
@media (max-width:760px){
  /* —— Header: one compact row, readable touch targets —— */
  html body .header.site-chrome{
    min-height:0;
    padding-block:6px;
  }
  html body .header.site-chrome .site-chrome-header-inner{
    min-height:56px;
    padding-inline:12px !important;
    gap:8px;
    align-items:center;
    grid-template-columns:minmax(0, 1fr) auto !important;
  }
  html body .header.site-chrome .site-chrome-region{
    min-width:0 !important;
  }
  html body .header.site-chrome .site-chrome-region[data-region="leading"]{
    max-width:none;
    justify-self:stretch;
  }
  html body .header.site-chrome .site-chrome-region[data-region="center"]{
    justify-self:end;
  }
  html body .header.site-chrome .site-chrome-region[data-region="trailing"]{
    display:none !important;
  }
  html body .header.site-chrome .site-chrome-logo{
    display:inline-flex;
    max-width:100%;
    overflow:visible;
  }
  html body .header.site-chrome .site-chrome-logo,
  html body .header.site-chrome .site-chrome-logo .brand-mark--wide,
  html body .header.site-chrome .site-chrome-logo .brand-mark-img{
    transform:none !important;
  }
  html body .header.site-chrome .site-chrome-logo .brand-mark--wide,
  html body .header.site-chrome .site-chrome-logo .brand-mark-img{
    /* Honour studio --brand-mark-* vars; only fall back when unpublished. */
    height:var(--brand-mark-size-mobile, var(--brand-mark-size, 40px)) !important;
    width:auto !important;
    max-width:min(210px, 58vw) !important;
    object-fit:var(--brand-mark-fit, contain) !important;
  }
  html body .header.site-chrome .chrome-drawer-toggle{
    display:inline-flex !important;
    min-height:40px;
    padding:8px 12px;
    font-size:13px;
    white-space:nowrap;
  }
  html body .header.site-chrome .site-chrome-tagline{
    display:none !important;
  }

  /* Fallback (unpublished) header: keep nav on one scrollable row */
  html body .header:not(.site-chrome){
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 10px;
    padding:8px 14px 0;
    min-height:0;
  }
  html body .header:not(.site-chrome) .brand,
  html body .header:not(.site-chrome) .brand.brand--layout-stack{
    max-width:min(240px, 70vw);
  }
  html body .header:not(.site-chrome) .brand-mark.brand-mark--wide,
  html body .header:not(.site-chrome) .brand-mark-img{
    height:40px !important;
    max-width:min(200px, 58vw) !important;
    transform:none !important;
  }
  html body .header:not(.site-chrome) .header-note,
  html body .header:not(.site-chrome) [data-chrome-brand-tagline],
  html body .header:not(.site-chrome) .brand small{
    display:none !important;
  }
  html body .header:not(.site-chrome) nav{
    order:3;
    flex:1 0 100%;
    width:100%;
    display:flex;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    gap:0;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html body .header:not(.site-chrome) nav::-webkit-scrollbar{display:none}
  html body .header:not(.site-chrome) .nav{
    flex:0 0 auto;
    min-width:max-content;
    min-height:48px;
    padding:6px 10px 8px;
    font-size:12px;
  }

  /* —— Heroes: full-bleed, phone-first composition —— */
  html body #home-landing,
  html body .hero-preview{
    padding:0 !important;
    width:100%;
    max-width:none;
    overflow-x:clip;
  }
  html body :is(#home-landing, .hero-preview) .home-hero,
  html body #page-hero.page-hero{
    /* Full-bleed via 100dvw with clipped ancestors — safer than bare 100vw. */
    width:100dvw !important;
    max-width:100dvw !important;
    margin-inline:calc(50% - 50dvw) !important;
    border-radius:0 !important;
    height:auto !important;
    max-height:none !important;
  }

  /* Home: one immersive photo plane with copy sitting in a bottom scrim.
     Do not !important min-height — published studio heights must still win. */
  html body :is(#home-landing, .hero-preview) .home-hero{
    display:grid !important;
    grid-template-rows:minmax(220px, 1fr) auto;
    align-content:stretch;
    position:relative !important;
    isolation:isolate;
    overflow:hidden !important;
  }
  html body :is(#home-landing, .hero-preview) .home-hero-media{
    grid-row:1 / -1;
    grid-column:1;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    border-radius:0 !important;
    z-index:0;
  }
  html body :is(#home-landing, .hero-preview) .home-hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    width:100% !important;
    opacity:1 !important;
    background:
      linear-gradient(180deg, rgba(10,18,36,.18) 0%, rgba(10,18,36,.08) 32%, rgba(10,18,36,.55) 68%, rgba(10,18,36,.88) 100%) !important;
    pointer-events:none;
    z-index:1;
  }
  html body :is(#home-landing, .hero-preview) .home-hero-copy{
    grid-row:2;
    grid-column:1;
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    bottom:auto !important;
    z-index:2;
    width:100% !important;
    min-height:0 !important;
    padding:22px 18px 26px !important;
    background:transparent !important;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.28);
  }
  html body :is(#home-landing, .hero-preview) .home-kicker{
    color:rgba(255,255,255,.88) !important;
    font-size:11px !important;
    letter-spacing:.06em;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  html body :is(#home-landing, .hero-preview) .home-kicker::before{
    background:#ff6b73 !important;
  }
  html body :is(#home-landing, .hero-preview) .home-hero h1{
    font-size:clamp(28px, 7.2vw, 36px) !important;
    line-height:1.22 !important;
    margin:0 0 10px !important;
    color:#fff !important;
  }
  html body :is(#home-landing, .hero-preview) .home-hero h1 strong{
    color:#ffd3d6 !important;
  }
  html body :is(#home-landing, .hero-preview) .home-hero-copy>p{
    font-size:14.5px !important;
    line-height:1.7 !important;
    margin:0 0 16px !important;
    color:rgba(255,255,255,.9) !important;
    max-width:34em;
  }
  html body :is(#home-landing, .hero-preview) .home-hero-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    width:100%;
  }
  html body :is(#home-landing, .hero-preview) .home-hero-actions a{
    flex:1 1 auto !important;
    min-height:48px !important;
    justify-content:center !important;
    border-radius:14px !important;
    font-size:15px !important;
    font-weight:800 !important;
    box-shadow:0 10px 28px rgba(0,0,0,.22) !important;
  }
  html body :is(#home-landing, .hero-preview) .home-hero-actions .home-primary-cta,
  html body :is(#home-landing, .hero-preview) .home-hero-actions a.home-primary-cta{
    background:linear-gradient(135deg, #e83645, #c41f32) !important;
    color:#fff !important;
    border:0 !important;
  }
  html body :is(#home-landing, .hero-preview) .home-hero-actions .home-secondary-cta,
  html body :is(#home-landing, .hero-preview) .home-hero-actions a.home-secondary-cta{
    background:rgba(255,255,255,.14) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.45) !important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  html body :is(#home-landing, .hero-preview) .home-hero-note{
    display:flex !important;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
    color:rgba(255,255,255,.88);
  }
  html body :is(#home-landing, .hero-preview) .home-hero-note span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:30px;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    font-size:11.5px;
    font-weight:700;
  }
  html body :is(#home-landing, .hero-preview) .home-hero-note i{
    background:#ff6b73;
  }

  /* Inner pages: keep a short photo band + readable cream copy. */
  html body #page-hero .page-hero-media{
    width:100% !important;
    height:min(42vw, 210px) !important;
    min-height:160px !important;
    max-height:210px !important;
    border-radius:0 !important;
  }
  html body #page-hero .page-hero-copy{
    width:100% !important;
    min-height:0 !important;
    padding:14px 16px 16px !important;
    background:#f7f3ea;
  }
  html body #page-hero .page-hero-title{
    font-size:clamp(20px, 5.5vw, 26px);
    margin-bottom:6px;
  }
  html body #page-hero .page-hero-text{
    font-size:13px;
    line-height:1.65;
  }
  html body #home-landing .home-stats{
    width:calc(100% - 24px);
    margin-top:12px;
  }
  html:not([data-view="home"]) #workspace.shell,
  html body #page-hero + .shell{
    padding-top:14px;
  }
}

@media (max-width:420px){
  html body .header.site-chrome .site-chrome-header-inner{padding-inline:10px !important}
  html body .header.site-chrome .site-chrome-logo .brand-mark--wide,
  html body .header.site-chrome .site-chrome-logo .brand-mark-img{
    height:var(--brand-mark-size-mobile, var(--brand-mark-size, 36px)) !important;
    max-width:min(190px, 56vw) !important;
  }
  html body :is(#home-landing, .hero-preview) .home-hero-copy{
    padding:20px 16px 24px !important;
  }
  html body #page-hero .page-hero-media{
    height:min(44vw, 190px) !important;
    max-height:190px !important;
  }
}