/* V5.1 hero: the "jobs going cold" scene. Borderless, painted straight onto the wine panel.
   Positions are in 1/1000 of the scene width (container units), set per slot in the hero's inline style block.
   Moves are transforms and opacity only, 300 ms or less, one shared easing. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--ice:#DCE8EF}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-inner>*{min-width:0}
.k-short{display:none}
.hero-calc{margin-top:16px;font-size:17px}
.hero-calc a{color:var(--warm)}

/* Grid order: the scene is last in the DOM (after H1, sub and CTAs) and placed by CSS. */
.hero-kicker,.thanks-line{order:1}.hero h1{order:2}.hero-sub{order:3}.hero-ctas{order:4}.hero-calc{order:5}
.hero-scene{order:6}.hero-pick{order:7}.hero-under{order:8}.hero-promise{order:9}

.hero-scene{position:relative;margin-top:40px;margin-inline:calc(-1 * var(--gutter))}
.hs-tilt{perspective:1200px}
.hs{position:relative;width:100%;aspect-ratio:1000/700;container-type:inline-size;
  transform:rotateX(calc(var(--ry,0) * 1deg)) rotateY(calc(var(--rx,0) * 1deg))}
.hs.is-tilt{transition:none}
.hs-art{position:absolute;inset:0;width:100%;height:auto;overflow:visible;transform:translate(calc(var(--px,0) * 2px),calc(var(--py,0) * 2px))}
.hs-art-m{display:none}
.hs-defs{position:absolute;width:0;height:0;overflow:hidden}
.hs-pipe{fill:none;stroke:#FAFBFC;stroke-opacity:.22;stroke-width:5;stroke-linecap:round}
.hs-money{stroke:var(--apricot);stroke-opacity:.35;stroke-dasharray:14 12}
.hs-lane{fill:#FAFBFC;fill-opacity:.06;stroke:#FAFBFC;stroke-opacity:.14;stroke-width:2}
.hs-tick{stroke:#FAFBFC;stroke-opacity:.14;stroke-width:2;stroke-dasharray:6 8}
.hs-spark{fill:none;stroke:var(--apricot);stroke-width:7;stroke-linecap:round;stroke-dasharray:90 2000;stroke-dashoffset:90;opacity:0}
.hs-spark.go{animation:hs-spark 300ms var(--ease) forwards}
@keyframes hs-spark{0%{stroke-dashoffset:90;opacity:1}90%{opacity:1}100%{stroke-dashoffset:-1000;opacity:0}}
.hs-phone.buzz{animation:hs-buzz 100ms linear 3}
@keyframes hs-buzz{0%,100%{transform:translate(30px,300px)}50%{transform:translate(32px,300px)}}
.hs-art-m .hs-phone.buzz{animation-name:hs-buzz-m}
@keyframes hs-buzz-m{0%,100%{transform:translate(0,310px) scale(.9)}50%{transform:translate(2px,310px) scale(.9)}}
.hs-ute{transition:transform 300ms var(--ease)}
.hs-cash{opacity:1;transition:opacity 200ms var(--ease)}
.hs:not(.is-live) .hs-lock,.hs.cue-notify .hs-lock{fill:var(--warm)}

/* Labels: on screen from frame 0 and they carry the 5-second read. */
.hs-labels{position:absolute;inset:0;pointer-events:none;transform:translate(calc(var(--px,0) * 8px),calc(var(--py,0) * 8px))}
.hl{position:absolute;left:calc(var(--lx) * .1cqw);top:calc(var(--ly) * .1cqw);font:600 clamp(11px,1.5cqw,14px)/1.2 var(--body);
  color:var(--warm);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.hl::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.45em;border-radius:50%;background:currentColor;vertical-align:.08em}
.hl-sub{font-weight:600;color:#FAFBFC;opacity:.72;text-transform:none;letter-spacing:0;font-size:clamp(10px,1.3cqw,13px)}
.hl-sub::before{display:none}
.hl-cold{color:var(--ice)}
.hl-in{--lx:50;--ly:40}.hl-sorted{--lx:262;--ly:200}.hl-cold{--lx:404;--ly:338}.hl-reheat{--lx:770;--ly:318}
.hl-diary{--lx:680;--ly:0}.hl-done{--lx:862;--ly:30}
.hl-replied{--lx:362;--ly:326}.hl-qualified{--lx:522;--ly:326}.hl-booked{--lx:682;--ly:326}
.hl-ans{--lx:300;--ly:150}.hl-mis{--lx:292;--ly:352}

/* Tickets: real buttons, so hover, tap and keyboard all reach their detail. */
.hs-tks{position:absolute;inset:0;pointer-events:none;transform:translate(calc(var(--px,0) * 6px),calc(var(--py,0) * 6px))}
.tk{position:absolute;left:0;top:0;width:15.2cqw;min-height:44px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;text-align:left;
  pointer-events:auto;transform:translate(calc(var(--x) * .1cqw),calc(var(--y) * .1cqw));transition:transform 300ms var(--ease)}
.tk-card{position:relative;display:block;padding:.45em .6em .5em;border-radius:7px;background:var(--paper);font:400 clamp(10px,1.42cqw,14px)/1.25 var(--body);
  box-shadow:0 2px 0 #00000014,0 8px 18px #2A101A40;transition:transform 150ms var(--ease)}
.tk-l1{display:flex;align-items:center;gap:.35em;font-weight:600;white-space:nowrap;overflow:hidden}
.tk-ic{flex:none;width:1.05em;height:1.05em}
.tk-n{overflow:hidden;text-overflow:ellipsis}
.tk-l2{display:flex;align-items:center;gap:.5em;margin-top:.2em}
.tk-v{font-weight:600;font-variant-numeric:tabular-nums}
.tk-st{padding:.1em .45em;border-radius:99px;background:var(--mist);font-weight:600;font-size:.82em;letter-spacing:.02em;white-space:nowrap}
.tk-tags{position:absolute;left:.4em;top:-1.15em;display:flex;gap:.25em}
.tk-tag{padding:.1em .45em;border-radius:99px;background:var(--apricot);color:var(--ink);font-weight:600;font-size:.78em;white-space:nowrap;
  transform:scale(.6);opacity:0;transition:transform 200ms var(--ease),opacity 200ms var(--ease)}
.tk.tags .tk-tag{transform:none;opacity:1}
.tk-was{position:absolute;right:0;top:100%;display:none;gap:.3em;margin-top:.3em;font:600 clamp(9px,1.1cqw,12px)/1.2 var(--body);color:#FAFBFC;white-space:nowrap}
.tk-was span{padding:.05em .4em;border-radius:99px;background:#FAFBFC22}
.hs.is-final .tk-was,html:not(.js) .tk-was{display:flex}
/* Frost and heat. Status words always sit on the ticket, never colour alone. */
.tk.is-cold .tk-card{background:var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M30 4v14M23 11h14M25 6l10 10M35 6L25 16'/%3E%3Cpath d='M6 26v8M2 30h8M3 27l6 6M9 27l-6 6'/%3E%3C/g%3E%3C/svg%3E") right 4px top 3px/2.6em no-repeat;
  box-shadow:inset 0 0 0 2px #fff,0 8px 18px #2A101A40}
.tk.is-cold .tk-st{background:#fff;color:#2F4F63}
.tk.is-reheat .tk-card{background:linear-gradient(90deg,var(--warm),var(--ice))}
.tk.is-reheat .tk-st,.tk.is-warming .tk-st{background:var(--warm)}
.tk.is-warming .tk-card{background:#FBEBD6}
.tk.is-booked .tk-card,.tk.is-done .tk-card{box-shadow:inset 4px 0 0 var(--apricot),0 8px 18px #2A101A40}
.tk.is-booked .tk-st,.tk.is-done .tk-st{background:var(--apricot)}
.tk.is-done .tk-st::before{content:"\2713\00a0"}
/* Frame 0 while JS owns the scene: everything waits in "Coming in". */
.js .hs:not(.is-live):not(.is-final) .tk .tk-card{background:var(--paper);box-shadow:0 2px 0 #00000014,0 8px 18px #2A101A40}
.js .hs:not(.is-live):not(.is-final) .tk-st,.js .hs:not(.is-live):not(.is-final) .tk-tags{visibility:hidden}

/* Extras: SMS bubble, diary lines, day 3 loop, tick, cash, lock-screen note, counters. */
.hs-x{position:absolute;left:calc(var(--lx) * .1cqw);top:calc(var(--ly) * .1cqw)}
.hs-sms,.hs-diary,.hs-loop,.hs-tickmark,.hs-notify,.hc{position:absolute;left:calc(var(--lx) * .1cqw);top:calc(var(--ly) * .1cqw);margin:0}
.hs-sms{max-width:30cqw;padding:.5em .75em;border-radius:12px 12px 12px 3px;background:var(--paper);color:var(--ink);font:400 clamp(10px,1.3cqw,13px)/1.3 var(--body);
  box-shadow:0 8px 18px #2A101A40;opacity:0;transform:translateY(6px) scale(.96);transition:opacity 200ms var(--ease),transform 200ms var(--ease);pointer-events:none}
.hs-sms-out{--lx:430;--ly:378;background:var(--warm)}
.hs-sms-in{--lx:470;--ly:440;border-radius:12px 12px 3px 12px;font-style:normal}
.hs-sms-t{display:none}
.hs-dots{display:inline-flex;gap:3px}.hs-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.35}
.hs.cue-sms-typing .hs-dots i{animation:hs-dot 600ms linear 3}
.hs-dots i:nth-child(2){animation-delay:100ms!important}.hs-dots i:nth-child(3){animation-delay:200ms!important}
@keyframes hs-dot{50%{opacity:1}}
.hs.cue-sms-typing .hs-sms-out,.hs.cue-sms-out .hs-sms-out,.hs.cue-sms-in .hs-sms-in{opacity:1;transform:none}
.hs.cue-sms-out .hs-dots{display:none}.hs.cue-sms-out .hs-sms-t{display:inline}
.hs.cue-sms-off .hs-sms{opacity:0}
.hs-diary{--lx:704;--ly:62;display:grid;gap:.5em;max-width:12cqw;font:600 clamp(9px,1.2cqw,12px)/1.15 var(--body);color:var(--ink)}
.hs-diary span{padding:.2em .35em;border-radius:3px;background:var(--warm)}
.hs-loop{--lx:572;--ly:556;display:flex;align-items:center;gap:.3em;font:600 clamp(10px,1.3cqw,13px)/1 var(--body);color:var(--warm)}
.hs-loop svg{width:2.2em;height:2.2em}
.hs-tickmark{--lx:948;--ly:52;width:4.2cqw;height:4.2cqw;border-radius:50%;background:var(--solid);color:#fff;padding:.7cqw;box-shadow:0 0 0 3px var(--wine)}
.hs-tickmark svg{width:100%;height:100%}
.hs-note{left:0;top:0;display:grid;transform:translate(calc(var(--nx,700) * .1cqw),calc(var(--ny,200) * .1cqw));place-items:center;width:3.2cqw;height:2.2cqw;border-radius:3px;background:var(--warm);color:var(--ink);
  font:800 clamp(10px,1.4cqw,14px)/1 var(--display);opacity:0;transition:transform 220ms var(--ease),opacity 120ms linear}
.hs-notify{--lx:742;--ly:560;width:21cqw;padding:.55em .7em;border-radius:10px;background:#FAFBFCF2;color:var(--ink);font:400 clamp(10px,1.25cqw,13px)/1.3 var(--body);
  box-shadow:0 8px 18px #2A101A40;transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.hs-notify strong{display:block;font-size:.85em;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hc{font:600 clamp(11px,1.4cqw,14px)/1.25 var(--body);color:#FAFBFC;white-space:nowrap}
.hc-n{display:block;font:800 clamp(20px,3.2cqw,32px)/1.05 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hc-cold{--lx:418;--ly:632}.hc-cold .hc-n{color:var(--ice)}
.hc-warm{--lx:612;--ly:632}.hc-warm .hc-n{color:var(--apricot)}
.hc-ex{opacity:.85}
.hc-sub{display:block;margin-top:.2em;font-weight:400;opacity:.85}
/* Hidden under JS until their cue. No JS and reduced motion show the final still. */
.js .hs:not(.is-final) :is(.hs-diary,.hs-loop,.hs-tickmark,.hs-notify,.hc){opacity:0;transition:opacity 200ms var(--ease)}
.js .hs:not(.is-final) .hs-cash{opacity:0}
.js .hs.cue-diary .hs-diary,.js .hs.cue-loop .hs-loop,.js .hs.cue-ute .hs-tickmark,.js .hs.cue-notify .hs-notify,
.js .hs.cue-count-cold .hc-cold,.js .hs.cue-count-warm .hc-warm,.js .hs.cue-cash .hs-cash{opacity:1}
.js .hs:not(.is-final):not(.cue-notify) .hs-notify{transform:translateY(6px)}
.hs.cue-ute .hs-ute,.hs.is-final .hs-ute,html:not(.js) .hs-ute{transform:translate(876px,62px)}

/* Hit areas for the junction, backend and pocket (44 px or more). */
.hn{position:absolute;left:calc(var(--lx) * .1cqw);top:calc(var(--ly) * .1cqw);width:calc(var(--lw) * .1cqw);height:calc(var(--lh) * .1cqw);
  min-width:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer;transition:transform 150ms var(--ease)}
.hn-j{--lx:270;--ly:220;--lw:100;--lh:110}.hn-d{--lx:774;--ly:330;--lw:126;--lh:150}.hn-f{--lx:880;--ly:480;--lw:120;--lh:220}
.tk:focus-visible,.hn:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:8px}
@media (hover:hover) and (pointer:fine){
  .tk:hover .tk-card,.tk.is-hot .tk-card{transform:translateY(-2px)}
  .hn:hover{background:#FAFBFC12}
}

/* Detail chip (hover, tap, focus). */
.hs-tip{position:absolute;z-index:5;left:0;top:0;max-width:300px;padding:10px 12px;border-radius:10px;background:var(--paper);color:var(--ink);
  font:400 14px/1.4 var(--body);box-shadow:0 10px 24px #2A101A55;opacity:0;transition:opacity 150ms var(--ease);pointer-events:none}
.hs-tip.is-on{opacity:1}
.hs-tip[hidden]{display:none}

/* Event chips: all 8 are in the HTML; JS reveals them in step (newest on top). */
.hs-under{display:contents}
.hs-list{margin-top:12px}
.hero-events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:6px;align-items:flex-start}
.hero-events li{padding:5px 12px;border-radius:99px;background:#6A4552;color:#FAFBFC;font:600 14px/1.3 var(--body);
  transition:opacity 260ms var(--ease),transform 260ms var(--ease)}
.js .hs-list:not(.is-final) .hero-events li:not(.is-in){opacity:0;transform:scale(.92) translateY(6px)}
.hero-events li.is-old{background:#5C3945}
.hs-caption{margin-top:10px;font-size:14px;color:#FAFBFC;opacity:.85}
.hs-bar{display:flex;align-items:center;gap:12px}
.hs-cap{display:none}
.hs-ctrl{display:flex;gap:4px}
.hs-btn,.hs-more{min-height:44px;padding:0 10px;border:0;background:none;color:var(--warm);font:600 15px/1 var(--body);text-decoration:underline;
  text-underline-offset:4px;cursor:pointer}
.hs-btn:hover,.hs-more:hover{color:var(--paper)}
.hs-more{display:none}
html:not(.js) .hs-ctrl{display:none}
.hs.is-playing .tk,.hs.is-playing .hs-note{will-change:transform}
.hs.tilt-reset,.hs.tilt-reset :is(.hs-art,.hs-labels,.hs-tks){transition:transform 300ms var(--ease)}

/* Desktop composition stacked under the text (768 to 1179). */
@media (min-width:768px){
  .hero-scene{margin-inline:0 calc(-1 * var(--gutter));padding-bottom:0}
  .hs-under{display:block}
  .hero-scene{container-type:inline-size}
  .hs-bar{margin-top:4px}
}
/* Side by side from 1180: scene on the right 55%, bleeding off the edge. */
@media (min-width:1180px){
  .hero-inner{grid-template-columns:minmax(0,40fr) minmax(0,60fr);column-gap:24px}
  .hero-inner>:not(.hero-scene){grid-column:1}
  .hero-scene{grid-column:2;grid-row:1 / span 12;align-self:center;margin:0 calc(-1 * (var(--gutter) + max(0px,(100vw - var(--max)) / 2))) 0 0;padding-bottom:64px}
  .hero{padding-block:72px 56px}
  .hero h1{max-width:14ch;font-size:clamp(44px,4.3vw,64px)}
  .hero-sub{font-size:19px}
  .hs-list{margin:0}
  .hero-events{position:absolute;left:0;bottom:85px;gap:4px}
  .hero-events li{font-size:13px;padding:3px 10px}
  .js .hero-events li.is-gone{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}
  .js .hs-list.is-open .hero-events{position:static;margin-top:52px}
  .js .hs-list.is-open .hero-events li.is-gone{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;padding:3px 10px}
  html:not(.js) .hero-events{position:static;margin-top:52px}
  .hs-caption{position:absolute;right:24px;top:calc(70cqw + 20px);margin:0}
  .hs-bar{position:absolute;left:0;top:calc(70cqw + 8px)}
  .js .hs-more{display:block;position:absolute;left:150px;top:calc(70cqw + 8px)}
}
@media (min-width:768px) and (max-width:1179px){
  .hs-list{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}
}

/* Phone band, 390 x 844: kicker, H1, band, caption, CTAs, link, sub, chips. */
@media (max-width:767px){
  .k-long{display:none}.k-short{display:inline}
  .hero-scene{display:contents}
  .hs-tilt{order:3;margin:16px calc(-1 * var(--gutter)) 0}
  .hs{aspect-ratio:1000/513}
  .hs-art-d{display:none}.hs-art-m{display:block}
  .hs-bar{order:3;justify-content:space-between;margin-top:6px;min-height:44px}
  .hs-cap{display:block;flex:1;font:600 14px/1.35 var(--body);color:#FAFBFC;transition:opacity 200ms var(--ease)}
  .hs-cap.is-swap{opacity:0}
  .hero-ctas{order:4;margin-top:14px}.hero-calc{order:5}.hero-sub{order:6;margin-top:16px}
  .hs-more{order:7;display:block;justify-self:start;padding:0;margin-top:8px}
  .hs-list{order:7}
  .js .hs-list:not(.is-open){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html:not(.js) .hs-more{display:none}
  .hero-pick{order:8}.hero-under{order:9}.hero-promise{order:10}
  .hero-events li{opacity:1;transform:none}
  .js .hs-list .hero-events li:not(.is-in){opacity:1;transform:none}
  .hero-events{flex-direction:column}
  .hs-labels .hl-sorted,.hs-labels .hl-reheat,.hs-labels .hl-done,.hs-labels .hl-sub,.hs-labels .hl-in{display:none}
  .hl{font-size:11px}
  .hl-cold{--lx:30;--ly:452}.hl-diary{--lx:615;--ly:452}
  .tk{width:20.5cqw}
  .tk-card{font-size:11px;padding:4px 6px}
  .tk-s,.tk-ic,.tk-tags,.tk-was{display:none!important}
  .tk-l2{margin-top:1px;flex-wrap:wrap;row-gap:1px}
  .tk-st{font-size:9px;padding:.1em .35em}
  /* Round 4 (M4): counters start on the 20 px gutter, and "(example)" rides on its figure's line (the label wraps under). */
  .hc{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3em;font-size:11px;white-space:nowrap;max-width:45cqw}
  .hc-n{display:inline;font-size:14px;order:-2}.hc-ex{order:-1}
  .hc-cold{--lx:52;--ly:12}.hc-warm{--lx:52;--ly:66}.hc-sub{display:none}
  .hs-sms,.hs-diary,.hs-loop,.hs-tickmark,.hs-notify{display:none}
  .hs-note{width:7cqw;height:5cqw}
  .hn-j{display:none}.hn-d{--lx:590;--ly:250;--lw:110;--lh:120}.hn-f{--lx:880;--ly:300;--lw:120;--lh:213}
}
@media (max-width:767px) and (max-height:700px){
  .hs{width:80%;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .tk,.tk-card,.tk-tag,.hs-sms,.hs-note,.hs-ute,.hero-events li,.hs-cap,.hs-tip,.hs-notify{transition:none!important}
  .hs-spark,.hs-phone,.hs-dots i{animation:none!important}
  .hs{transform:none!important}
  .hs-ctrl{display:none!important}
}
.hs.is-paused *,.hs.is-paused{animation-play-state:paused!important}

/* Seasonal layer: snow over the whole page but under the sticky bar and pop-up, burst over the page; neither takes a tap. */
.rv-snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
.rv-burst{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:80}