/* ============================================================
   TOKENS
   One typeface: Cabinet Grotesk. Weight and size carry the
   hierarchy, nothing else.
   ============================================================ */
@property --c    {syntax:'<color>';inherits:true;initial-value:#16161a}
@property --wash {syntax:'<color>';inherits:true;initial-value:#F4F1EC}
@property --strip{syntax:'<color>';inherits:true;initial-value:#E9E5DE}

:root{
  --ink:#16161a; --paper:#F4F1EC; --muted:#63636c;
  --c:#C2B49A; --deep:#16161a; --wash:#F4F1EC; --strip:#E9E5DE;
  --f:'Cabinet',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --head:72px; --barh:118px;
  --stageh:calc(100svh - var(--head) - var(--barh) - 54px);
  /* the can grows with the window height, so the corner tiles are measured
     against the space that is left beside it, not against the window width */
  --wraphalf:calc(min(1400px,92vw) / 2);
  --canzone:calc(.30 * var(--stageh) + 24px);
  --cwl:clamp(260px,min(33vw,calc(var(--wraphalf) - var(--canzone))),500px);
  transition:--c .55s var(--ease),--wash .55s var(--ease),--strip .55s var(--ease);
}
/* each screen owns its palette, so nothing inside it has to animate.
   hero and outro carry a warm neutral, otherwise they would keep the
   colour of whichever variant was on screen last */
#hero,#story,#range,#relid,#trade,#cta,#foot{--c:#C2B49A;--deep:#16161a;--wash:#F4F1EC;--strip:#E9E5DE}
#core  {--c:#F66212;--deep:#96370A;--wash:#FBEADC;--strip:#F7D3B6}
#flow  {--c:#D81E3F;--deep:#941230;--wash:#FBE6E9;--strip:#F6C7CF}
#glow  {--c:#2E9E45;--deep:#1A6229;--wash:#E7F4E9;--strip:#C7E6CD}
#focus {--c:#0F72D2;--deep:#094A85;--wash:#E4EFFA;--strip:#C3DBF4}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-snap-type:y mandatory}
body{font-family:var(--f);color:var(--ink);background:var(--paper);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:18px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1400px,92vw);margin:0 auto}
.bg{position:fixed;inset:0;z-index:0;background-color:var(--wash)}

/* ============================================================
   HEADER
   ============================================================ */
header{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--head);display:flex;align-items:center}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.mark{height:20px;width:auto}
.headnav{display:flex;align-items:center;gap:2rem}
.headnav a{font-size:.9rem;font-weight:600;letter-spacing:.02em;color:var(--ink);opacity:.72}
.headnav a:hover,.headnav a:focus-visible{opacity:1}
.headnav a.headcta{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:var(--paper);
  padding:.72rem 1.4rem;border-radius:100px;font-size:.84rem;font-weight:700;opacity:1;
  transition:transform .3s var(--ease)}
.headnav a.headcta:hover,.headnav a.headcta:focus-visible{transform:translateY(-2px)}
@media(max-width:820px){.headnav a:not(.headcta){display:none}}

/* ============================================================
   SCREEN AND STAGE
   The can owns the middle of the screen at full height.
   Everything else sits in the four corners around it.
   ============================================================ */
.screen{position:relative;z-index:2;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;align-content:center;overflow:hidden;
  padding:calc(var(--head) + 16px) 0 calc(var(--barh) + 38px)}
.screen::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(48% 34% at 50% 47%,color-mix(in srgb,var(--c) 34%,transparent),transparent 76%)}
.stage{position:relative;z-index:1;height:var(--stageh)}

/* the can */
.can{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);
  display:flex;align-items:flex-end;justify-content:center;z-index:2;pointer-events:none}
.can img{height:82%;width:auto;filter:drop-shadow(0 44px 54px rgba(0,0,0,.3));
  animation:float 7.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* the oversized word, in the free band between the corner tiles */
.display{position:absolute;left:0;right:0;top:2%;bottom:40%;z-index:1;
  display:grid;align-content:start;justify-items:center;text-align:center;
  pointer-events:none;user-select:none}
.display .lead{font-size:clamp(.82rem,1.4vw,1.25rem);font-weight:700;letter-spacing:.32em;
  text-transform:uppercase;color:var(--deep);padding-left:.32em;margin-bottom:.4em}
.display .word{font-weight:800;line-height:.84;letter-spacing:-.042em;text-transform:uppercase;
  color:var(--deep);white-space:nowrap;
  font-size:clamp(2.4rem,min(16.7vw,258px,calc(.34 * var(--stageh))),14rem)}

/* ============================================================
   CORNER TILES
   ============================================================ */
.corner{position:absolute;z-index:4;
  width:clamp(200px,min(21vw,calc(var(--wraphalf) - var(--canzone))),320px)}
.tl{left:0;top:0;width:var(--cwl)}
.bl{left:0;bottom:0;width:var(--cwl)}
.tr{right:0;top:0}
.br{right:0;bottom:0}
.stack{display:grid;gap:.55rem}
.tile{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  border-radius:22px;padding:1rem 1.15rem;display:flex;flex-direction:column;justify-content:center;
  min-width:0}
.tile.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* the identity block is a heading, not a card */
.tile.bare{background:none;border-color:transparent;padding:.1rem .3rem .4rem}
.vmark{display:block;align-self:flex-start;height:clamp(42px,4.8vw,74px);width:auto;max-width:100%;color:var(--deep);margin-top:.6rem}
.vtag{font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-top:.7rem}
.vsub{font-size:.95rem;font-weight:600;color:var(--muted);margin-top:.45rem}
.vsub small{display:block;font-size:.88rem;font-weight:500;margin-top:.2rem}

/* the actives: chips switch the claim below them */
.chip.act{border:0;font-family:inherit;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease)}
.chip.act.on{background:var(--deep);color:var(--wash)}
.apanel{margin-top:.85rem;padding-top:.8rem;border-top:1px solid color-mix(in srgb,var(--deep) 18%,transparent)}
.ahead{font-size:.95rem;font-weight:800;letter-spacing:-.015em;color:var(--deep)}
.aclaim{font-size:.85rem;line-height:1.55;color:#4a4a52;margin-top:.35rem}
.alink{display:inline-block;font-size:.78rem;font-weight:700;color:var(--deep);margin-top:.5rem;
  border-bottom:1px solid currentColor}
.alink[hidden]{display:none}
.fineprint{font-size:.76rem;line-height:1.5;color:var(--muted)}
.lede-light{font-size:.92rem;line-height:1.6;color:#4a4a52;margin-top:0}
/* the variant wordmark takes the place of the oversized word, behind the can */
.dmark{display:block;height:min(calc(.31 * var(--stageh)),13vw,230px);width:auto;max-width:96%;color:var(--deep)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.num{font-size:.82rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--deep)}
.flav{font-size:clamp(1.55rem,2.5vw,2.35rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:.5rem}
.flav small{display:block;font-size:.88rem;font-weight:600;letter-spacing:0;color:var(--muted);margin-top:.4rem}
.tilelbl{font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.55rem}
.chips{display:flex;flex-wrap:wrap;gap:.32rem}
.chip{font-size:.83rem;font-weight:600;padding:.34rem .7rem;border-radius:100px;
  background:color-mix(in srgb,var(--c) 22%,#fff);color:var(--deep)}
.claimtxt{font-size:.85rem;line-height:1.55;color:#4a4a52;margin-top:.65rem}

.badge{flex-direction:row;align-items:center;justify-content:flex-start;gap:.75rem}
.badge .ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 28%,#fff);color:var(--deep)}
.badge svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.badge b{display:block;font-size:1.06rem;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.badge span{display:block;font-size:.84rem;font-weight:600;color:var(--muted);margin-top:.1rem}
.tile.solid span{color:rgba(244,241,236,.72)}

/* ============================================================
   HERO
   ============================================================ */
/* the hero headline sits behind the cans, both lines as large as the band allows */
/* Both lines have to stay readable although the cans stand in front of their
   middle, so they are sized to run clearly wider than the can group. The upper
   bound comes from the band they sit in, which keeps them out of the tiles. */
.hero .display{top:1%;bottom:44%;z-index:1;align-content:center}
.hero .display .word{letter-spacing:.015em;
  font-size:clamp(2.2rem,min(19vw,calc(.35 * var(--stageh))),16rem)}
/* the second line is tracked out instead of set larger: that buys width,
   and width is what keeps it readable beside the cans, not height */
/* The stroke sits on the outside of the letter, not on top of its contour.
   paint-order draws the stroke first and the fill over it, so only the outer
   half stays visible and the shape of the letter is left intact. A centred
   stroke over a transparent fill eats into the letter from both sides, which
   is what made the crossbar of the A look rebuilt. */
.hero .display .sub{text-transform:uppercase;letter-spacing:.17em;margin-top:.01em;
  padding-left:.17em;font-weight:600;
  font-size:clamp(1.7rem,min(17vw,calc(.33 * var(--stageh))),14rem);
  color:var(--wash);-webkit-text-stroke:max(1.4px,.019em) var(--ink);
  paint-order:stroke fill}
.hero .can .slot{display:flex;align-items:flex-end;height:84%;animation:float 8s ease-in-out infinite}
.hero .can .slot.front{animation-duration:7s;animation-delay:.4s;position:relative;z-index:2}
.hero .can img{animation:none;transition:transform .5s var(--ease)}
.hero .can .back img{height:88%;transform:rotate(-8deg) translate(26%,-2%)}
.hero .can .front img{height:100%;transform:rotate(5deg) translate(-12%,0)}
.hero .bl{width:var(--cwl)}
.hero .br{width:var(--cwl)}
.stack.grid2{grid-template-columns:1fr 1fr}
.claimline{font-size:clamp(1.18rem,1.75vw,1.62rem);font-weight:800;line-height:1.22;letter-spacing:-.025em}
.lede{font-size:1rem;line-height:1.6;color:rgba(244,241,236,.74);margin-top:.5rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;margin-top:.95rem;padding:.78rem 1.4rem;
  border-radius:100px;font-size:.92rem;font-weight:700;align-self:flex-start;
  background:var(--paper);color:var(--ink);transition:transform .3s var(--ease)}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   OUTRO: headline and tiles on the left, the whole range bottom right
   ============================================================ */
/* left: headline and tiles. bottom right: the closure on video */
.o-title{position:absolute;left:0;top:1%;z-index:3;display:grid;font-weight:800;line-height:.86;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);
  font-size:clamp(2.2rem,min(5.2vw,calc(.15 * var(--stageh))),5.4rem)}
.o-title span{white-space:nowrap}
.o-title .sub{font-weight:600;letter-spacing:.05em;margin-top:.04em;color:var(--wash);
  -webkit-text-stroke:max(1.3px,.019em) var(--ink);paint-order:stroke fill}
.r-left{position:absolute;left:0;top:0;z-index:4;width:min(44%,560px);display:grid;gap:.65rem;align-content:start}
/* the headline runs the width of the two lid cards below it */
.r-left .o-title{position:static;margin-bottom:clamp(.8rem,3vh,1.9rem);
  font-size:clamp(2.4rem,min(7.7vw,calc(.24 * var(--stageh))),8rem)}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.tile.step{flex-direction:row;align-items:center;gap:.9rem;padding:1.1rem 1.2rem}
.stepic{flex:none;height:clamp(40px,4vw,58px);width:auto;color:var(--deep)}
.step b{font-size:clamp(.95rem,1.3vw,1.12rem);font-weight:800;letter-spacing:-.02em}

.vid{position:absolute;right:-1%;top:0;bottom:0;z-index:2;width:52%;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);border-radius:26px;overflow:hidden}
.vid video{width:100%;height:100%;object-fit:cover;cursor:pointer}
.relid::before{background:radial-gradient(40% 40% at 70% 58%,color-mix(in srgb,var(--c) 34%,transparent),transparent 76%)}

/* ============================================================
   ONLY WHAT MATTERS: copy on the left, the deer on the right
   ============================================================ */
.s-copy{position:absolute;left:0;top:0;bottom:0;z-index:3;width:min(58%,700px);
  display:grid;align-content:center;gap:1rem}
.eyebrow{font-size:.84rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--deep)}
.s-copy h2{font-size:clamp(2.2rem,min(5.4vw,calc(.16 * var(--stageh))),4.6rem);font-weight:800;
  letter-spacing:-.035em;line-height:.98}
.s-lede{font-size:1.05rem;line-height:1.62;color:#4a4a52;max-width:52ch}
.s-notes{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.4rem}
.deerwrap{position:absolute;right:0;top:0;bottom:0;z-index:2;width:38%;
  display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.deer{height:96%;width:auto;color:var(--c);animation:float 9s ease-in-out infinite}
.story::before{background:radial-gradient(38% 40% at 76% 56%,color-mix(in srgb,var(--c) 34%,transparent),transparent 76%)}

/* ============================================================
   THE RANGE: the group shot above, one card per variant below
   ============================================================ */
.rwrap{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;column-gap:2rem}
.rhead h2{font-size:clamp(2.2rem,min(5.4vw,calc(.16 * var(--stageh))),4.6rem);font-weight:800;
  letter-spacing:-.035em;line-height:.98}
.rhead p{font-size:1.1rem;color:#4a4a52;margin-top:.7rem;max-width:32ch}
.rangefig{position:relative;z-index:1;justify-self:end;width:min(720px,104%);margin-right:-4%}
.rangefig::before{content:'';position:absolute;inset:16% -4% -4%;z-index:-1;
  background:
    radial-gradient(26% 50% at 20% 62%,rgba(216,30,63,.24),transparent 72%),
    radial-gradient(26% 50% at 40% 58%,rgba(246,98,18,.24),transparent 72%),
    radial-gradient(26% 50% at 60% 60%,rgba(46,158,69,.22),transparent 72%),
    radial-gradient(26% 50% at 80% 64%,rgba(15,114,210,.22),transparent 72%)}
.rangefig img{width:100%;height:auto;aspect-ratio:2000/1171;
  filter:drop-shadow(0 34px 42px rgba(0,0,0,.24))}
.vgrid{position:relative;z-index:3;grid-column:span 2;display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;width:100%;
  margin-top:clamp(.6rem,1.6vh,1.2rem)}
.vcard{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:22px;
  padding:1rem 1.1rem;display:flex;flex-direction:column}
.vcard[data-v="FLOW"] {--vc:#D81E3F;--vd:#941230}
.vcard[data-v="GLOW"] {--vc:#2E9E45;--vd:#1A6229}
.vcard[data-v="CORE"] {--vc:#F66212;--vd:#96370A}
.vcard[data-v="FOCUS"]{--vc:#0F72D2;--vd:#094A85}
.cmark{width:100%;height:auto;max-height:clamp(42px,4.2vw,62px);color:var(--vd)}
.vfunc{font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--vd);margin-top:.7rem}
.vflav{font-size:1.25rem;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-top:.45rem}
.vflav small{display:block;font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--muted);margin-top:.35rem}
.vacts{list-style:none;display:flex;flex-wrap:wrap;gap:.28rem;margin-top:.7rem}
.vacts li{font-size:.8rem;font-weight:600;padding:.3rem .62rem;border-radius:100px;
  background:color-mix(in srgb,var(--vc) 20%,#fff);color:var(--vd)}
.vcat{margin-top:auto;padding-top:.7rem;font-size:.76rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* ============================================================
   FOR BUYERS
   ============================================================ */
.t-inner{position:absolute;inset:0;z-index:3;display:grid;align-content:center;gap:clamp(1rem,3vh,2rem)}
.t-inner .o-title{position:static}
/* one line, set to the width of the tiles below it */
.o-title.one{display:flex;flex-wrap:nowrap;align-items:baseline;gap:.26em;
  font-size:min(7.73vw,7.35rem)}
.o-title.one .sub{margin-top:0}
.t-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:.7rem;align-items:stretch}
.t-cta .lede{max-width:44ch}
.trade .badge{flex-direction:column;align-items:flex-start;justify-content:center;gap:.9rem}
.trade .badge .ic{width:52px;height:52px}
.trade .badge svg{width:24px;height:24px}

/* ============================================================
   CTA: one panel, the cans leaning in from both edges
   ============================================================ */
.cta .wrap{display:grid;align-content:center}
.ctapanel{position:relative;overflow:hidden;border-radius:clamp(24px,3vw,40px);
  background:color-mix(in srgb,var(--c) 42%,#fff);
  padding:clamp(2.6rem,8vh,5.2rem) clamp(1.4rem,7vw,6rem);
  display:grid;justify-items:center;text-align:center;gap:1rem}
/* four cans, each cut by a different edge, none of them upright */
.ctacan{position:absolute;z-index:0;width:auto;pointer-events:none;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.22))}
.ctacan.a{left:-7%;bottom:-34%;height:152%;transform:rotate(-17deg)}
.ctacan.b{right:-6%;top:-38%;height:146%;transform:rotate(18deg)}
.ctacan.c{left:25%;top:-56%;height:92%;transform:rotate(9deg)}
.ctacan.d{right:27%;bottom:-58%;height:90%;transform:rotate(-9deg)}
.ctapanel h2,.ctalede{text-shadow:0 1px 10px color-mix(in srgb,var(--wash) 70%,transparent)}
.ctapanel > :not(.ctacan){position:relative;z-index:1}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border-radius:100px;
  padding:.5rem 1.05rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.pill svg{width:16px;height:16px;fill:var(--ink)}
.ctapanel h2{font-size:clamp(2rem,min(5.4vw,calc(.16 * var(--stageh))),4.2rem);font-weight:800;
  letter-spacing:-.035em;line-height:1;max-width:16ch}
.ctalede{font-size:1.05rem;line-height:1.6;color:#4a4a52;max-width:46ch}
.btn.dark{background:var(--ink);color:var(--paper);margin-top:.6rem}

/* address and the legal notice */
.foot{position:relative;z-index:2;background:var(--ink);color:var(--paper);scroll-snap-align:end;
  padding:clamp(2.4rem,6vh,4rem) 0 calc(var(--barh) + 2.4rem)}
.foot .wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:2rem 3.5rem}
.foot address{font-style:normal;font-size:.9rem;line-height:1.75;
  color:rgba(244,241,236,.8);padding-top:1.4rem;border-top:1px solid rgba(244,241,236,.18)}
.foot address a{border-bottom:1px solid currentColor}
.legal{font-size:.8rem;line-height:1.7;color:rgba(244,241,236,.55);
  padding-top:1.4rem;border-top:1px solid rgba(244,241,236,.18)}

/* ============================================================
   VARIANT BAR
   ============================================================ */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;height:var(--barh);
  background:var(--strip)}
.bar .wrap{height:100%;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:.5rem}
.vbtn{display:flex;align-items:center;gap:1rem;padding:.4rem;border-radius:14px;position:relative}
.vbtn .thumb{flex:none;position:relative;width:56px;height:56px;border-radius:50%;
  background:color-mix(in srgb,var(--vc) 20%,#fff);
  transition:transform .45s var(--ease),background-color .45s var(--ease)}
.vbtn .thumb img{position:absolute;left:50%;top:50%;height:90px;width:auto;
  transform:translate(-50%,-50%);filter:drop-shadow(0 7px 11px rgba(0,0,0,.22))}
.vbtn .n{display:block;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  position:relative;z-index:1;transition:color .4s var(--ease)}
.vbtn .f{display:block;font-size:.82rem;font-weight:600;color:#5c5c64;margin-top:.2rem}
.vbtn:hover .thumb,.vbtn:focus-visible .thumb{transform:translateY(-4px)}
.vbtn.on .thumb{transform:translateY(-7px) scale(1.16);background:var(--vc)}
.vbtn.on .thumb img{filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}
.vbtn.on .n{color:var(--vd)}

a:focus-visible{outline:2px solid var(--deep);outline-offset:4px;border-radius:6px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1360px){
  .vid{width:50%}
}
@media(max-width:1200px){
  /* the two small cans move in and shrink, so nothing touches */
  .ctacan.c{left:32%;top:-52%;height:78%}
  .ctacan.d{right:34%;bottom:-54%;height:76%}
  .o-cards{width:50%}
  .vid{width:47%}
  .vgrid{gap:.5rem}
  .vcard{padding:.95rem 1rem}
  .tile{padding:.85rem .95rem;border-radius:18px}
  .badge .ic{width:38px;height:38px}
  .badge svg{width:18px;height:18px}
  .badge b{font-size:1rem}
  .badge span{font-size:.8rem}
  .flav{font-size:clamp(1.15rem,1.8vw,1.5rem)}
  .chip{font-size:.78rem;padding:.28rem .6rem}
  .claimtxt{font-size:.8rem}
}
@media(max-width:960px){
  :root{--head:60px;--barh:92px;font-size:16px}
  html{scroll-snap-type:y proximity}
  /* the corners unfold into a two column bento under the can */
  .stage{height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;align-content:center}
  .display,.can,.corner{position:static;width:auto;transform:none}
  .display{grid-column:span 2;display:block;text-align:center;margin-bottom:.1rem}
  .display .word{display:block;white-space:normal;font-size:clamp(2.4rem,13vw,5.4rem)}
  .dmark{height:clamp(58px,17vw,120px);margin:0 auto .4rem}
  .hero .display .word{font-size:clamp(2.2rem,12vw,5rem)}
  .hero .display .sub{font-size:clamp(1.7rem,9vw,3.6rem)}
  .can{grid-column:span 2;display:flex;justify-content:center;align-items:flex-end;margin-bottom:.3rem}
  .can img{height:clamp(200px,calc(100svh - 545px),300px);animation:float 7.5s ease-in-out infinite}
  .hero .can .slot{height:auto;align-items:flex-end}
  .hero .can .back img,.hero .can .front img{height:clamp(185px,calc(100svh - 570px),280px)}
  .bl,.hero .bl{grid-column:span 2;width:auto}
  .br{grid-column:span 2}
  .br.stack{grid-template-columns:repeat(2,1fr)}
  .flav{font-size:clamp(1.4rem,6vw,1.9rem)}
  .claimline{font-size:clamp(1.12rem,4.6vw,1.45rem)}
  .vbtn{flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:.3rem .2rem}
  .vbtn .thumb{width:34px;height:34px}
  .vbtn .thumb img{height:42px}
  .vbtn .n{font-size:.9rem}
  .vbtn .f{display:none}
  .relid .stage{display:block}
  .o-title,.r-left,.vid{position:static;width:auto}
  .r-left{display:contents}
  .steps,.r-left .tile.solid{grid-column:span 2}
  .o-title{font-size:clamp(2.4rem,13vw,5rem)}
  .o-title.one{flex-wrap:wrap;font-size:clamp(2.4rem,13vw,5rem)}
  .vid{height:auto;margin:.7rem 0}
  .vid video{height:auto;max-height:56svh}
  .deerwrap{grid-column:span 2;position:static;transform:none;justify-content:center}
  .deer{height:clamp(150px,calc(100svh - 560px),240px)}
  .story .display .word{max-width:none}
  .story .br,.story .bl{width:auto}
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .foot .wrap{grid-template-columns:1fr;gap:1.2rem}
  .ctacan.c,.ctacan.d{display:none}
  .ctacan{height:auto;width:30%}
  .ctacan.a{left:-12%;bottom:-26%;top:auto}
  .ctacan.b{right:-12%;top:-24%;bottom:auto}
  .ctapanel{padding:2.4rem 1.2rem}
  .s-copy,.deerwrap,.t-inner{position:static;width:auto}
  .s-copy{grid-column:span 2;gap:.8rem}
  .deerwrap{grid-column:span 2;justify-content:center;margin-top:.6rem}
  .deer{height:clamp(160px,calc(100svh - 560px),260px)}
  .t-inner{grid-column:span 2;display:grid;gap:.8rem}
  .t-grid{grid-template-columns:1fr 1fr}
  .t-cta{grid-column:span 2}
  .rwrap{grid-template-columns:1fr;row-gap:.8rem;text-align:left}
  .rangefig{justify-self:center;width:112%;margin:0 0 0 -6%}
}
@media(max-width:620px){
  /* the second tile in the bottom right stack only repeats a chip */
  .br .tile:last-child{display:none}
  .o-cards .tile:last-child,.hero .br .tile:last-child{display:flex}
  .vgrid{grid-template-columns:1fr}
  .t-grid{grid-template-columns:1fr}
  .ctacan{width:32%}
  .ctacan.a{left:-15%;bottom:-30%}
  .ctacan.b{right:-15%;top:-28%}
  .ctapanel h2{font-size:clamp(1.8rem,8vw,2.4rem)}
  .s-notes{grid-template-columns:1fr}
  .badge span{display:none}
  .badge.keep span{display:block}
  .badge.keep .ic{display:grid}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* ============================================================
   FONT
   Cabinet Grotesk, die CI-Schrift, liegt als Datei in
   https://osian.eu/wp-content/uploads/osian/fonts/. Über einen Webserver lädt sie normal. Beim
   reinen Doppelklick (file://) blockiert Chrome lokale
   Schriftdateien, dafür liegen die Fassungen in standalone/
   mit eingebetteter Schrift daneben.
   ============================================================ */
@font-face{font-family:'Cabinet';font-weight:100 900;font-style:normal;font-display:swap;
  src:url('https://osian.eu/wp-content/uploads/osian/fonts/CabinetGrotesk-Variable.woff2') format('woff2')}