.look-principles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:22px}
.look-principles article{display:flex;gap:14px;padding:18px;background:#e9eee7;border-radius:18px}
.look-principles b{color:var(--green);font-size:20px}
.look-principles p{margin:0;line-height:1.55;color:var(--muted)}
.look-list{display:grid;gap:16px}
.look-card{background:var(--card);border:1px solid rgba(23,35,31,.07);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.look-head{display:flex;justify-content:space-between;gap:20px;padding:23px 24px;background:linear-gradient(120deg,#f7f8f4,#eef2eb)}
.look-head small{font-size:12px;letter-spacing:.14em;color:var(--green);font-weight:800}
.look-head h3{font-size:24px;margin:7px 0}
.look-head p{margin:0;color:var(--muted)}
.palette{display:flex;align-items:center;min-width:108px}
.palette i{display:block;width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.12);margin-left:-8px}
.people-looks{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.people-looks>div{display:grid;grid-template-columns:92px 1fr;gap:8px;padding:18px 22px;background:#fff}
.people-looks b{color:var(--green)}
.people-looks span{line-height:1.6;color:#44514b}
.look-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 22px;background:#fbfaf6;font-size:13px;color:var(--muted)}
@media(max-width:760px){.look-principles,.people-looks,.look-bottom{grid-template-columns:1fr}.look-head{flex-direction:column}.people-looks>div{grid-template-columns:78px 1fr}.palette{padding-left:8px}}
.packing-note{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.55}
@media(min-width:900px){.priority-grid{grid-template-columns:repeat(4,1fr)}}
.sub-title{margin:30px 0 14px;font-size:20px}.media-roles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.media-device{position:relative;padding:18px;background:#fff;border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.media-device:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--device)}.media-device small{color:var(--muted)}.media-device h3{margin:5px 0 16px}.media-device p{min-height:82px;color:var(--muted);font-size:13px;line-height:1.55}.media-device>b{font-size:12px;color:var(--green)}.media-tasks{display:grid;gap:10px}.media-task{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:16px 18px;background:#fff;border-radius:18px;box-shadow:var(--shadow)}.media-task i{font-style:normal;font-size:20px;font-weight:900;color:var(--orange)}.media-task h4{margin:0 0 4px}.media-task p{margin:0 0 5px;color:var(--muted);font-size:13px;line-height:1.5}.media-task small{color:var(--green)}.media-task>span{padding:6px 9px;border-radius:9px;background:#fff0e8;color:#9e4a26;font-size:12px;font-weight:800}.shot-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.shot-list article{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:16px;background:#fff;border-radius:18px}.shot-list>b{color:var(--green)}.shot-list span,.shot-list small{display:block}.shot-list small{margin-top:5px;color:var(--muted)}
@media(max-width:900px){.media-roles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.media-roles,.shot-list{grid-template-columns:1fr}.media-task{grid-template-columns:36px 1fr}.media-task>span{grid-column:2;justify-self:start}.media-device p{min-height:auto}}

/* Dedicated mobile cover: keep all four people visible and move facts below the artwork. */
.mobile-summary{display:none}
@media(max-width:760px){
  .hero{
    min-height:0;
    height:548px;
    padding:30px 22px 0;
    background-image:url('assets/generated/hero/family-cartoon-mobile-v1.png');
    background-size:cover;
    background-position:center 62%;
    display:block;
  }
  .hero:before{
    background:linear-gradient(180deg,rgba(4,47,58,.82) 0%,rgba(4,47,58,.48) 34%,rgba(4,47,58,.08) 58%,rgba(4,47,58,0) 76%);
  }
  .hero:after{display:none}
  .hero>.eyebrow,.hero>h1,.hero>p{position:relative;z-index:2}
  .hero .eyebrow{font-size:10px;letter-spacing:.2em;margin-bottom:12px}
  .hero h1{font-size:38px;line-height:1.01;letter-spacing:-.045em;max-width:330px;margin:0}
  .hero h1 span{display:inline-block;margin-top:4px}
  .hero p{font-size:14px;margin-top:13px;letter-spacing:.01em}
  .hero-stats{display:none}
  .mobile-summary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:14px 16px;
    background:#f5f2e9;
  }
  .mobile-summary .stat{
    min-height:auto;
    padding:13px 15px;
    border:1px solid rgba(18,47,40,.08);
    border-radius:16px;
    background:#fff;
    color:var(--ink);
    box-shadow:0 8px 22px rgba(27,48,41,.06);
  }
  .mobile-summary .stat b{font-size:20px;line-height:1.1}
  .mobile-summary .stat small{font-size:12px;color:var(--muted);margin-top:5px}
  .tabs{
    position:sticky;
    top:0;
    z-index:20;
    justify-content:flex-start;
    gap:4px;
    padding:10px 12px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    box-shadow:0 6px 18px rgba(25,45,39,.07);
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto;min-width:62px;padding:10px 13px;scroll-snap-align:start}
  main{padding-top:28px}
  .section-head h2{font-size:32px}
}

@media(max-width:390px){
  .hero{height:520px;padding:26px 18px 0;background-position:center 61%}
  .hero h1{font-size:35px}
  .hero p{font-size:13px}
}