.hw a{ color:inherit; }
.hw a:focus-visible{ outline:2px solid var(--graphite); outline-offset:3px; }
.hw .intro{ min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:4vw; padding:100px clamp(20px,5vw,72px) 60px; }
.hw .intro h1{ margin:0; font-family:var(--display); font-weight:900; font-size:clamp(60px,9vw,150px); line-height:.86; text-transform:uppercase; }
.hw .intro h1 span{ display:block; color:var(--soft); }
.hw .intro p{ margin:26px 0 0; max-width:30em; font-size:19px; line-height:1.6; color:var(--lead); }
.hw .pick{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end; }
.hw .pick label{ display:flex; flex-direction:column; gap:6px; font-family:var(--hand); font-size:22px; color:var(--lead); }
.hw .pick select{ min-width:230px; max-width:100%; height:48px; padding:0 12px; font:500 16px var(--body); color:var(--graphite); background:#FBFAF6; border:1.5px solid var(--graphite); border-radius:0; }
.hw .pick .hint{ flex-basis:100%; font-family:var(--hand); font-size:22px; color:var(--soft); margin:0; }
.hw .intro .note{ font-family:var(--hand); font-size:26px; color:var(--lead); margin-top:28px; }
.hw .intro img{ width:100%; max-height:74svh; object-fit:contain; }
.hw .story{ position:relative; }
.hw .stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:flex-end; padding:70px clamp(20px,6vw,100px) 20px 0; }
.hw .frame{ position:relative; width:min(48vw, 78svh, 700px); aspect-ratio:0.97; }
.hw .cam{ position:absolute; inset:0; transition:transform 1s cubic-bezier(.45,0,.2,1); transform-origin:50% 50%; }
.hw .layer{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none; }
.hw .layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.hw .dbox{ position:absolute; left:0; width:100%; top:50%; transform:translateY(-50%); }
.hw .dbox img.base, .hw .stack img.base{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.hw .layer .ov, .hw .stack .ov{ position:absolute; inset:auto; right:auto; bottom:auto; max-width:none; object-fit:fill; }
.hw .stack{ position:relative; }
.hw .vign img{ -webkit-mask-image:radial-gradient(ellipse 70% 66% at 50% 50%, #000 58%, transparent 100%); mask-image:radial-gradient(ellipse 70% 66% at 50% 50%, #000 58%, transparent 100%); }
.hw .rev{ clip-path:inset(0 0 calc(100% - var(--r, 0%)) 0); }
.hw .sweep{ position:absolute; left:8%; right:8%; top:var(--r,0%); height:0; opacity:0; transition:opacity .2s; }
.hw .sweep::before{ content:""; position:absolute; left:0; right:0; top:-3px; height:6px; border-radius:3px; background:var(--graphite); box-shadow:0 1px 0 rgba(0,0,0,.2); }
.hw .sweep::after{ content:""; position:absolute; left:28%; right:28%; top:-26px; height:22px; border:2px solid var(--graphite); border-radius:6px; background:repeating-linear-gradient(90deg, transparent 0 5px, rgba(46,45,42,.18) 5px 6px); }
.hw .sweep.on{ opacity:1; }
.hw .stage[data-step="0"] .L-front, .hw .stage[data-step="1"] .L-front{ opacity:1; }
.hw .stage[data-step="1"] .L-front{ opacity:.28; }
.hw .stage[data-step="2"] .L-press{ opacity:1; }
.hw .stage[data-step="3"] .L-front, .hw .stage[data-step="3"] .L-frontp{ opacity:1; }
.hw .stage[data-step="4"] .L-cure{ opacity:1; }
.hw .stage[data-step="5"] .L-box{ opacity:1; }
.hw .ticket{ position:absolute; left:50%; top:50%; width:min(80%,340px); transform:translate(-50%,-40%) rotate(-2.5deg); background:#FBFAF6; border:1.5px solid var(--graphite); padding:20px 22px 18px; box-shadow:4px 6px 0 rgba(46,45,42,.12); opacity:0; transition:opacity .5s, transform .7s cubic-bezier(.2,.8,.2,1); font-family:var(--hand); font-size:24px; line-height:1.25; }
.hw .stage[data-step="1"] .ticket{ opacity:1; transform:translate(-50%,-50%) rotate(-2.5deg); }
.hw .ticket h3{ margin:0 0 8px; font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:.04em; text-transform:uppercase; border-bottom:1.5px solid var(--graphite); padding-bottom:6px; }
.hw .ticket ul{ list-style:none; margin:0; padding:0; }
.hw .ticket li::before{ content:"– "; color:var(--soft); }
.hw .ticket .ok{ display:inline-block; margin-top:10px; border:2px solid var(--red); color:var(--red); padding:0 10px; transform:rotate(-5deg); font-weight:700; }
.hw .sk{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hw .sk .ln{ fill:none; stroke:var(--graphite); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hw .sk .lt{ fill:none; stroke:var(--lead); stroke-width:1.2; stroke-linecap:round; }
.hw .rider{ position:absolute; width:34%; bottom:34%; left:var(--x,0%); transform:translateX(-50%) perspective(600px) rotateX(52deg); transform-origin:50% 100%; }
.hw .rider .stack{ width:100%; aspect-ratio:1391/1341; }
.hw .glow{ position:absolute; left:27%; right:27%; top:29%; height:36%; background:radial-gradient(closest-side, rgba(168,50,42,.22), transparent); opacity:var(--hot,0); transition:opacity .3s; }
.hw .layer .dropper{ position:absolute; inset:auto; aspect-ratio:1040/1154; left:50%; width:44%; top:14%; transform:translate(-50%,-38%) scale(.9); opacity:0; transition:transform .9s cubic-bezier(.55,0,.3,1) .6s, opacity .3s; }
.hw .stage[data-step="5"] .layer .dropper{ opacity:1; transform:translate(-50%,50%) scale(.9); }
.hw .flap{ transform-box:fill-box; transform-origin:50% 100%; transition:transform .55s cubic-bezier(.5,0,.3,1) 2s; }
.hw .stage[data-step="5"] .flap{ transform:scaleY(-1); }
.hw .liner{ transition:transform .45s ease 1.55s, opacity .45s ease 1.55s; }
.hw .stage[data-step="5"] .liner{ transform:translate(40px,-34px) rotate(-8deg); opacity:0; }
.hw .tag{ opacity:0; transition:opacity .4s ease 2.6s; }
.hw .stage[data-step="5"] .tag{ opacity:1; }
.hw .note{ position:absolute; font-family:var(--hand); font-size:clamp(20px,2vw,26px); color:var(--lead); line-height:1.1; white-space:nowrap; }
.hw .frame .note{ opacity:0; transition:opacity .5s .3s; }
.hw .stage[data-step="4"] .n6{ opacity:1; }
.hw .counter{ position:absolute; right:clamp(20px,6vw,100px); top:calc(84px + env(safe-area-inset-top,0px)); font-family:var(--hand); font-size:24px; color:var(--lead); }
.hw .steps{ position:relative; z-index:5; margin-top:-100svh; width:min(42vw,520px); padding-left:clamp(20px,6vw,96px); }
.hw .step{ min-height:100svh; display:flex; align-items:flex-start; }
.hw .step.long{ min-height:210svh; }
.hw .card{ position:sticky; top:32svh; background:#FBFAF6; border:1px solid rgba(46,45,42,.25); padding:26px 28px; box-shadow:3px 5px 0 rgba(46,45,42,.08); opacity:.35; transition:opacity .4s; }
.hw .step.on .card{ opacity:1; }
.hw .num{ font-family:var(--hand); font-size:30px; color:var(--red); }
.hw .card h2{ margin:2px 0 10px; font-family:var(--display); font-weight:800; font-size:clamp(34px,3.4vw,50px); line-height:.95; text-transform:uppercase; }
.hw .card p{ margin:0; font-size:17.5px; line-height:1.65; color:var(--lead); }
.hw .outro{ min-height:90svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4vw; align-items:center; padding:90px clamp(20px,5vw,72px); border-top:1px solid rgba(46,45,42,.2); background:var(--paper2); }
.hw .outro h2{ margin:0; font-family:var(--display); font-weight:900; font-size:clamp(54px,8vw,120px); line-height:.88; text-transform:uppercase; }
.hw .outro p{ margin:22px 0 0; max-width:30em; font-size:18px; line-height:1.6; color:var(--lead); }
.hw .outro .price{ margin-top:26px; font-family:var(--hand); font-size:30px; }
.hw .outro .stack{ width:min(100%, calc(76svh * 1391 / 1341)); aspect-ratio:1391/1341; margin-inline:auto; }
.hw .actions{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; }
.hw .btn{ min-height:54px; padding:0 28px; display:inline-flex; align-items:center; font-weight:600; font-size:15px; letter-spacing:.05em; text-decoration:none; border:1.5px solid var(--graphite); }
.hw .btn.primary{ background:var(--graphite); color:#fff; }
.hw .btn.primary:hover{ background:#000; }
.hw .btn.ghost:hover{ background:rgba(46,45,42,.06); }
@media (max-width:860px){
  .hw .intro, .hw .outro{ grid-template-columns:minmax(0,1fr); }
  .hw .stage{ justify-content:center; align-items:flex-start; padding:76px 0 0; }
  .hw .frame{ width:min(90vw, 52svh); }
  .hw .counter{ right:16px; top:calc(70px + env(safe-area-inset-top,0px)); font-size:20px; }
  .hw .steps{ width:auto; padding:0 14px; }
  .hw .step{ min-height:90svh; align-items:flex-end; padding-bottom:14px; }
  .hw .step.long{ min-height:180svh; }
  .hw .card{ top:auto; bottom:calc(14px + env(safe-area-inset-bottom,0px)); padding:18px 20px; }
  .hw .card h2{ font-size:32px; }
  .hw .card p{ font-size:16px; }
  .hw .frame .note{ font-size:18px; }
}
.hw{ --paper:#F5F4F0; --paper2:#DCCFA9; --graphite:#13243C; --lead:#4B4A63; --soft:#7A7A93; --red:#C23B2B; --display:"Anton","Oswald",Impact,sans-serif; --hand:"Yellowtail",cursive; --label:"Oswald","Arial Narrow",sans-serif; --body:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif; --hh:74px; position:relative; color:#F2E6C6; font-family:var(--body);
  background:radial-gradient(1.4px 1.4px at 9% 8%,#F2E6C6 98%,transparent),radial-gradient(1.2px 1.2px at 27% 21%,#F2E6C6 98%,transparent),radial-gradient(1.6px 1.6px at 46% 5%,#F2E6C6 98%,transparent),radial-gradient(1.2px 1.2px at 71% 17%,#F2E6C6 98%,transparent),radial-gradient(1.4px 1.4px at 90% 9%,#F2E6C6 98%,transparent),radial-gradient(1.2px 1.2px at 17% 44%,#F2E6C6 98%,transparent),radial-gradient(1.4px 1.4px at 58% 38%,#F2E6C6 98%,transparent),radial-gradient(1.2px 1.2px at 83% 52%,#F2E6C6 98%,transparent) 0 0/100% 1100px repeat-y,linear-gradient(to bottom,#171F3E 0%,#2A2547 45%,#4E3558 100%); }
@media (min-width:900px){ .hw{ --hh:112px; } }
/* the page header is the shared Searchlights header, in the page flow, so the story starts below it */
.hw .intro{ position:relative; overflow:hidden; padding-top:40px; min-height:calc(100svh - var(--hh)); } .hw .intro>*{ position:relative; z-index:2; }
.hw .intro::before,.hw .intro::after{ content:""; position:absolute; bottom:-40px; width:300px; height:140%; background:linear-gradient(to top,rgba(255,240,190,.5),rgba(255,240,190,0)); clip-path:polygon(40% 100%,60% 100%,100% 0,0 0); transform-origin:50% 100%; mix-blend-mode:screen; pointer-events:none; z-index:1; } .hw .intro::before{ left:44%; transform:rotate(-15deg); } .hw .intro::after{ left:68%; transform:rotate(13deg); }
.hw .intro h1{ font-weight:400; font-size:clamp(56px,8.4vw,128px); line-height:.92; letter-spacing:.02em; text-transform:uppercase; color:#FBEFC8; text-shadow:5px 5px 0 #B0301F,-2px -2px 0 #13243C,2px -2px 0 #13243C,-2px 2px 0 #13243C; }
.hw .intro h1 span{ display:block; margin-top:8px; font-family:var(--hand); font-size:.42em; line-height:1.1; text-transform:none; letter-spacing:0; color:#F6D77C; text-shadow:2px 2px 0 #13243C; }
.hw .intro p{ color:#F2E6C6; } .hw .intro .note{ color:#F6D77C; }
.hw .pick label{ font-family:var(--label); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#F6D77C; } .hw .pick select{ background:#F2E6C6; color:#13243C; border:3px solid #13243C; box-shadow:4px 4px 0 #0B1020; } .hw .pick .hint{ color:#F6D77C; font-size:24px; }
.hw .plate{ background:#F5F4F0; border:5px solid #EADFBF; box-shadow:10px 10px 0 #C23B2B; padding:10px; transform:rotate(1.5deg); } .hw .plate img{ display:block; width:100%; max-height:70svh; object-fit:contain; }
.hw .stage{ top:var(--hh); height:calc(100svh - var(--hh)); padding-top:24px; padding-bottom:28px; }
.hw .frame{ background:#F5F4F0; border:5px solid #EADFBF; box-shadow:10px 10px 0 #C23B2B; overflow:hidden; }
.hw .steps{ margin-top:calc(var(--hh) - 100svh); }
.hw .counter{ top:calc(var(--hh) + 14px); font-size:28px; color:#F6D77C; text-shadow:2px 2px 0 #13243C; }
.hw .card{ background:#F2E6C6; color:#13243C; border:4px solid #13243C; box-shadow:6px 6px 0 #0B1020; } .hw .card .num{ font-family:var(--display); font-size:34px; color:#C23B2B; } .hw .card h2{ font-weight:400; letter-spacing:.02em; color:#13243C; } .hw .card p{ color:#4B4A63; }
.hw .ticket{ background:#F2E6C6; border:3px solid #13243C; box-shadow:5px 6px 0 #0B1020; } .hw .ticket h3{ font-weight:400; border-bottom-color:#13243C; } .hw .ticket .ok{ border-color:#C23B2B; color:#C23B2B; }
.hw .outro{ background:linear-gradient(to bottom,#4E3558,#D08A5B); color:#F2E6C6; border-top:6px solid #C23B2B; }
.hw .outro h2{ font-weight:400; letter-spacing:.02em; color:#FBEFC8; text-shadow:5px 5px 0 #B0301F,-2px -2px 0 #13243C,2px -2px 0 #13243C,-2px 2px 0 #13243C; } .hw .outro p{ color:#F2E6C6; } .hw .outro .price{ color:#F6D77C; text-shadow:2px 2px 0 #13243C; }
.hw .outro .stack{ background:#F5F4F0; border:5px solid #EADFBF; box-shadow:10px 10px 0 #13243C; }
.hw .btn{ min-height:54px; padding:0 30px; font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:.1em; text-transform:uppercase; border:3px solid #FBEFC8; } .hw .btn.primary{ background:#C23B2B; color:#FBEFC8; } .hw .btn.primary:hover{ background:#FBEFC8; color:#C23B2B; } .hw .btn.ghost{ background:transparent; color:#F2E6C6; } .hw .btn.ghost:hover{ background:rgba(242,230,198,.14); }