/* v3.8: ten intentional mobile layouts, keyed to the active desktop preset.
   These rules never change desktop hero composition or page-specific content. */
@media(max-width:650px){
.site-main .content .dct-hero{display:block;position:relative;isolation:isolate;width:100%;min-height:310px;overflow:hidden;border-radius:18px!important;padding:20px 18px 21px!important;margin-bottom:19px;box-shadow:0 9px 22px rgba(21,25,29,.15)}
.site-main .content .dct-hero__copy{display:block;position:relative;z-index:4;max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;border:0!important}
.site-main .content .dct-hero__mobile-brand{display:block;position:relative;z-index:3;width:66px;height:66px;margin:0 0 12px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.13))}
.site-main .content .dct-hero__mobile-brand img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;background:#fff;border-radius:50%;border:1px solid #F4510B}
.site-main .content .dct-hero__eyebrow{display:none}
.site-main .content .dct-hero h1{font-size:clamp(1.36rem,6vw,1.89rem)!important;line-height:1.16!important;letter-spacing:-.027em!important;margin:0 0 9px!important;max-width:85%;text-align:left!important;text-wrap:pretty}
.site-main .content .dct-hero__intro{font-size:clamp(.82rem,3.6vw,.94rem)!important;line-height:1.47!important;margin:0 0 10px!important;max-width:83%;font-weight:460}
.site-main .content .dct-hero__actions{display:flex!important;gap:9px!important;flex-wrap:wrap!important;margin:14px 0 0!important;background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important;max-width:100%;width:100%}
.site-main .content .dct-hero__button{display:inline-flex!important;flex:1 1 auto;min-width:0;min-height:43px;padding:10px 10px!important;font-size:.76rem!important;font-weight:780;border-radius:10px!important;text-align:center;white-space:normal}
.site-main .content .dct-hero__updated{font-size:.72rem;line-height:1.35;margin-top:10px;max-width:100%}
.site-main .content .dct-hero__edition{display:none!important}
.site-main .content .dct-hero__scene{position:absolute!important;inset:0 0 0 auto!important;z-index:-1!important;width:61%!important;height:100%!important;opacity:.94!important;margin:0!important;flex:auto!important;transform:none!important;clip-path:none!important;border:0!important;border-radius:0!important;pointer-events:none}
.site-main .content .dct-hero__scene img{display:block!important;position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:50% 50%!important;transform:none!important;aspect-ratio:auto!important;filter:none!important}
.site-main .content .dct-hero__scene::before{display:block!important;content:"";position:absolute;z-index:2;inset:0;pointer-events:none}
.site-main .content .dct-hero__scene--logo img{display:none!important}
.site-main .content .dct-hero__share{z-index:12}
/* 01 — night cones, centered brand lock-up, vivid diagonal line. */
.site-main .content .dct-hero--h01{background:#15191D;color:#fff;border:1px solid #F4510B}
.site-main .content .dct-hero--h01 .dct-hero__mobile-brand{margin-left:25%}
.site-main .content .dct-hero--h01 .dct-hero__scene{width:55%!important;border-left:7px solid #F4510B!important;transform:skew(-12deg)!important;right:-8%!important}
.site-main .content .dct-hero--h01 .dct-hero__scene img{transform:skew(12deg) scale(1.2)!important}
.site-main .content .dct-hero--h01 .dct-hero__scene::before{background:linear-gradient(90deg,#15191D 0%,rgba(21,25,29,.12) 100%)}
.site-main .content .dct-hero--h01 h1,.site-main .content .dct-hero--h01 .dct-hero__intro{max-width:71%}
/* 02 — light branded editorial, illustrated warm sky on the right. */
.site-main .content .dct-hero--h02{background:linear-gradient(120deg,#fff 0%,#fff 48%,#FFF0E8 100%);color:#202326;border:1px solid #F4510B}
.site-main .content .dct-hero--h02::before{width:54%!important;right:-25%!important;top:-20%!important;height:140%!important;opacity:.7!important;background:linear-gradient(135deg,#FFF0E8 0%,#FFB78F 65%,#F4510B 100%)}
.site-main .content .dct-hero--h02 .dct-hero__scene{background:url('/assets/images/heroes/sunset-california.svg') center / cover no-repeat;width:52%!important}
.site-main .content .dct-hero--h02 .dct-hero__scene::before{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.06) 80%)}
.site-main .content .dct-hero--h02 h1,.site-main .content .dct-hero--h02 .dct-hero__intro{max-width:74%}
/* 03 — light geographic map card with clean editorial text. */
.site-main .content .dct-hero--h03{background:#fff;color:#202326;border:1px solid #F4510B}
.site-main .content .dct-hero--h03 .dct-hero__scene{background:url('/assets/images/heroes/california-outline.svg') center / contain no-repeat;right:-11%!important;width:62%!important;opacity:.63!important}
.site-main .content .dct-hero--h03 .dct-hero__scene img{display:none!important}
.site-main .content .dct-hero--h03 .dct-hero__scene::before{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.1) 85%)}
.site-main .content .dct-hero--h03 h1,.site-main .content .dct-hero--h03 .dct-hero__intro{max-width:75%}
.site-main .content .dct-hero--h03 .dct-hero__button--secondary{border-color:#202326!important;color:#202326!important;background:#fff!important}
/* 04 — preferred Ribbon Accent, visible nighttime road ribbon. */
.site-main .content .dct-hero--h04{background:#15191D;color:#fff;border:1px solid #F4510B;border-left:5px solid #F4510B}
.site-main .content .dct-hero--h04 .dct-hero__mobile-brand{margin:0 auto 10px 37%}
.site-main .content .dct-hero--h04 .dct-hero__scene{width:100%!important;right:0!important;opacity:.75!important}
.site-main .content .dct-hero--h04 .dct-hero__scene::before{background:linear-gradient(90deg,rgba(21,25,29,.96) 0%,rgba(21,25,29,.77) 55%,rgba(21,25,29,.18) 100%)}
.site-main .content .dct-hero--h04 h1,.site-main .content .dct-hero--h04 .dct-hero__intro{max-width:88%}
/* 05 — sunset poster with warm readable white text and original logo. */
.site-main .content .dct-hero--h05{background:#9D3D19;color:#fff;border:1px solid #F4510B;flex-direction:row}
.site-main .content .dct-hero--h05 .dct-hero__scene{background:url('/assets/images/heroes/sunset-california.svg') center / cover no-repeat;width:100%!important;opacity:.75!important}
.site-main .content .dct-hero--h05 .dct-hero__scene::before{background:linear-gradient(90deg,rgba(66,23,11,.89),rgba(66,23,11,.35))}
.site-main .content .dct-hero--h05 h1,.site-main .content .dct-hero--h05 .dct-hero__intro{max-width:100%}
.site-main .content .dct-hero--h05 .dct-hero__button--secondary{background:#fff;color:#202326!important;border-color:#fff}
/* 06 — crisp light route illustration and airy article-style spacing. */
.site-main .content .dct-hero--h06{background:#fff;color:#202326;border:1px solid #F4510B}
.site-main .content .dct-hero--h06 .dct-hero__scene{background:url('/assets/images/heroes/road-route.svg') center / cover no-repeat;width:51%!important;right:-9%!important}
.site-main .content .dct-hero--h06 .dct-hero__scene img{display:none!important}
.site-main .content .dct-hero--h06 .dct-hero__scene::before{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.25) 55%,transparent 100%)}
.site-main .content .dct-hero--h06 h1,.site-main .content .dct-hero--h06 .dct-hero__intro{max-width:77%}
.site-main .content .dct-hero--h06 .dct-hero__button--secondary{color:#202326!important;background:#fff!important;border:1px solid #202326!important}
/* 07 — dark split with California graphic, original logo in upper corner. */
.site-main .content .dct-hero--h07{background:#202326;color:#fff;border:1px solid #F4510B}
.site-main .content .dct-hero--h07 .dct-hero__scene{width:54%!important;right:-5%!important;background:url('/assets/images/heroes/night-cones.svg') center / cover no-repeat;border-left:6px solid #F4510B!important;transform:skew(-10deg)!important}
.site-main .content .dct-hero--h07 .dct-hero__scene img{display:none!important}
.site-main .content .dct-hero--h07 .dct-hero__scene::before{background:linear-gradient(90deg,#202326,transparent 85%)}
.site-main .content .dct-hero--h07 h1,.site-main .content .dct-hero--h07 .dct-hero__intro{max-width:72%}
.site-main .content .dct-hero--h07 .dct-hero__button--secondary{color:#fff!important;background:rgba(0,0,0,.24)!important;border-color:#fff!important}
/* 08 — rich charcoal sunset, right side illustration stays visible. */
.site-main .content .dct-hero--h08{background:#712F1D;color:#fff;border:1px solid #F4510B}
.site-main .content .dct-hero--h08 .dct-hero__scene{width:100%!important;right:0!important;opacity:.72!important}
.site-main .content .dct-hero--h08 .dct-hero__scene::before{background:linear-gradient(90deg,rgba(58,28,22,.96),rgba(58,28,22,.7) 55%,rgba(58,28,22,.12))}
.site-main .content .dct-hero--h08 h1,.site-main .content .dct-hero--h08 .dct-hero__intro{max-width:85%}
/* 09 — bright coastal-style layout, accent wave and charcoal type. */
.site-main .content .dct-hero--h09{background:#fff;color:#202326;border:1px solid #F4510B}
.site-main .content .dct-hero--h09 .dct-hero__scene{width:100%!important;right:0!important;background:url('/assets/images/heroes/sunset-california.svg') center bottom / cover no-repeat;opacity:.27!important}
.site-main .content .dct-hero--h09 .dct-hero__scene img{display:none!important}
.site-main .content .dct-hero--h09 .dct-hero__scene::before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.96) 47%,transparent 100%)}
.site-main .content .dct-hero--h09 h1,.site-main .content .dct-hero--h09 .dct-hero__intro{max-width:100%}
.site-main .content .dct-hero--h09 .dct-hero__button--secondary{color:#202326!important;border-color:#202326!important;background:#fff!important}
/* 10 — dark road plus original round brand, right scene rather than text overlay. */
.site-main .content .dct-hero--h10{background:#15191D;color:#fff;border:1px solid #F4510B;flex-direction:row}
.site-main .content .dct-hero--h10 .dct-hero__scene{width:59%!important;right:-7%!important;background:#15191D}
.site-main .content .dct-hero--h10 .dct-hero__scene::before{background:linear-gradient(90deg,#15191D,transparent)}
.site-main .content .dct-hero--h10 h1,.site-main .content .dct-hero--h10 .dct-hero__intro{max-width:77%}
.site-main .content .dct-hero--h10 .dct-hero__button--secondary{color:#fff!important;border:1px solid #fff!important;background:#202326!important}
}
@media(max-width:370px){.site-main .content .dct-hero{padding:17px 13px 19px!important}.site-main .content .dct-hero h1{font-size:1.34rem!important;max-width:90%!important}.site-main .content .dct-hero__intro{max-width:89%!important;font-size:.8rem!important}.site-main .content .dct-hero__button{font-size:.71rem!important;padding:9px 7px!important}.site-main .content .dct-hero__mobile-brand{width:57px;height:57px}}
/* Keep illustrated scenes above flat hero backgrounds but beneath all real text. */
@media(max-width:650px){.site-main .content .dct-hero__scene{z-index:0!important}}
@media(max-width:650px){
 .site-main .content .dct-hero--h02 .dct-hero__scene{background-position:78% center!important;background-size:auto 100%!important}
 .site-main .content .dct-hero--h02 .dct-hero__scene::before{background:linear-gradient(90deg,rgba(255,255,255,.87),transparent 38%)!important}
 .site-main .content .dct-hero--h03 .dct-hero__scene{background-position:82% center!important;background-size:auto 100%!important;opacity:.76!important}
 .site-main .content .dct-hero--h03 .dct-hero__scene::before{background:linear-gradient(90deg,rgba(255,255,255,.91),transparent 32%)!important}
 .site-main .content .dct-hero--h05 .dct-hero__scene{background-position:70% center!important;background-size:cover!important;opacity:.87!important}
 .site-main .content .dct-hero--h05 .dct-hero__scene::before{background:linear-gradient(90deg,rgba(66,23,11,.83),rgba(66,23,11,.12))!important}
 .site-main .content .dct-hero--h06 .dct-hero__scene{background-position:72% center!important;background-size:auto 100%!important;opacity:.78!important}
 .site-main .content .dct-hero--h06 .dct-hero__scene::before{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.06) 53%)!important}
 .site-main .content .dct-hero--h09 .dct-hero__scene{background-position:79% bottom!important;background-size:cover!important;opacity:.42!important}
}