/* ========================================================================== 
   DESIGN IRON R45 — PREMIUM STABILITY RELEASE CANDIDATE
   Goal: preserve the strongest Design Iron visual DNA while eliminating the
   mobile blank-scroll / oversized-media / overlay collisions exposed in R42–R43.
   ScrollCraft is progressive enhancement on desktop only. Mobile is native.
   ========================================================================== */

:root{
  --r45-copper:#e49a64;
  --r45-copper-hi:#ffc596;
  --r45-cream:#fff8f0;
  --r45-ink:#0d1115;
  --r45-panel:#151a1f;
  --r45-line:rgba(255,255,255,.13);
}
html,body{max-width:100%;overflow-x:clip!important}
body[data-build="DESIGN_IRON_R45"]{background:#0d1115!important}

/* ---------- Fix two previously unstyled portfolio bands ------------------ */
.work-pulse{
  padding:14px 0 18px;
  background:linear-gradient(180deg,#11161b,#0e1216);
  border-block:1px solid rgba(255,255,255,.07);
  overflow:hidden;
}
.work-pulse-track{
  width:min(1220px,calc(100% - 28px));
  margin-inline:auto;
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0 6px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.work-pulse-track::-webkit-scrollbar{display:none}
.work-pulse-track>a{
  position:relative;
  flex:0 0 148px;
  height:96px;
  overflow:hidden;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.11);
  background:#171c21;
  color:#fff;
  text-decoration:none;
  scroll-snap-align:start;
  isolation:isolate;
}
.work-pulse-track>a:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.68));
}
.work-pulse-track img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.work-pulse-track span{position:absolute;z-index:2;right:10px;bottom:9px;font-size:12px;font-weight:900}

.work-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.work-mini-card{
  position:relative;
  min-height:190px;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:#15191e;
  color:#fff!important;
  text-decoration:none!important;
  isolation:isolate;
}
.work-mini-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.76));z-index:1}
.work-mini-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.work-mini-card span{position:absolute;z-index:2;right:14px;bottom:12px;font-size:15px;font-weight:900}

/* ---------- Hero: rich, immediate, no dead air --------------------------- */
.hero{overflow:hidden}
.di44-hero-stock{transition:transform .18s ease,border-color .18s ease,background .18s ease}
@media(hover:hover){.di44-hero-stock:hover{transform:translateY(-2px);border-color:rgba(255,196,150,.42);background:rgba(255,255,255,.085)}}
.hero-projects figure{contain:paint}
.hero-craft-video video{background:#15191d url("assets/v38/craft_micro_reel_poster.jpg") center/cover no-repeat!important}

/* ---------- Desktop ScrollCraft signature: short and bounded ------------- */
.di44-progress{display:none!important}
.di45-scrollcraft-live .di44-progress{display:block!important}
.di45-sc-static .di44-signature{height:auto!important}
.di45-sc-static .di44-stage{position:relative!important;top:auto!important;height:min(760px,82vh)!important}
.di45-sc-static .di44-stage-copy,.di45-sc-static .di44-stage-steps article,.di45-sc-static .di44-stage-cta{opacity:1!important;transform:none!important;pointer-events:auto!important}
.di45-sc-static .di44-stage-result{clip-path:none!important;opacity:.45!important}
.di45-sc-static .di44-stage-lines i{transform:none!important}

/* ---------- Forms: truth-first contrast and no overlay -------------------- */
#order .form-card{box-shadow:0 22px 70px rgba(0,0,0,.10)}
#order .field input,#order .field textarea,#order .field select{
  color:#161616!important;background:#fff!important;border-color:#d8d0c6!important;opacity:1!important;
}
#order .field input::placeholder,#order .field textarea::placeholder{color:#7b7b7b!important;opacity:1!important}
#order .field label,#order .field span,#order .form-section h3,#order .form-section p{opacity:1!important}
#order .submit-lead{min-height:54px;border-radius:14px;font-weight:950}

/* ---------- Mobile --------------------------------------------------------- */
@media(max-width:820px){
  html{scroll-behavior:smooth}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))!important}

  /* Mobile must never depend on scroll-timeline opacity to display content. */
  .reveal,.reveal.in,.reveal.visible,[data-sc-cue],[data-sc-reveal]{
    opacity:1!important;transform:none!important;pointer-events:auto!important;
  }

  .header{padding:8px 0!important}
  .hero{min-height:0!important;padding:92px 0 36px!important;align-items:start!important}
  .hero-grid.elite-hero-grid{display:grid!important;grid-template-columns:1fr!important;gap:24px!important;align-items:start!important}
  .hero-copy{order:1!important;margin:0!important;padding:0!important}
  .hero .eyebrow{margin-bottom:13px!important;font-size:10px!important}
  .hero h1{font-size:clamp(42px,11.4vw,54px)!important;line-height:.98!important;max-width:10.2ch!important;margin:0!important}
  .hero-copy>p{font-size:15px!important;line-height:1.63!important;margin:17px 0 0!important;max-width:35ch!important}
  .hero-service-signal{margin-top:14px!important}
  .hero-actions{margin-top:17px!important;display:grid!important;grid-template-columns:1.1fr .9fr!important;gap:8px!important}
  .hero-actions .btn{min-height:50px!important;border-radius:14px!important;padding-inline:10px!important;font-size:12.5px!important}
  .di44-hero-stock{margin-top:11px!important;border-radius:14px!important}
  .hero-projects{order:2!important;width:100%!important;max-width:none!important;aspect-ratio:1/1!important;min-height:0!important;margin:0!important;padding:4px!important;gap:4px!important;border-radius:20px!important;box-shadow:0 20px 56px rgba(0,0,0,.28)!important}
  .hero-projects figure{border-radius:13px!important}
  .hero-projects figcaption{right:0!important;left:0!important;bottom:0!important;padding:20px 9px 9px!important;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))!important;border:0!important}
  .hero-projects figcaption b{font-size:12px!important}
  .hero-projects figcaption span,.hero-count{display:none!important}
  .hero-craft-video:before{right:7px!important;bottom:7px!important;font-size:8px!important;padding:5px 7px!important}
  .hero-projects .portfolio-badge{top:8px!important;right:8px!important;padding:6px 8px!important;font-size:8.5px!important}

  /* Category pulse is intentionally compact. It replaces raw full-width imgs. */
  .work-pulse{padding:11px 0 13px}
  .work-pulse-track{width:100%;padding-inline:14px;gap:8px}
  .work-pulse-track>a{flex-basis:118px;height:78px;border-radius:14px}
  .work-pulse-track span{font-size:10.5px;right:8px;bottom:7px}

  /* Limited collection: premium but contained; no full-screen slide. */
  #limited.limited-r34{padding:18px 0 24px!important}
  #limited.limited-r34 .limited-r34-shell{width:calc(100% - 20px)!important}
  #limited.limited-r34 .limited-r34-panel{padding:14px 10px 12px!important;border-radius:22px!important}
  #limited.limited-r34 .limited-r34-copy h2{font-size:clamp(34px,9.8vw,43px)!important;line-height:.93!important;max-width:9ch!important}
  #limited.limited-r34 .limited-r34-copy p{font-size:13px!important;line-height:1.48!important}
  #limited.limited-r34 .limited-r34-cta-top{min-height:46px!important;border-radius:14px!important}
  #limited.limited-r34 .limited-r34-meta>div{min-height:56px!important}
  #limited.limited-r34 .limited-r34-rail{padding:2px 7vw 3px 0!important;gap:9px!important}
  #limited.limited-r34 .limited-r34-card{flex:0 0 82vw!important;max-width:82vw!important;border-radius:18px!important}
  #limited.limited-r34 .limited-r34-media{aspect-ratio:1.18/1!important;padding:9px!important}
  #limited.limited-r34 .limited-r34-info{padding:14px!important;gap:6px!important}
  #limited.limited-r34 .limited-r34-info h3{font-size:28px!important}
  #limited.limited-r34 .limited-r34-info p{font-size:12.5px!important;line-height:1.45!important}
  #limited.limited-r34 .limited-r34-cta{min-height:46px!important}

  /* Audience cards: photo-led, not black letterboxed documents. */
  .audience-grid{grid-template-columns:1fr!important;gap:12px!important}
  .audience-card{min-height:0!important;border-radius:20px!important;overflow:hidden!important}
  .audience-card img,.audience-card:nth-child(n) img{width:100%!important;height:210px!important;max-height:210px!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center!important;background:#15191d!important}
  .audience-body{padding:17px!important}

  /* Main portfolio: compact editorial mosaic. */
  #work.section{padding-top:58px!important;padding-bottom:58px!important}
  #work .projects{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}
  #work .project,#work .project:nth-child(n){grid-column:auto!important;min-height:0!important;height:auto!important;aspect-ratio:1/1!important;border-radius:17px!important}
  #work .project:first-child{grid-column:1/-1!important;aspect-ratio:1.35/1!important}
  #work .project-copy{padding:13px!important}
  #work .project-copy small{font-size:8.5px!important}
  #work .project-copy h3{font-size:18px!important;line-height:1.05!important;margin:4px 0!important}
  #work .project-copy p{display:none!important}
  #work .work-mini-grid{gap:9px;margin-top:9px}
  #work .work-mini-card{min-height:0;aspect-ratio:1.35/1;border-radius:17px}
  #work .work-mini-card span{font-size:13px;right:11px;bottom:9px}
  #work .project-link{margin-top:14px!important}
  #work .project-link .btn{width:100%!important;justify-content:center!important;min-height:48px!important;border-radius:14px!important}

  /* Real-work gallery: no 58svh cards; all six projects are visible in a grid. */
  #real-work.curated-real{padding-top:54px!important;padding-bottom:56px!important}
  #real-work .curated-grid{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;
    margin:0!important;padding:0!important;overflow:visible!important;direction:rtl!important;
    scroll-snap-type:none!important;
  }
  #real-work .curated-grid figure{
    width:auto!important;min-width:0!important;max-width:none!important;min-height:0!important;height:auto!important;
    aspect-ratio:4/5!important;border-radius:17px!important;overflow:hidden!important;margin:0!important;
  }
  #real-work .curated-grid figure:first-child{grid-column:1/-1;aspect-ratio:1.45/1!important}
  #real-work .curated-grid img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
  #real-work .curated-grid figcaption{right:8px!important;left:8px!important;bottom:8px!important;padding:7px 9px!important;font-size:10px!important;border-radius:10px!important}

  /* Six-item editorial grids: after a full-width lead, the final item closes
     the composition instead of leaving a visible empty half-column. */
  #work .projects > .project:last-child{grid-column:1/-1!important;aspect-ratio:1.55/1!important}
  #real-work .curated-grid > figure:last-child{grid-column:1/-1!important;aspect-ratio:1.55/1!important}

  /* Signature section: native art direction. Zero sticky, zero black travel. */
  .di44-progress{display:none!important}
  .di44-signature{height:auto!important;min-height:0!important;overflow:visible!important;padding:46px 0!important;background:linear-gradient(180deg,#11171c,#0d1216)!important}
  .di44-stage{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:hidden!important;margin:0 12px!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.11)!important;background:#151a1f!important;box-shadow:0 18px 52px rgba(0,0,0,.26)!important}
  .di44-stage-raw{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:16/10!important;min-height:0!important;max-height:none!important;object-fit:cover!important;object-position:center!important;filter:brightness(.82) saturate(.98)!important;border-radius:21px 21px 0 0!important}
  .di44-stage-result{display:none!important}
  .di44-stage-shade,.di44-stage-lines{display:none!important}
  .di44-stage-copy{position:relative!important;right:auto!important;top:auto!important;width:auto!important;max-width:none!important;padding:22px 18px 7px!important;text-align:right!important}
  .di44-stage-copy small{font-size:8.5px!important;letter-spacing:.12em!important}
  .di44-stage-copy h2{font-size:clamp(34px,10vw,44px)!important;line-height:.96!important;max-width:10ch!important;margin-top:8px!important}
  .di44-stage-copy p{font-size:12.5px!important;line-height:1.58!important;margin-top:11px!important}
  .di44-stage-steps{position:relative!important;right:auto!important;top:auto!important;width:auto!important;padding:10px 12px 13px!important;gap:7px!important}
  .di44-stage-steps article{display:flex!important;opacity:1!important;transform:none!important;padding:10px 11px!important;border-radius:13px!important;background:#1a2026!important;backdrop-filter:none!important}
  .di44-stage-steps span{width:28px!important;height:28px!important;flex-basis:28px!important}
  .di44-stage-steps b{font-size:12.5px!important}.di44-stage-steps small{font-size:9.5px!important}
  .di44-stage-cta{position:relative!important;left:auto!important;bottom:auto!important;width:calc(100% - 24px)!important;margin:0 12px 13px!important;min-height:46px!important;border-radius:13px!important;justify-content:center!important;background:linear-gradient(135deg,#f1b37f,#d88554)!important;color:#17100c!important}

  /* Production footage: one primary stage, smaller selectors. */
  #motion.section{padding-top:58px!important;padding-bottom:58px!important}
  #motion .production-stage-v2{grid-template-rows:auto auto!important;min-height:0!important}
  #motion .production-stage-v2 video{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/10!important;object-fit:cover!important;border-radius:16px!important}
  #motion .production-stage-copy{padding:12px 14px!important}
  #motion .production-stage-copy h3{font-size:24px!important}
  #motion .production-actions-v2 .prod-action{flex:0 0 150px!important;min-width:150px!important;max-width:150px!important;min-height:68px!important;grid-template-columns:48px 1fr!important}
  #motion .production-actions-v2 .prod-action img{width:48px!important;height:48px!important;border-radius:10px!important}

  /* Plan + start hub: clear and short. */
  .plan-gateway-v2{padding-block:46px!important}
  .plan-command{margin:0!important;border-radius:20px!important;overflow:hidden!important}
  .plan-command-visual{min-height:200px!important}
  .plan-command-copy{padding:24px 18px 26px!important}
  .plan-command-copy h2{font-size:36px!important;line-height:.98!important}
  .start-hub{padding-block:44px!important}.start-hub-shell{padding:18px 13px!important}
  .start-hub-actions{grid-template-columns:1fr 1fr!important}.start-hub-actions a{min-height:74px!important}

  /* Form: sticky tabs inside form caused vertical collisions on iOS. */
  #order.builder{padding-top:54px!important;padding-bottom:34px!important}
  #order .builder-shell{gap:14px!important}
  #order .builder-side{position:relative!important;top:auto!important;padding:20px!important;border-radius:20px!important}
  #order .builder-side h2{font-size:32px!important}
  #order .form-card{padding:14px!important;border-radius:20px!important}
  #order .tabs{position:relative!important;top:auto!important;z-index:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin:0 0 17px!important;padding:0!important;background:transparent!important}
  #order .tab{min-height:58px!important;border-radius:13px!important;font-size:13px!important}
  #order .tab small{font-size:9.5px!important}
  #order .fields{grid-template-columns:1fr!important}
  #order .field.full{grid-column:auto!important}
  #order .field input,#order .field textarea,#order .field select{font-size:16px!important;min-height:50px!important}

  /* Floating CTA: useful only when it is not covering something valuable. */
  .mobile-bar{left:10px!important;right:10px!important;bottom:max(6px,env(safe-area-inset-bottom))!important;z-index:130!important;padding:4px!important;gap:4px!important;border-radius:15px!important;background:rgba(18,22,26,.94)!important;border:1px solid rgba(255,198,148,.19)!important;box-shadow:0 18px 44px rgba(0,0,0,.35)!important;backdrop-filter:blur(16px)!important;transition:transform .2s ease,opacity .18s ease!important}
  .mobile-bar a{min-height:44px!important;font-size:11.5px!important;border-radius:11px!important}
  .mobile-bar .primary{background:linear-gradient(135deg,#ffc08a,#db8755)!important;color:#17100c!important}
  .mobile-bar.mobile-bar--suppressed{transform:translateY(calc(100% + 30px))!important;opacity:0!important;pointer-events:none!important}

  /* No accidental viewport-sized emptiness anywhere outside the hero. */
  main>section:not(.hero){min-height:0!important}
}

@media(max-width:430px){
  .hero{padding-top:86px!important}
  .hero h1{font-size:42px!important}
  #work .project-copy h3{font-size:16px!important}
  #real-work .curated-grid{gap:7px!important}
  #real-work .curated-grid figcaption{font-size:9.5px!important}
  .start-hub-actions{grid-template-columns:1fr!important}
  .start-hub-actions a{min-height:66px!important}
}

@media(max-width:360px){
  .hero h1{font-size:39px!important}
  .hero-actions{grid-template-columns:1fr!important}
  #order .tabs{grid-template-columns:1fr!important}
  #work .projects{grid-template-columns:1fr!important}
  #work .project:first-child{grid-column:auto!important;aspect-ratio:1/1!important}
  #work .projects > .project:last-child{grid-column:auto!important;aspect-ratio:1/1!important}
  #real-work .curated-grid{grid-template-columns:1fr!important}
  #real-work .curated-grid figure:first-child{grid-column:auto!important;aspect-ratio:4/5!important}
  #real-work .curated-grid > figure:last-child{grid-column:auto!important;aspect-ratio:4/5!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .di44-stage-copy,.di44-stage-steps article,.di44-stage-cta,[data-sc-cue],[data-sc-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* R45 final release-gate overrides: form legibility + zero content obstruction. */
#order .form-card{
  background:#fff9f1!important;
  color:#171513!important;
  border-color:#ddd2c5!important;
}
#order .form-section{border-top-color:#e0d7cc!important}
#order .form-section h3{color:#171513!important}
#order .form-section>p{color:#68615a!important}
#order .elite-upload{
  position:relative!important;
  color:#181512!important;
  background:#fff!important;
  border-color:#bfb4a7!important;
  border-radius:16px!important;
}
#order .file-list{color:#6b635c!important}
#order .route-status{background:#fff!important;border-color:#ddd4c9!important;color:#171513!important}
#order .route-status span{color:#6e665f!important}
#order .form-truth{color:#6d665f!important}
#order .form-status.success{color:#166d3a!important}
#order .form-status.error{color:#a12d20!important}

@media(max-width:820px){
  /* The fixed 3-button bar caused repeated overlap failures on real iPhones.
     R45 removes the obstruction instead of trying to outsmart every viewport. */
  .mobile-bar{display:none!important}
  body{padding-bottom:max(18px,env(safe-area-inset-bottom))!important}
}

/* ========================================================================== 
   DESIGN IRON R46 — TWO-ISSUE MOBILE HOTFIX
   Scope is intentionally narrow: (1) signature CTA must never clip;
   (2) production video must not reserve a black copy/letterbox block.
   ========================================================================== */
@media(max-width:820px){
  /* 1) FROM LINE TO SPACE — keep the orange CTA completely inside the card. */
  #signature-process.di44-signature{
    padding-bottom:54px!important;
  }
  #signature-process .di44-stage{
    overflow:visible!important;
    padding-bottom:14px!important;
  }
  #signature-process .di44-stage-cta{
    display:flex!important;
    box-sizing:border-box!important;
    width:calc(100% - 24px)!important;
    min-height:52px!important;
    height:auto!important;
    margin:0 12px!important;
    padding:13px 14px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:visible!important;
    flex-wrap:wrap!important;
    text-align:center!important;
  }

  /* 2) FABRICATION VIDEO — copy overlays the footage instead of creating
     a second black row. Reset the legacy 4/5 stage ratio that caused dead air. */
  #motion .production-stage-v2{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    border-radius:18px!important;
    background:#0b0c0d!important;
  }
  #motion .production-stage-v2 video,
  #motion .production-stage-v2 video.show-full-action{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:16/10!important;
    object-fit:cover!important;
    object-position:center center!important;
    border-radius:0!important;
    background:transparent!important;
  }
  #motion .production-stage-v2:before{
    z-index:1!important;
    background:linear-gradient(180deg,transparent 46%,rgba(7,9,11,.18) 62%,rgba(7,9,11,.92) 100%)!important;
  }
  #motion .production-stage-v2:after{
    z-index:1!important;
    background:linear-gradient(180deg,transparent 48%,rgba(7,9,11,.12) 64%,rgba(7,9,11,.82) 100%)!important;
  }
  #motion .production-stage-copy{
    position:absolute!important;
    z-index:3!important;
    inset:auto 0 0 0!important;
    display:block!important;
    padding:58px 16px 16px!important;
    margin:0!important;
    background:linear-gradient(180deg,transparent 0%,rgba(8,10,12,.38) 34%,rgba(8,10,12,.92) 100%)!important;
    border:0!important;
    color:#fff!important;
    pointer-events:none!important;
  }
  #motion .production-stage-copy small{display:block!important;margin:0 0 5px!important;color:#f0a77a!important;font-size:10px!important}
  #motion .production-stage-copy h3{margin:0 0 5px!important;font-size:26px!important;line-height:1!important;color:#fff!important}
  #motion .production-stage-copy p{margin:0!important;max-width:34ch!important;color:#e0dfdc!important;font-size:12.5px!important;line-height:1.45!important}
  #motion .production-selector-v2{margin-top:10px!important}
}


/* ==========================================================================
   R50 FINAL MOBILE POLISH
   - tighter hero spacing
   - better image presentation on mobile
   - 3-item limited collection support
   ========================================================================== */

#limited.limited-r34 .limited-r34-meta{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:740px!important}
#limited.limited-r34 .limited-r34-rail{align-items:stretch!important}
#limited.limited-r34 .limited-r34-card{align-self:stretch!important}
#limited.limited-r34 .limited-r34-media img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}
#limited.limited-r34 .limited-r34-stock{white-space:normal!important;text-align:center!important;line-height:1.2!important}
@media(max-width:820px){
  .hero{padding:58px 0 24px!important}
  .hero-grid.elite-hero-grid{gap:16px!important}
  .hero-copy .eyebrow{margin-bottom:10px!important}
  .hero-copy h1{margin:0 0 10px!important}
  .hero-copy p{margin:12px 0 14px!important;max-width:34ch!important}
  .hero-service-signal{margin:0 0 12px!important;gap:10px!important}
  .hero-actions{margin-top:0!important;gap:10px!important}
  .di44-hero-stock{margin-top:10px!important}
  .hero-projects{aspect-ratio:.94/1!important;max-width:100%!important}
  .work-pulse{padding:6px 0 10px!important}
  .section{padding:58px 0!important}
  #what .section-head{margin-bottom:18px!important}
  .audience-grid{gap:10px!important}
  .audience-card{border-radius:22px!important;overflow:hidden!important;box-shadow:0 14px 36px rgba(0,0,0,.18)!important}
  .audience-card img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:4/3!important;object-fit:cover!important;object-position:center center!important;background:#111418!important}
  .audience-body{padding:18px!important;gap:10px!important}
  .audience-body h3{font-size:clamp(28px,8.6vw,36px)!important;line-height:1.02!important}
  .audience-body p{font-size:15px!important;line-height:1.6!important}
  .audience-links a{min-height:44px!important;padding:0 14px!important}
  .projects{gap:10px!important}
  .project,.project:nth-child(n){min-height:332px!important;border-radius:22px!important}
  .project img{object-position:center center!important}
  .project-copy{padding:16px 16px 18px!important}
  .project-copy h3{font-size:23px!important}
  .project-copy p{max-width:96%!important;font-size:13px!important}
  .curated-grid{gap:10px!important}
  .curated-grid figure{border-radius:18px!important;overflow:hidden!important;background:#111418!important}
  .curated-grid img{width:100%!important;height:100%!important;min-height:190px!important;object-fit:cover!important;object-position:center center!important}
  #limited.limited-r34{padding:14px 0 22px!important}
  #limited.limited-r34 .limited-r34-panel{padding:14px 10px 12px!important}
  #limited.limited-r34 .limited-r34-header{margin-bottom:10px!important}
  #limited.limited-r34 .limited-r34-copy h2{max-width:10ch!important}
  #limited.limited-r34 .limited-r34-meta{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-bottom:10px!important}
  #limited.limited-r34 .limited-r34-meta>div{min-height:60px!important;padding:8px 6px!important}
  #limited.limited-r34 .limited-r34-meta strong{font-size:20px!important}
  #limited.limited-r34 .limited-r34-meta span{font-size:10px!important;line-height:1.25!important}
  #limited.limited-r34 .limited-r34-rail{padding:2px 8vw 3px 0!important;gap:9px!important}
  #limited.limited-r34 .limited-r34-card{flex:0 0 84vw!important;max-width:84vw!important;border-radius:20px!important}
  #limited.limited-r34 .limited-r34-media{aspect-ratio:1.08/1!important;padding:10px!important}
  #limited.limited-r34 .limited-r34-info{padding:14px 14px 16px!important;gap:7px!important}
  #limited.limited-r34 .limited-r34-info h3{font-size:29px!important}
  #limited.limited-r34 .limited-r34-info p{font-size:13px!important;line-height:1.48!important}
  #limited.limited-r34 .limited-r34-cta{min-height:46px!important}
}

/* ==========================================================================
   R51 — MOBILE IMAGE FIT + COMPACT CENTERED HERO
   Screenshots 6882–6891 driven correction.
   ========================================================================== */

/* Global media safety */
img{
  image-rendering:auto;
  -webkit-user-drag:none;
}
.hero-projects img,
.audience-card img,
.project img,
.work-mini-card img,
.curated-grid img,
.work-pulse-track img,
.limited-r34-media img{
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* Make category images use their real aspect ratio instead of forcing crops. */
@media(max-width:820px){
  /* Compact, centered first screen */
  .hero{
    min-height:0!important;
    padding:34px 0 14px!important;
  }
  .hero .container{
    width:calc(100% - 28px)!important;
  }
  .hero-grid.elite-hero-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
    align-items:start!important;
  }
  .hero-copy{
    order:1!important;
    text-align:center!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
  }
  .hero-copy .eyebrow{
    justify-content:center!important;
    margin:0 0 9px!important;
    font-size:10px!important;
    letter-spacing:.11em!important;
  }
  .hero-copy .eyebrow:before{width:18px!important}
  .hero-copy h1{
    text-align:center!important;
    font-size:clamp(39px,10.7vw,48px)!important;
    line-height:.93!important;
    letter-spacing:-.045em!important;
    margin:0 auto 9px!important;
    max-width:10.5ch!important;
    text-wrap:balance;
  }
  .hero-copy>p{
    text-align:center!important;
    font-size:14.5px!important;
    line-height:1.55!important;
    margin:0 auto 10px!important;
    max-width:34ch!important;
  }
  .hero-service-signal{
    width:100%!important;
    margin:0 0 10px!important;
    padding:8px 0!important;
    gap:6px!important;
    border-block:1px solid rgba(255,255,255,.08)!important;
  }
  .hero-made,.hero-audience{
    justify-content:center!important;
    gap:7px!important;
    flex-wrap:wrap!important;
    font-size:11px!important;
    line-height:1.25!important;
  }
  .hero-audience{
    font-size:10.5px!important;
    opacity:.86!important;
  }
  .hero-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1.1fr .9fr!important;
    gap:8px!important;
    margin:0!important;
  }
  .hero-actions .btn{
    min-height:47px!important;
    border-radius:15px!important;
    font-size:13px!important;
  }
  .di44-hero-stock{
    align-self:center!important;
    width:auto!important;
    margin:8px auto 0!important;
    min-height:42px!important;
    padding:6px 10px!important;
    border-radius:14px!important;
  }
  .di44-hero-stock small{display:none!important}
  .di44-hero-stock b{font-size:12px!important}
  .di44-hero-stock span{font-size:18px!important}

  /* Projects mosaic immediately below hero — shorter and less dominant */
  .hero-projects{
    order:2!important;
    width:100%!important;
    aspect-ratio:1.42/1!important;
    min-height:0!important;
    max-height:350px!important;
    margin:0 auto!important;
    padding:4px!important;
    gap:4px!important;
    border-radius:18px!important;
  }
  .hero-projects figure{border-radius:12px!important}
  .hero-projects figcaption{
    padding:16px 8px 8px!important;
  }
  .hero-projects figcaption b{font-size:11.5px!important}
  .hero-projects .portfolio-badge{
    top:7px!important; right:7px!important;
    padding:5px 8px!important;
    font-size:8px!important;
  }

  /* Category cards: preserve source composition, no fixed 210px crop. */
  .audience-card{
    min-height:0!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }
  .audience-card img,
  .audience-card:nth-child(n) img{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#111418!important;
  }
  .audience-body{
    padding:16px 17px 17px!important;
    gap:8px!important;
  }
  .audience-body h3{
    font-size:clamp(27px,8vw,34px)!important;
    line-height:1!important;
    margin:0!important;
  }
  .audience-body p{
    font-size:14.5px!important;
    line-height:1.55!important;
  }

  /* Work cards: natural image ratio instead of fixed height / hard crop. */
  .projects{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  .project,.project:nth-child(n){
    grid-column:auto!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:auto!important;
    display:block!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:#111418!important;
  }
  .project:nth-child(1){
    grid-column:1/-1!important;
  }
  .project img{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .project:after{
    background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.88) 100%)!important;
  }
  .project-copy{
    inset:auto 0 0!important;
    padding:34px 12px 12px!important;
  }
  .project-copy h3{
    font-size:20px!important;
    line-height:1.02!important;
    margin:4px 0 2px!important;
  }
  .project-copy p{display:none!important}
  .project-copy small{
    font-size:9px!important;
    letter-spacing:.04em!important;
  }
  .project-copy small:after{
    font-size:8.5px!important;
  }
  .project-live{
    top:9px!important;
    left:9px!important;
    padding:5px 7px!important;
    font-size:8.5px!important;
  }

  /* Mini cards also use the source image ratio. */
  .work-mini-grid{
    gap:10px!important;
  }
  .work-mini-card{
    min-height:0!important;
    overflow:hidden!important;
  }
  .work-mini-card img{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }

  /* Curated gallery: flexible image height, no forced crop. */
  .curated-grid{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  .curated-grid figure{
    min-height:0!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:#111418!important;
  }
  .curated-grid img{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .curated-grid figcaption{
    padding:9px 10px!important;
    font-size:11px!important;
  }

  /* Work pulse: lower footprint */
  .work-pulse{
    padding:6px 0 8px!important;
  }
  .work-pulse-track>a{
    flex-basis:108px!important;
    height:72px!important;
  }

  /* Limited collection: keep all 3 cards visually consistent */
  #limited.limited-r34 .limited-r34-media{
    aspect-ratio:auto!important;
    min-height:0!important;
    padding:9px!important;
  }
  #limited.limited-r34 .limited-r34-media img{
    width:100%!important;
    height:auto!important;
    max-height:420px!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:14px!important;
    background:#f4ede4!important;
  }
  #limited.limited-r34 .limited-r34-card{
    min-height:0!important;
  }

  /* Slightly tighter sections overall */
  #what.section,#work.section,#real-work.section{
    padding:48px 0!important;
  }
  #what .section-head,#work .section-head,#real-work .section-head{
    margin-bottom:18px!important;
  }
}

@media(max-width:430px){
  .hero{
    padding-top:26px!important;
  }
  .hero-copy h1{
    font-size:41px!important;
    max-width:10ch!important;
  }
  .hero-copy>p{font-size:14px!important}
  .hero-projects{
    max-height:315px!important;
  }
  .projects{
    grid-template-columns:1fr 1fr!important;
  }
  .project-copy h3{font-size:18px!important}
  .project-copy small:after{display:none!important}
}