/* r7.css: HOME ONLY. Compile / assemble motion family on Sample 3 look (dark hero + header, tinted light sections).
   All hide states live inside prefers-reduced-motion:no-preference AND html.r7-ready (set by r7.js), so no-JS and reduced-motion pages read fully.
   Motion map: design/loop/budleiser-2026/MOTION-R7.md */
body.home{background:var(--bg)}
body.home main,body.home .ftr{max-width:none;margin:0;border-left:0;border-right:0;background:transparent}
body.home .rv,body.home .js .rv{opacity:1;transform:none}
body.home .js .rv.in{transition:none}

/* ---------- hero ---------- */
.r7-hero{position:relative;background:var(--dk);color:#EEF0FA;min-height:min(820px,calc(100svh - 112px));display:flex;align-items:center;overflow:hidden;isolation:isolate;border-bottom:0}
.r7-hero .plate{position:absolute;inset:0;z-index:-2}
.r7-hero .plate img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:68% 50%}
.r7-hero .plate .base{filter:grayscale(1) brightness(.55) contrast(1.3) sepia(1) hue-rotate(185deg) saturate(2.6)}
.r7-hero .beam{position:absolute;top:0;bottom:0;width:3px;left:0;background:var(--cy);box-shadow:0 0 22px 4px rgba(127,212,255,.7);z-index:-1;opacity:0;pointer-events:none}
.r7-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#12152A 0%,rgba(18,21,42,.93) 30%,rgba(18,21,42,.5) 52%,rgba(18,21,42,0) 78%)}
.r7-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:-1;background:linear-gradient(0deg,#12152A,rgba(18,21,42,0))}
.r7-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.r7-hero-in{padding-top:48px;padding-bottom:110px;position:relative}
.r7-hero-txt{max-width:660px}
.r7-hero .eyebrow{color:var(--cy);display:inline-block;margin:0 0 22px;font-size:12px;letter-spacing:.14em;font-weight:500}
.r7-hero .eyebrow::after{content:"";display:inline-block;width:9px;height:15px;background:var(--cy);margin-left:8px;vertical-align:-3px}
.r7-hero h1{font-size:clamp(2.7rem,5.6vw,4.9rem);font-weight:600;line-height:1.04;letter-spacing:-.03em;color:#EEF0FA;margin:0}
.r7-hero h1 .w{display:inline-block;white-space:nowrap}
.r7-hero h1 .ch{display:inline-block;position:relative}
.r7-hero .hero-body{color:#DDE1FA;max-width:52ch}
.r7-hero .sub{margin:26px 0 0;font-size:1.2rem}
.r7-hero .sub2{color:#B9BEE0;font-size:1.02rem;margin:12px 0 0}
.r7-hero .cta{margin-top:34px}
.r7-hero .btn{border-radius:2px;font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;position:relative;overflow:hidden}
.r7-hero .btn-primary{background:var(--steel);border-color:var(--steel)}
.r7-hero .btn-ghost{background:transparent;color:#EEF0FA;border-color:#6d77b8}
.r7-hero .btn-ghost:hover{background:#EEF0FA;color:var(--dk)}
.meter{position:absolute;bottom:30px;left:max(40px,calc((100vw - 1200px)/2 + 40px));display:flex;align-items:center;gap:14px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#B9BEE0}
.meter-bar{width:220px;height:10px;display:flex;gap:2px}.meter-bar i{flex:1;background:#2a3060}.meter-bar i.on{background:var(--cy)}
.meter b{color:var(--cy);font-weight:500;min-width:4ch;font-variant-numeric:tabular-nums}
.hero-ctl{position:absolute;right:max(40px,calc((100vw - 1200px)/2 + 40px));bottom:24px}
#pause-motion{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid #6d77b8;border-radius:8px;font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(18,21,42,.75);color:#EEF0FA}
#pause-motion:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.r7-hero :focus-visible{outline-color:var(--cy)}

/* ---------- sections: rail + body, alternating tints ---------- */
body.home .sec{padding:80px var(--gut);border-top:0;background:var(--bg)}
body.home .sec[data-fx=built],body.home .sec[data-fx=method],body.home .sec[data-fx=about]{background:var(--bg-alt);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
body.home .sec-in{max-width:1200px;padding:0 var(--gut);display:grid;grid-template-columns:170px minmax(0,1fr);column-gap:44px;row-gap:0}
body.home .sec-head{display:contents}
body.home .sec-label{grid-column:1;grid-row:1/span 14;align-self:start;position:sticky;top:140px;margin:0;padding:0;border-top:0;font-size:12px;line-height:1.4;color:var(--muted)}
body.home .rl-n{display:block;font:300 4.2rem/1 var(--f-head);letter-spacing:-.04em;color:var(--steel);text-transform:none}
body.home .rl-s{display:none}
body.home .rl-t{display:block;margin-top:12px;font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
body.home .sec-label::after{content:"";display:block;margin-top:18px;width:100%;max-width:150px;height:8px;background:repeating-linear-gradient(90deg,var(--steel) 0 10px,transparent 10px 13px)}
body.home .sec-title{grid-column:2;grid-row:1;margin-bottom:36px}
body.home .sec-title h2{max-width:22ch}
body.home .sec-in>:not(.sec-head){grid-column:2;min-width:0}
body.home .sec::before,body.home .sec::after{display:none}
body.home .metrics{background:var(--dk);border:0}
body.home .metrics-in{padding:56px var(--gut) 40px}
body.home .m-foot,body.home .act-compact figcaption,body.home .act-axis .mo{font-size:12px}

/* videos as windows */
body.home .vslide .art{border:1px solid #2a3060;background:var(--dk)}

/* categories: box builder + accordion */
.bb{display:none}
.js .bb{display:block;background:var(--dk);border:1px solid #2a3060;border-radius:4px;padding:14px 16px 10px;margin:0 0 28px}
.bb-hud{display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#9aa1d4;margin-bottom:8px}
.bb-hud b{color:var(--amber);font-weight:500;font-variant-numeric:tabular-nums}
.bb svg{display:block;width:100%;height:auto}
.bb .slot{fill:rgba(127,212,255,.06);stroke:#7FD4FF;stroke-width:1.2;stroke-dasharray:5 4}
.bb .slot.on{stroke:none}
.bb .rail{fill:none;stroke:#4b57a3;stroke-width:2}
.bb .pc{transform-box:fill-box;transform-origin:center}
.bb .tl{font:500 12px "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;fill:#fff}
.bb .tn{font:500 11px "IBM Plex Mono",monospace;fill:rgba(255,255,255,.75)}
.bb .pc.hl{stroke:#fff;stroke-width:3}
body.home .cats{border-radius:2px;background:var(--surface);border-color:var(--line2)}
body.home .cat summary:hover,body.home .cat[open] summary{background:rgba(59,76,202,.08)}
body.home .cat[open] .cat-n{color:var(--steel);font-weight:500}

/* live cards */
body.home .card,body.home .pfolio,body.home .eng,body.home .form-card,body.home .pick-panel{border-radius:2px}
body.home .card{background:var(--surface);border-color:var(--line2);border-top:3px solid var(--steel)}
body.home .card .card-media{position:relative}

/* method */
body.home .loop{background:transparent;border:0}
body.home .loop li{background:var(--surface);border:1px solid var(--line2);margin-left:-1px}
body.home .loop li::after{background:var(--surface)}
body.home .loop-return{margin-bottom:34px}
body.home .loop-return{height:44px}
body.home .loop-return span{color:#2E3354;font-size:11px;transform:none;padding-bottom:10px}
body.home .loop .d{font-size:.9rem;color:#3a4062}
body.home .loop-return::before,body.home .loop-return span{background:var(--bg-alt)}

/* together */
body.home .eng{background:var(--surface);border-top:3px solid var(--steel)}

/* about / contact */
body.home .headshot{border-radius:0;background:var(--surface)}
body.home .form-card{background:var(--surface)}

/* footer (home) */
body.home .ftr{background:var(--dk);color:#EEF0FA;border-top:0;position:relative}
body.home .ftr-in{max-width:1200px;margin:0 auto}
body.home .ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--cy) 0 10px,transparent 10px 13px);opacity:.9}
body.home .ftr a,body.home .ftr-sub a{color:#EEF0FA}
body.home .ftr a:hover{color:var(--cy)}
body.home .ftr-main{border-bottom-color:#2a3060}
body.home .ftr-sub,body.home .ftr-sub .mono{color:#9aa1d4}
body.home .ftr-sub a{color:#C9CEF5}

@media (max-width:980px){
  body.home .sec-in{grid-template-columns:minmax(0,1fr);column-gap:0}
  body.home .sec-label{grid-column:1;grid-row:auto;position:static;display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
  body.home .rl-n{font-size:2.6rem}
  body.home .rl-t{margin:0}
  body.home .sec-label::after{display:none}
  body.home .sec-title{grid-column:1;grid-row:auto}
  body.home .sec-in>:not(.sec-head){grid-column:1}
  body.home .sec{padding:64px 20px}
  body.home .sec-in{padding:0}
  .r7-wrap{padding:0 20px}
  .meter,.hero-ctl{left:20px;right:auto}
  .meter{bottom:64px}.hero-ctl{bottom:20px}.meter-bar{width:120px}
  .r7-hero::before{background:linear-gradient(180deg,rgba(18,21,42,.9),rgba(18,21,42,.82))}
  .r7-hero-in{padding-bottom:130px}
}

/* ---------- MOTION (compile / assemble family) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* hero: letters compile with a block cursor, never clipped */
  .r7-hero h1 .ch{animation:chIn .4s linear backwards;animation-delay:calc(.3s + var(--c)*.04s)}
  .r7-hero h1 .ch::after{content:"";position:absolute;left:0;top:12%;bottom:6%;width:.52em;background:var(--cy);opacity:0;animation:chCur .09s steps(1) forwards;animation-delay:calc(.3s + var(--c)*.04s);pointer-events:none}
  @keyframes chIn{0%{opacity:0}1%{opacity:1;color:var(--cy)}100%{opacity:1;color:#EEF0FA}}
  @keyframes chCur{0%{opacity:1}100%{opacity:0}}
  .r7-hero .eyebrow::after{animation:blk 1s steps(2) infinite}
  @keyframes blk{50%{opacity:.2}}
  .r7-hero .sub{animation:stepIn .8s steps(6) 1.9s backwards}
  .r7-hero .sub2{animation:stepIn .8s steps(6) 2.1s backwards}
  .r7-hero .cta{animation:stepIn .8s steps(6) 2.3s backwards}
  @keyframes stepIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  .r7-hero .btn::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 12px,transparent 12px 24px);clip-path:inset(0 100% 0 0);pointer-events:none}
  .r7-hero .btn:hover::after{animation:fxFill .6s steps(8) forwards}

  /* section rail bar fills when the section is seen */
  html.r7-ready body.home .sec-label::after{clip-path:inset(0 100% 0 0)}
  html.r7-ready body.home .sec-in.in .sec-label::after{clip-path:inset(0);transition:clip-path 1.2s steps(12) .2s}

  /* generic hide state, per variant */
  html.r7-ready [data-r]:not(.on){opacity:0}
  /* titles: seven different entrances */
  html.r7-ready [data-fx=videos] [data-r=t]:not(.on){transform:translateX(-48px)}
  html.r7-ready [data-fx=videos] [data-r=t].on{transition:opacity .4s steps(4),transform .6s steps(6)}
  html.r7-ready [data-fx=built] [data-r=t]:not(.on){transform:translateY(-34px)}
  html.r7-ready [data-fx=built] [data-r=t].on{transition:opacity .3s ease,transform .8s cubic-bezier(.3,1.7,.5,1)}
  html.r7-ready [data-fx=live] [data-r=t].on{animation:flick .5s steps(1) both}
  @keyframes flick{0%{opacity:0}15%{opacity:1}30%{opacity:.1}45%{opacity:1}60%{opacity:.35}75%,100%{opacity:1}}
  html.r7-ready [data-fx=method] [data-r=t]:not(.on){opacity:1;transform:translateY(-14px)}
  html.r7-ready [data-fx=method] [data-r=t].on{transition:transform .5s steps(5)}
  html.r7-ready [data-fx=together] [data-r=t]:not(.on){opacity:1;clip-path:inset(100% 0 0 0);transform:translateY(22px)}
  html.r7-ready [data-fx=together] [data-r=t].on{clip-path:inset(-6px -6px -6px -6px);transform:none;transition:clip-path .9s steps(9),transform .9s steps(9)}
  html.r7-ready [data-fx=about] [data-r=t]:not(.on){transform:scale(.94);transform-origin:0 50%}
  html.r7-ready [data-fx=about] [data-r=t].on{transition:opacity .7s steps(5),transform .7s steps(5)}
  html.r7-ready [data-fx=contact] [data-r=t]:not(.on){opacity:1;transform:translateY(16px)}
  html.r7-ready [data-fx=contact] [data-r=t].on{opacity:1;transform:none;transition:transform .4s steps(4),opacity .3s steps(3)}

  /* 01 videos: window opens from a centre line */
  html.r7-ready [data-fx=videos] [data-r=win]:not(.on){opacity:1;clip-path:inset(50% 0 50% 0)}
  html.r7-ready [data-fx=videos] [data-r=win].on{clip-path:inset(0);transition:clip-path .8s steps(8);transition-delay:calc(var(--k,0)*.25s)}

  /* metrics: bars build up in steps, left to right */
  html.r7-ready [data-fx=metrics] .d i{transform:scaleY(0);transform-origin:50% 100%}
  html.r7-ready [data-fx=metrics] [data-r=bars].on .d i{transform:none;transition:transform .5s steps(5);transition-delay:calc(var(--k,0)*16ms)}
  html.r7-ready [data-fx=metrics] [data-r=bars]:not(.on){opacity:1}

  /* 02 built: category rows are blocks that slide in and snap */
  html.r7-ready [data-fx=built] [data-r=row]:not(.on){transform:translateX(-70px)}
  html.r7-ready [data-fx=built] [data-r=row].on{transition:opacity .35s ease,transform .75s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--k,0)*.09s)}
  html.r7-ready [data-fx=built] .bb[data-r]:not(.on){transform:translateY(16px)}
  html.r7-ready [data-fx=built] .bb[data-r].on{transition:opacity .6s ease,transform .8s var(--ease)}

  /* 03 live: blueprint overlay scans away to reveal the render */
  html.r7-ready [data-fx=live] [data-r=card]:not(.on){opacity:1}
  html.r7-ready [data-fx=live] [data-r=card] .card-media::before,html.r7-ready [data-fx=live] [data-r=card].pfolio::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
    background:repeating-linear-gradient(0deg,rgba(59,76,202,.4) 0 1px,transparent 1px 18px),repeating-linear-gradient(90deg,rgba(59,76,202,.4) 0 1px,transparent 1px 18px),#CFD6F2;clip-path:inset(0 0 0 0)}
  html.r7-ready [data-fx=live] [data-r=card].on .card-media::before,html.r7-ready [data-fx=live] [data-r=card].pfolio.on::before{clip-path:inset(100% 0 0 0);transition:clip-path .6s steps(8);transition-delay:calc(var(--k,0)*.1s + .05s)}
  html.r7-ready [data-fx=live] [data-r=card].pfolio{position:relative;overflow:hidden}

  /* 04 method: steps power on one by one, like a boot sequence */
  html.r7-ready [data-fx=method] [data-r=step]:not(.on){opacity:1;box-shadow:inset 0 3px 0 var(--cy)}
  html.r7-ready [data-fx=method] [data-r=step].on{animation:boot .7s steps(1) both;animation-delay:calc(var(--k,0)*.22s)}
  @keyframes boot{0%{box-shadow:inset 0 3px 0 var(--cy);background:rgba(59,76,202,.18)}25%{box-shadow:inset 0 3px 0 transparent;background:transparent}50%{box-shadow:inset 0 3px 0 var(--cy);background:rgba(59,76,202,.18)}100%{box-shadow:inset 0 0 0 transparent;background:transparent}}
  html.r7-ready [data-fx=method] [data-r=ret]:not(.on){opacity:1;clip-path:inset(0 100% 0 0)}
  html.r7-ready [data-fx=method] [data-r=ret].on{clip-path:inset(-8px 0 0 0);transition:clip-path 1.2s steps(14) 1.2s}

  /* 05 together: cards are stamped onto the page */
  html.r7-ready [data-fx=together] [data-r=stamp]:not(.on){opacity:1;transform:scale(1.06)}
  html.r7-ready [data-fx=together] [data-r=stamp].on{animation:stamp .7s ease-out both;animation-delay:calc(var(--k,0)*.2s)}
  @keyframes stamp{0%{transform:scale(1.08);box-shadow:8px 8px 0 var(--steel)}55%{transform:scale(.98);box-shadow:6px 6px 0 var(--steel)}100%{transform:none;box-shadow:0 0 0 transparent}}

  /* 06 about: photo prints in four chunky bands, text slides from the right */
  html.r7-ready [data-fx=about] [data-r=photo]:not(.on){opacity:1;clip-path:inset(0 0 100% 0)}
  html.r7-ready [data-fx=about] [data-r=photo].on{clip-path:inset(0);transition:clip-path 1.1s steps(4)}
  html.r7-ready [data-fx=about] [data-r=line]:not(.on){transform:translateX(46px)}
  html.r7-ready [data-fx=about] [data-r=line].on{transition:opacity .3s steps(3),transform .5s steps(5);transition-delay:calc(var(--k,0)*.12s + .15s)}

  /* 07 contact: fields wake up one by one with a cyan edge flash */
  html.r7-ready [data-fx=contact] [data-r=fld]:not(.on){opacity:1;transform:translateY(12px)}
  html.r7-ready [data-fx=contact] [data-r=fld].on{animation:wake .8s steps(5) both;animation-delay:calc(var(--k,0)*.12s)}
  @keyframes wake{0%{box-shadow:inset 3px 0 0 var(--cy);transform:translateY(12px)}40%{box-shadow:inset 3px 0 0 var(--cy);transform:translateY(6px)}100%{box-shadow:inset 0 0 0 transparent;transform:none}}

  /* footer: segmented rule draws across, content steps in */
  html.r7-ready body.home .ftr::before{clip-path:inset(0 100% 0 0)}
  html.r7-ready body.home .ftr.on::before{clip-path:inset(0);transition:clip-path 1.4s steps(28)}
  html.r7-ready body.home .ftr [data-r=ft]:not(.on){opacity:1;transform:translateY(10px)}
  html.r7-ready body.home .ftr [data-r=ft].on{transition:transform .5s steps(5);transition-delay:calc(var(--k,0)*.1s + .2s)}

  /* accordion open: panel steps open */
  body.home .cat .cat-body{animation:none}
  body.home .cat[open] .cat-body{animation:catOpen .5s steps(6) both}
  @keyframes catOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  body.home .cat summary{transition:background .2s}
  body.home .card,body.home .eng{transition:transform .25s steps(3),box-shadow .25s}
  body.home .card:hover,body.home .eng:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--steel)}
}
@media (prefers-reduced-motion:reduce){
  .r7-hero .eyebrow::after,.r7-hero h1 .ch,.r7-hero h1 .ch::after{animation:none}
  .r7-hero h1 .ch::after{display:none}
  #pause-motion{display:none}
  .r7-hero .btn::after{display:none}
}

body.home .act-head{color:#CFE9FA;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
body.home .metrics-in{padding-top:44px}
body.home .eng{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
body.home .photo,body.home [data-r=photo]{background:#9FA7D3}
body.home .ftr-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,max-content));gap:6px 28px}
@media (max-width:980px){
  .r7-hero .btn{padding-left:18px;padding-right:18px;white-space:normal}
  .r7-hero .sub,.r7-hero .sub2{background:rgba(18,21,42,.72);padding:8px 10px}
  body.home .ftr-nav{grid-template-columns:1fr 1fr}
}

body.home .ftr-main{flex-direction:column;align-items:flex-start;justify-content:flex-start}
body.home .ftr-nav{display:flex;flex-wrap:wrap;gap:6px 28px}
body.home .sec[data-fx=method]{padding-bottom:48px}
body.home .loop-return{margin-bottom:12px}
@media (max-width:980px){body.home .ftr-nav{display:grid;grid-template-columns:1fr 1fr}
  .r7-hero .beam{opacity:.55!important}}

body.home .ftr-nav a{color:#F4F5FF}
body.home .ftr-sub,body.home .ftr-sub .mono{color:#C3C8EE}
@media (max-width:700px){
  body.home .grid-feat{grid-auto-columns:88%}
}

html.r7-ready [data-fx=together] [data-r=t]:not(.on),html.r7-ready [data-fx=videos] [data-r=t]:not(.on){opacity:1}
body.home .sec[data-fx=method] .case{margin-top:20px}
@media (max-width:980px){
  .r7-hero .beam{display:none!important}
}