@font-face{font-family:'Mulish';font-style:normal;font-weight:200;font-display:swap;src:url(fonts/mulish-200-normal.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:italic;font-weight:200;font-display:swap;src:url(fonts/mulish-200-italic.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/mulish-300-normal.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/mulish-300-italic.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/mulish-400-normal.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/mulish-400-italic.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/mulish-500-normal.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/mulish-500-italic.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/mulish-600-normal.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/mulish-600-italic.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/mulish-700-normal.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:italic;font-weight:700;font-display:swap;src:url(fonts/mulish-700-italic.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/mulish-800-normal.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:italic;font-weight:800;font-display:swap;src:url(fonts/mulish-800-italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700-normal.woff2) format('woff2')}
@font-face{font-family:'Charter';font-style:normal;font-weight:400;font-display:swap;src:local('Charter'),local('Charter Roman'),url(fonts/charter-400.woff) format('woff')}
@font-face{font-family:'Charter';font-style:italic;font-weight:400;font-display:swap;src:local('Charter Italic'),url(fonts/charter-400-italic.woff) format('woff')}
:root{--serif:'Charter','Bitstream Charter',Georgia,serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;font-family:'Mulish','Nunito Sans',sans-serif;color:#3d3d3d;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%}

/* top navigation */
.topnav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;gap:22px;align-items:center;padding:10px 24px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px;font-weight:600;letter-spacing:.02em;
  overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a,.topnav a:visited,.topnav a:hover,.topnav a:active{color:#3d3d3d;text-decoration:none}
.topnav a[aria-current=page]{text-decoration:underline;text-underline-offset:4px}
.topnav .brand{font-weight:800;margin-right:auto}

/* page structure: a 1400px design canvas that scales proportionally on desktop
   and reflows into a single column on small screens */
main.r{display:block;overflow-x:clip}
.wrap{max-width:1400px;margin:0 auto;position:relative;display:flow-root;container-type:inline-size}
.band{display:flow-root;position:relative;z-index:1}
.hero{position:relative;z-index:2;display:flow-root}
.blk{position:relative}
.blk.sp{height:0}
.txt{overflow-wrap:break-word}
.txt.nw{white-space:nowrap}
.txt br.d{display:none}
.txt .qo{position:absolute;margin-left:-.6em;margin-top:-.04em;font-size:1.63em;line-height:1;font-family:var(--serif)}
.txt .qc{font-size:1.63em;line-height:0;position:relative;top:.12em;font-family:var(--serif)}
@media (min-width:1000px){.txt br.d{display:inline}}
.txt p,.txt h2{margin:0;font-weight:400}
.txt a{color:inherit}
.row{display:flex;align-items:flex-start}
.row .cell{flex:0 0 auto}
.media .im,.cell .im{width:100%}
.media video,.cell video{display:block;width:100%;height:auto}
.shot{position:relative}
.shot img{display:block;width:100%;height:auto}
.shot .ov{position:absolute;display:block}
.zoom{display:block;cursor:zoom-in}
.cards{position:relative}
.cards .card{position:absolute;overflow:hidden}
.cards .card .sub .im{width:100%}
.heroart{position:absolute;margin:0;z-index:3}
.free{position:relative;z-index:2}
.free .fi{position:absolute}
.free .deco img{display:block;width:100%;height:auto}
.free .fi .im,.free .fi video,.free .fi .art,.cell .art{display:block;width:100%;height:auto}
.heroart img{display:block;width:100%;height:auto}

@media (max-width:760px){
  .txt.nw{white-space:normal}
  .wrap{padding:0 20px}
  .hero{padding-top:40px}
  .blk,.blk.media,.blk.cards{margin-left:0!important;width:auto!important;margin-top:max(16px,calc(var(--g,0) * .3px))!important}
  .blk.media{max-width:calc(var(--w) * 1px)}
  .blk.bleed{margin-left:-20px!important;margin-right:-20px!important;max-width:none}
  .blk.sp{margin-top:calc(var(--g,0) * .3px)!important}
  .row{display:block}
  .row .cell{width:auto!important;margin-left:0!important;margin-top:16px!important;max-width:100%}
  .row .cell:first-child{margin-top:0!important}
  .row .cell.media{max-width:min(100%,calc(var(--w) * 1px))}
  .row .cell .sub{margin-top:0!important}
  .row .cell .sub+.sub{margin-top:max(12px,calc(var(--g,0) * .3px))!important}
  .cards{display:grid;grid-template-columns:repeat(var(--mc,1),1fr);gap:10px;aspect-ratio:auto!important}
  .cards .card{position:static;width:auto!important;height:auto!important;padding:20px 18px 22px!important;min-height:120px}
  .cards .card .sub{margin-top:6px!important}
  .cards .card .sub:first-child{margin-top:0!important}
  .free:not(.keep){aspect-ratio:auto!important}
  .free:not(.keep) .deco{display:none}
  .free:not(.keep) .fi{position:static;width:auto!important;margin-top:16px}
  .free:not(.keep) .fi:first-child{margin-top:0}
  .free:not(.keep) .fi.fm{max-width:min(100%,calc(var(--w) * 1px))}
  .free:not(.keep) .ft + .ft{margin-top:10px}
  .heroart{position:static;width:auto!important;max-width:min(78%,calc(var(--w) * 1px));margin:28px auto 0}
  .heroart + *{margin-top:0}
}

/* cover, index and thank-you pages */
html:has(body[data-page=cover]),html:has(body[data-page=end]),body[data-page=cover],body[data-page=end]{background:#ffbf56}
.cover{max-width:1400px;margin:0 auto;padding:clamp(90px,11.4vw,160px) 20px 80px clamp(20px,8.9vw,124px);color:#3d3d3d}
.cover h1{margin:0;font-weight:200;font-size:clamp(48px,8.18vw,114.57px);line-height:.95;text-transform:uppercase}
.cover .tag{margin:clamp(16px,2.3vw,32px) 0 0 .08em;font-size:clamp(18px,2vw,28px);line-height:1.4}
.cover .btn{display:inline-block;margin:clamp(40px,7vw,96px) 0 0 .25em;background:#3d3d3d;color:#fff;text-decoration:none;text-transform:uppercase;
  font-weight:300;font-size:clamp(20px,2.29vw,32px);letter-spacing:.02em;padding:.75em 1.6em}
.cover .btn:hover,.cover .btn:focus-visible{background:#222}
.cover .links{margin:clamp(36px,4.5vw,64px) 0 0 .2em;padding:0;list-style:none;font-size:clamp(20px,2.57vw,36px);font-weight:300;line-height:2.1;text-transform:uppercase}
.cover .links a{color:#3d3d3d;text-decoration:none}
.cover .links a:hover,.cover .links a:focus-visible{color:#6b6b6b}
.contents{max-width:1400px;margin:0 auto;padding:clamp(100px,10vw,140px) 20px 80px clamp(20px,9.84vw,138px)}
.contents .label{margin:0 0 clamp(24px,3vw,40px);font-size:clamp(14px,1.36vw,19.1px);font-weight:500;color:#3d3d3d;text-transform:uppercase}
.contents ol{list-style:none;margin:0;padding:0}
.contents li a{display:block;color:#3d3d3d;text-decoration:none;text-transform:uppercase;font-weight:300;font-size:clamp(22px,3vw,42px);line-height:1.25;padding:.43em 0}
.contents li a:hover,.contents li a:focus-visible{color:#3d3d3d}

/* Background page hero: full-width, tighter portrait on phones; room under the title */
@media (max-width:760px){
  body[data-page=background] main > .band:first-child .fi.fm{margin:38px -20px 0!important;max-width:none!important}
  body[data-page=background] main > .band:first-child .fi.fm .im{aspect-ratio:1/1!important;background-size:140% auto!important;background-position:52% 34%!important}
  body[data-page=background] main > .band:first-child .wrap{padding-bottom:36px}
}

/* How I Work pins: small icons with the title beside them on phones */
@media (max-width:760px){
  .free.pins .fi.fm{float:left;clear:left;width:52px!important;margin:2px 22px 28px 6px!important}
  .free.pins .fi.ft{margin:0 0 0 80px!important}
  .free.pins .fi.fm + .fi.ft{padding-top:0}
  .free.pins .fi.ft + .fi.ft{margin-top:8px!important;margin-bottom:28px!important}
  .free.pins::after{content:"";display:block;clear:both}
}

/* case study hero art: trimmed edge sits against the right edge of the phone */
@media (max-width:760px){
  body:is([data-page=carvana],[data-page=toyota],[data-page=rent],[data-page=comms],[data-page=owners]) .heroart{margin:28px -20px -56px auto;max-width:min(80%,calc(var(--w) * 1px))}
}
@media (max-width:760px){
  body[data-page=owners] .heroart{margin-bottom:-64px;max-width:min(66%,calc(var(--w) * 1px))}
  body[data-page=carvana] .heroart{margin-bottom:-80px}
}
/* hero art sits close under the intro paragraph on phones */
@media (max-width:760px){
  .heroart{margin-top:0!important}
  body[data-page=carvana] .heroart{max-width:min(96%,calc(var(--w) * 1px))}
  body[data-page=rent] .heroart{margin-bottom:-1.1%}
  body[data-page=rent] .hero + .wrap > .sp:only-child{margin-top:0!important}
  .yfa .hero .art{margin-top:12px}
}
@media (max-width:760px){body[data-page=outdoorsy] .heroart{margin-bottom:-56px}}

/* mobile menu */
.navbtn{display:none}
@media (max-width:760px){
  .topnav{flex-wrap:wrap;gap:0;padding:0 6px 0 20px;min-height:48px;overflow:visible}
  .topnav .brand{order:-2;font-size:15px}
  .topnav a:not(.brand){display:none}
  .navbtn{order:-1;display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:48px;padding:0 10px;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .navbtn span{display:block;height:2px;width:22px;background:#3d3d3d;border-radius:2px;transition:transform .2s,opacity .2s}
  .topnav.open{background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12);padding-bottom:12px}
  .topnav.open a:not(.brand){display:block;flex:0 0 100%;padding:13px 0;font-size:17px;font-weight:500;border-top:1px solid #ececec}
  .topnav.open a[aria-current=page]{font-weight:800;text-decoration:none}
  .topnav.open .navbtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .topnav.open .navbtn span:nth-child(2){opacity:0}
  .topnav.open .navbtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){.navbtn span{transition:none}}

/* Carvana "Stay Scrappy" note: sits just under the paragraph instead of over it */
@media (min-width:1000px){.free.scrappy .fi.ft{width:62%!important}.free.scrappy .fi.fm{top:calc(-97 * 100cqw / 1400)!important;left:57.3%!important;width:44%!important}.free.scrappy{--sar:1165/276;aspect-ratio:var(--sar)!important;margin-bottom:0}}
@media (min-width:761px) and (max-width:999px){
  .free.scrappy{aspect-ratio:auto!important}
  .free.scrappy .fi{position:static!important}
  .free.scrappy .fi.fm{width:48%!important;margin:-6% 0 -18% auto}
}
@media (max-width:760px){.free.scrappy .fi.fm{margin-top:-46px!important}}
.txt.serifq p{font-family:var(--serif);line-height:1.55!important}

/* wide screens: heroes cropped at the right edge stay anchored to the window edge */
@media (min-width:1401px){
  body:is([data-page=carvana],[data-page=toyota],[data-page=rent],[data-page=comms],[data-page=owners]) .heroart{left:auto!important;right:calc(700px - 50vw)}
  body[data-page=background] main > .band:first-child .fi.fm{left:auto!important;right:calc(700px - 50vw)}
}
/* Rent.com hero sits exactly on top of the gold band (desktop) */
@media (min-width:761px){body[data-page=rent] .heroart{top:auto!important;bottom:calc(-98.1 * 100cqw / 1400)}}

/* Toyota clicks/taps comparison, built as real tables */
.ctaps{display:flex;margin-left:16.6429%;width:66.43%;justify-content:space-between}
.ct{margin:0;width:41.3%}
.ct figcaption{text-align:center;font-weight:700;font-size:clamp(14px,1.29cqw,18px);margin-bottom:calc(19 * 100cqw / 1400)}
.ct table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:clamp(13px,1.29cqw,18px);color:#fff}
.ct th,.ct td{border:2px solid #fff;text-align:center;vertical-align:middle;height:calc(54 * 100cqw / 1400);line-height:1.15;padding:0 6px}
.ct th{background:rgb(61,61,61);font-weight:400;width:63%}
.ct th.hd{font-weight:700}
.ct td{background:rgb(95,153,146);font-weight:700}
@media (max-width:760px){
  .ctaps{margin-left:0;width:auto;display:block}
  .ct{width:100%}
  .ct + .ct{margin-top:28px}
  .ct figcaption{margin-bottom:10px}
  .ct th,.ct td{height:42px;padding:0 8px}
  .ct th{width:60%}
}
/* Comms hero: nudge up 12px above phone width */
@media (min-width:761px){body[data-page=comms] .heroart{transform:translateY(-12px)}}
/* Background page: 70px between FUN FACT and its heading */
.funfact{margin-top:calc(24 * 100cqw / 1400)!important}
@media (max-width:760px){.funfact{margin-top:29px!important}}
/* 70px between CHALLENGE and its heading */
.blk.chal-h{margin-top:calc(var(--cg) * 1px - 37px)!important}
@media (max-width:760px){.blk.chal-h{margin-top:calc(var(--cm) * 1px - 36px)!important}}
/* Comms journey: connecting line and final dot */
.cj-line,.cj-dot{position:absolute;z-index:0;pointer-events:none}
.cj-line{width:2px;background:rgb(95,153,147)}
.cj-dot{width:calc(32 * 100cqw / 1400);aspect-ratio:1;border-radius:50%;background:rgb(95,153,147)}
@media (max-width:760px){.cj-line,.cj-dot{display:none}}

/* Toyota shopping tools ranking */
.shoptools{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-left:16.6429%;width:66.7%}
.st-col{background:rgb(61,61,61);color:#fff;padding:calc(30 * 100cqw / 1400) calc(30 * 100cqw / 1400) calc(34 * 100cqw / 1400)}
.st-col:nth-child(2){background:rgb(95,153,146)}
.st-col h3{margin:0 0 calc(20 * 100cqw / 1400);font-size:clamp(17px,2.286cqw,32px);font-weight:300;text-transform:uppercase;letter-spacing:.02em}
.st-col ol{list-style:none;margin:0;padding:0}
.st-col li{display:flex;align-items:center;gap:12px;font-size:clamp(14px,1.43cqw,20px);line-height:1.3;padding:calc(9 * 100cqw / 1400) 0;border-top:1px solid rgba(255,255,255,.18)}
.st-col li:first-child{border-top:0}
.st-col li b{flex:0 0 auto;width:1.7em;height:1.7em;border-radius:50%;background:#fff;color:#3d3d3d;display:grid;place-items:center;font-size:.85em;font-weight:800}
@media (max-width:760px){
  .shoptools{grid-template-columns:1fr;margin-left:0;width:auto}
  .st-col{padding:20px 20px 22px}
  .st-col h3{margin-bottom:10px}
  .st-col li{padding:9px 0}
}

/* Background page: 35px under the BACKGROUND label */
@media (min-width:761px){.fi.bgtitle{top:0!important;margin-top:calc(146 * min(100vw,1400px) / 1400 + 35px)}}
@media (max-width:760px){.fi.bgtitle{margin-top:35px!important}}
.st-col:nth-child(2) li b{color:rgb(61,61,61)}
.tag br.m{display:none}
@media (max-width:760px){.tag br.m{display:inline}}
/* tight leading on section titles that wrap on phones */
@media (max-width:760px){
  .txt h2[style*="clamp(23.1px"],.txt p[style*="clamp(23.1px"]{line-height:1.15!important}
  .yfa h2{line-height:1.15}
}
@media (max-width:760px){body[data-page=background] main > .band:first-child .fi.fm + .fi.ft{margin-top:32px!important}}
@media (max-width:760px){.free.scrappy{margin-bottom:-90px}.free.scrappy .fi.fm{position:relative;z-index:3;left:auto!important;top:auto!important}.band:has(.free.scrappy) + .wrap .blk:first-child{margin-top:70px!important}}
/* quote bands on phones: room for the opening mark, attribution on the right */
@media (max-width:760px){
  .band .blk.flow:has(.qo){padding-left:22px}
  .band .blk.flow:has(.qo) + .blk.row{display:flex;justify-content:flex-end}
  .band .blk.flow:has(.qo) + .blk.row .cell{width:auto!important;text-align:left}
  .band .blk.flow:has(.qo) + .blk.row .txt.nw{white-space:nowrap}
}
/* Carvana donut charts: side by side on desktop, stacked on phones */
.donuts-m{display:none}
@media (max-width:760px){
  .donuts-d{display:none!important}
  .donuts-m{display:block}
  .donuts-m .dl{margin:0 0 10px;font-size:16px;color:rgb(159,159,159)}
  .donuts-m img{display:block;height:auto;margin-bottom:28px}
  .donuts-m img{width:46%}
  .dleg{list-style:none;margin:-12px 0 28px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:14px;color:#3d3d3d}
  .dleg li{display:flex;align-items:center;gap:8px}
  .dleg i{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
}
/* Carvana 360 phone screenshot: full width on phones */
@media (max-width:760px){.row .cell.media:has(.im[style*="9d46d8a5"]){max-width:none!important}}
/* cards on phones: tight wrapped lines, height fits content */
@media (max-width:760px){
  .cards .card{min-height:0!important;padding:18px 16px 20px!important}
  .cards .card .txt p{line-height:1.2!important}
}
@media (max-width:760px){.dk{display:none}}
@media (max-width:760px){body[data-page=comms] .heroart{max-width:min(64%,calc(var(--w) * 0.8px))}}
/* Outdoorsy: principles table + photo stack bleed to the right edge on phones */
@media (max-width:760px){
  body[data-page=outdoorsy] .shot:has(img[src*="outdoorsy-fig-03"]){overflow:hidden}
  body[data-page=outdoorsy] img[src*="outdoorsy-fig-03"]{width:115.33%!important;max-width:none}
  body[data-page=outdoorsy] .free:not(.keep) .fi.fm{width:100%!important;max-width:none!important}
}
/* Toyota wireframe: 20% smaller, centered, above phone width */
@media (min-width:761px){
  body[data-page=toyota] .blk.media:has(.im[style*="6e2e35c6"]) .im{width:80%;margin:0 auto}
}
/* Challenge sections: ~60px visible gap between headline and paragraph (non-mobile) */
@media (min-width:761px){
  body:is([data-page=carvana],[data-page=toyota],[data-page=rent],[data-page=owners]) .chal-h + .blk{margin-top:calc(26 * 100cqw / 1400)!important}
  body:is([data-page=comms],[data-page=outdoorsy]) .chal-h + .blk{margin-top:calc(36 * 100cqw / 1400)!important}
}
/* Comms "Results: win, win" images: 20% smaller, centered (non-mobile) */
@media (min-width:761px){
  body[data-page=comms] .blk.media:has(.im:is([style*="e3519518"],[style*="76808959"],[style*="7767e59e"])) .im{width:80%;margin:0 auto}
}
/* Toyota Tacoma user-test still: 20% smaller, centered (non-mobile) */
@media (min-width:761px){body[data-page=toyota] .blk.tacoma .im{width:80%;margin:0 auto}}
@media (max-width:760px){body[data-page=comms] .heroart{transform:translateY(35px)}}
@media (max-width:760px){.cards:has(.serifq){gap:0}}
@media (max-width:760px){body[data-page=carvana] .cell:has(> .im[style*="85da0204"]){display:none}}
br.mb{display:none}
@media (max-width:760px){br.mb{display:inline}}
@media (max-width:760px){body[data-page=comms] .heroart{transform:none;margin-bottom:-91px}}
/* Outdoorsy team photo: crop the white and fill the text column on phones */
@media (max-width:760px){
  body[data-page=outdoorsy] .cell:has(> img[src*="outdoorsy-art-02"]){overflow:hidden;aspect-ratio:1863/1385}
  body[data-page=outdoorsy] img[src*="outdoorsy-art-02"]{width:150.29%!important;max-width:none;margin-left:-25.228%}
}
/* Toyota Owners (Service Tracker): all body images 20% smaller and centered (non-mobile) */
@media (min-width:761px){
  body[data-page=owners] .blk.media{margin-left:auto!important;margin-right:auto!important}
  body[data-page=owners] .blk.media > .im,body[data-page=owners] .blk.media > .shot,body[data-page=owners] .blk.media > video{width:80%;margin-left:auto;margin-right:auto}
}