/* Look "episode" (the default, DESIGN.md). A2's calm paper layout dressed in the mrwilson episode
   kit, Bryan 2026-10-09: "mostly the current AI era mrwilson but still keeps a touch with the ascii
   flowers". From the kit (mrwilson DESIGN-CUT): navy ink on Paper Stock, the house yellow for caption
   bars and the endcard, Alfa Slab One for display, Space Grotesk to read, JetBrains Mono for labels and
   deadpan lowercase labels, text on a
   panel and never on a picture. The chunky 3D words come from mrwilson's chunky tool; their glossy
   blues, greens and oranges are the accidental nod to Bry's Bodega. YesterYears keeps the typed flower. */
:root{
  --navy:#0F1B2D; --yellow:#F2C400; --paper:#F6F1E6; --blue-deep:#3F5D82; --rose:#C98B7E; --sage:#88B4BC;
  --page:var(--paper); --alt:#EEE7D7; --surface:#FFFDF8; --ink:var(--navy); --dim:#4F5968; --head:var(--navy);
  --link:var(--navy); --link-line:var(--yellow); --hi:var(--yellow); --hi-ink:var(--navy); --sig:var(--navy);
  --rule:#DCD5C4; --rule-strong:var(--navy); --btn-bg:var(--navy); --btn-ink:var(--paper); --fig-bg:transparent;
  --disp:"Alfa Slab One", Rockwell, Georgia, serif; --disp-w:400; --disp-tt:none; --disp-ls:-.005em; --disp-lh:1.04; --disp-var:normal;
  --body:"Space Grotesk", ui-sans-serif, system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --fl1:var(--navy); --fl2:var(--rose); --fl3:var(--sage);
  --chart-made:#A9B6C8; --chart-built:var(--navy); --chart-on:rgba(242,196,0,.35); --era-prog:#5E7FA6; --era-cv:var(--navy); --era-ind:var(--yellow);
  --t-xxl:clamp(2.5rem,5.4vw,4.4rem);
}
body{background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.05'/></svg>")}
h3{font-family:var(--body);font-weight:700}
.name{font-size:1.3rem}
.nav .nav-cta{background:var(--navy);color:var(--yellow)}

/* the label bar: navy, yellow fine print, lowercase (the kit's "workflows · mods · fixes") */
.bar{display:inline-block;margin:0 0 var(--s3);background:var(--navy);color:var(--yellow);font:500 var(--t-xs)/1 var(--mono);padding:7px 12px;letter-spacing:.02em}
/* the caption bar: slab on the house yellow, like the episodes' word-by-word captions */
.cap{display:inline-block;background:var(--yellow);color:var(--navy);font:400 var(--t-s)/1.2 var(--disp);padding:3px 8px}

/* first screen */
.ep-hero{position:relative;padding-bottom:0}
.ep-hero .hero-grid{padding-top:var(--s5);padding-bottom:var(--s4)}
.ep-hero h1{max-width:12ch}
.chunky{margin:0}
.chunky img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* the hero art sits in a 90s window: navy title bar, three little boxes, a hard navy shadow */
.win{margin:0;background:#FFFFFF;border:2px solid var(--navy);box-shadow:8px 8px 0 var(--navy)}
.win-bar{display:flex;align-items:center;gap:5px;background:var(--navy);color:var(--yellow);font:500 11px/1 var(--mono);padding:6px 8px}
.win-bar span{flex:1}
.win-bar i{width:11px;height:11px;border:1.5px solid var(--yellow)}
.win img{display:block;width:100%;height:auto}
.win figcaption{border-top:1px solid var(--rule);font:400 11px/1.4 var(--mono);color:var(--dim);padding:7px 10px}
.win-hero{justify-self:center;width:100%;max-width:440px;transform:rotate(1.2deg)}
/* the credit ticker: fine print on a thin paper bar, flush to the bottom-left corner, moving the whole time */
.ticker{overflow:hidden;white-space:nowrap;background:var(--surface);border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);font:400 var(--t-xs)/2.4 var(--mono);color:var(--navy)}
.ticker span{display:inline-block;padding-left:12px}
@media (prefers-reduced-motion:no-preference){.ticker span{animation:tick 60s linear infinite}}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
/* one 90s clipart spot per workflow, in the slop-canon house style */
@media (min-width:980px){.flow{grid-template-columns:4rem minmax(0,1fr) 230px}}
.flow-art{margin:0;align-self:center}
.flow-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
@media (max-width:979px){.flow-art{grid-column:1/-1;max-width:260px}}
@media (max-width:759px){.flow-art{order:-1;max-width:200px}}
.flow-no{color:var(--blue-deep)}
.proof .cap{font-size:var(--t-xs)}

/* the record: four cards in the chunky carousel's format */
.deck{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.deck-card{display:flex;flex-direction:column;height:100%;background:#FFFFFF;border:1px solid var(--rule);color:var(--ink);text-decoration:none;transition:transform .15s ease-out}
.deck-card:hover{transform:translateY(-3px)}
.deck-bar{background:var(--navy);color:var(--yellow);font:500 11px/1 var(--mono);text-align:center;padding:8px}
.deck-img{position:relative;aspect-ratio:4/3}
.deck-img img{position:absolute;inset:var(--s3);width:calc(100% - 2*var(--s3));height:calc(100% - 2*var(--s3));object-fit:contain;mix-blend-mode:multiply}
.deck-title{font:700 var(--t-m)/1.2 var(--body);padding:0 var(--s3)}
.deck-line{font-size:var(--t-xs);color:var(--dim);padding:6px var(--s3) var(--s3)}
.deck-more{margin:var(--s4) 0 0;font-weight:600}

/* standalone pages: the page's chunky word beside its title */
.page-head-chunky{display:grid;gap:var(--s3) var(--s5);align-items:center}
@media (min-width:900px){.page-head-chunky{grid-template-columns:minmax(0,1fr) 400px}.page-head-chunky>.chunky-page{grid-column:2;grid-row:1/span 4}}
.chunky-page{max-width:400px;width:100%}
/* the archive photos get the episodes' caption bar, on a panel, never on the picture's subject */
.fig-frame{position:relative}
.fig-frame .cap{position:absolute;left:10px;bottom:10px;font-size:var(--t-xs)}
.fig1 figcaption{font:400 11.5px/1.5 var(--mono);color:var(--dim)}
.vtag{background:var(--navy);color:var(--yellow)}

/* the endcard: the house yellow, the name in slab, navy bars */
.endcard{--page:var(--yellow);--alt:var(--yellow);--dim:#2B3442;--link-line:var(--navy);--fl1:var(--navy);--fl2:#7E2F24;--fl3:#24405F;background:var(--yellow)}
.endcard .wordmark{font-size:clamp(2.8rem,6.5vw,5rem);margin:0 0 var(--s3);text-transform:lowercase}
.endline{margin:0 0 var(--s4);max-width:34ch}
.endline span{background:var(--navy);color:var(--paper);font:500 var(--t-m)/1.6 var(--body);padding:2px 8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.endcard .direct a{color:var(--navy)}
/* the hello card with the typed flower pinned over its corner */
.pin{position:relative;display:inline-block;margin:var(--s4) 0 var(--s5)}
.chunky-hello{width:300px;max-width:100%;background:#FFFFFF;border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy)}
.chunky-hello img{mix-blend-mode:normal}
.pin .tag{position:absolute;left:calc(100% - 40px);bottom:-28px}
:is(.pin,.pin-small) .tag{margin:0;background:var(--surface);border:2px solid var(--navy);padding:10px 12px 6px;transform:rotate(-2.5deg)}
:is(.pin,.pin-small) .tag .flower{font-size:7px;font-weight:700;--fl1:#93453A;--fl2:#B86A5C;--fl3:var(--navy)}
:is(.pin,.pin-small) .tag figcaption{font:400 10px/1 var(--mono);color:var(--dim);margin-top:6px;text-align:center}
.bar-foot{margin:0}
.endcard .form{background:var(--surface);border:2px solid var(--navy);padding:var(--s4)}
.form-h{margin:0 0 var(--s2);font:400 var(--t-l)/1.1 var(--disp)}
.endcard .btn-primary{background:var(--navy);color:var(--yellow);border-color:var(--navy)}
.endcard .msg{display:none}

/* SaaS-shaped home and the work gallery (2026-10-10), dressed in the episode kit */
.eyebrow{color:var(--blue-deep)}
.teamrow b{color:var(--dim)}
.product{border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy);transition:transform .15s ease-out}
.product:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--navy)}
.product-img img{mix-blend-mode:multiply}
.band-navy{background:var(--navy);color:var(--paper)}
.band-navy .eyebrow{color:var(--yellow)}
.band-navy .m-fig,.band-navy .tl-years{color:var(--yellow)}
.band-navy a{color:var(--yellow)}
.tl-step{border-color:#2A3A55}
.tl-3{border-color:var(--yellow)}
.feature-art img,.story-art img{mix-blend-mode:multiply}
.steps4 li{border-top-color:var(--navy)}
.steps4-no{color:var(--blue-deep)}
.featured{border:2px solid var(--navy);box-shadow:8px 8px 0 var(--navy)}
.featured-name{text-transform:none}
.card-who{color:var(--blue-deep)}
.chip{border-color:var(--navy)}
.chip.on{background:var(--navy);color:var(--yellow)}
.endcard .way{border:2px solid var(--navy);background:#FFFFFF}
.endcard .pin-small{margin:var(--s2) 0 var(--s4)}
.endcard .pin-small .tag{position:static;display:inline-block}
.buildcard{background:#FFFFFF;border:1px solid var(--rule)}
.buildcard .deck-bar{display:block}
.buildcard-art img{mix-blend-mode:multiply}
.buildcard .cap{font-size:var(--t-xs)}
.footnav a{color:var(--yellow)}

/* footer: the credit line in navy */
footer{background:var(--navy);color:#C9C6BE;border-top:0}
footer a{color:var(--yellow)}
footer .ily{color:var(--rose)}

@media (max-width:759px){
  .pin{display:block;max-width:300px}
  .pin .tag{position:relative;left:auto;bottom:auto;width:max-content;margin:-28px -4px 0 auto}
  :is(.pin,.pin-small) .tag .flower{font-size:5px}
  .bar{font-size:10.5px;padding:6px 9px}
  .win-hero{max-width:340px;transform:none;margin:var(--s3) 0 var(--s2)}
}
/* the builds: house tag in the yellow sign colours, the stage as a stamped chip, cards on white */
.bcard{background:#FFFFFF}
.b-house{background:var(--yellow);color:var(--navy);padding:2px 6px}
.b-stage{font-weight:600}
.btile .b-img-tile{border:2px solid var(--navy);box-shadow:4px 4px 0 var(--navy)}
.feature-shot{transform:none}
.teamrow-now a{color:var(--navy);text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:4px}
/* Massive chunky words (Bryan, 2026-10-10: "make the chunky words categories and images like the one in the hero
   section much more massive and play those images up more"): the hero window grows, every category card and
   page head becomes a window like the hero's, and the build shots tilt like it. */
@media (min-width:980px){.ep-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.ep-hero h1{font-size:clamp(2.6rem,5.4vw,4.75rem)}
.win-hero{max-width:680px;transform:rotate(1.6deg)}
@media (min-width:980px){.win-hero{margin-right:calc(var(--gut) * -0.5)}}
.products{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s6) var(--s5)}
.product{padding-top:0;overflow:visible}
.product .win-bar{border-bottom:2px solid var(--navy)}
.product-img{height:auto;aspect-ratio:1/1;padding:var(--s3);background:#FFFFFF;overflow:visible}
.product-img img{max-height:none;width:100%;height:100%;object-fit:contain;transform:scale(1.1);transition:transform .2s ease-out}
.product:hover .product-img img{transform:scale(1.16) rotate(-1.5deg)}
.products li:nth-child(1) .product{transform:rotate(-1deg)}
.products li:nth-child(3) .product{transform:rotate(1deg)}
.products li .product:hover{transform:translate(-2px,-2px)}
.product-name{font:400 var(--t-xl)/1.1 var(--disp);color:var(--navy)}
@media (min-width:900px){.page-head-chunky{grid-template-columns:minmax(0,1fr) minmax(0,560px)}}
.chunky-page{max-width:560px;transform:rotate(1.4deg)}
.chunky-page.win{background:#FFFFFF}
.chunky-page.win img{padding:var(--s3) var(--s3) var(--s2)}
.feature-shot{transform:rotate(-0.8deg)}
.feature.flip .feature-shot{transform:rotate(0.8deg)}
@media (min-width:900px){.feature-real{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.feature-real.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
.teams-now{background:var(--navy);color:var(--paper);box-shadow:6px 6px 0 var(--yellow);transform:rotate(-0.6deg)}
.now-thumb{border:2px solid var(--yellow)}
.teamrow b{font-size:var(--t-m)}
@media (prefers-reduced-motion:reduce){.product-img img,.product:hover .product-img img{transition:none;transform:none}}
@media (max-width:640px){.win-hero,.chunky-page,.feature-shot,.feature.flip .feature-shot,.products li:nth-child(n) .product,.teams-now{transform:none}.win-hero{margin-right:0}}
@media (prefers-reduced-motion:reduce){.product{transition:none}.products li:nth-child(n) .product:hover{transform:none}}
.product-img{aspect-ratio:5/4}
.ep-hero h1{font-size:clamp(2.5rem,4.5vw,4.1rem);max-width:none}
.win .b-img img{width:100%;height:100%}
/* proof cards: the hero's window on every shot; then in navy, now in yellow */
.pc{background:#FFFFFF;border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy)}
.pc-now{box-shadow:6px 6px 0 var(--yellow)}
.pc-shot.win{box-shadow:none;border:0;border-bottom:2px solid var(--navy)}
.pc-when-then{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.pc-when-now{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.job-name{font-size:clamp(1.9rem,3.6vw,3rem)}
.job-no{background:var(--yellow);color:var(--navy);padding:4px 7px}
.job-pair>.pc:first-child{transform:rotate(-0.6deg)}
.job-pair>.pc:last-child{transform:rotate(0.6deg)}
@media (max-width:640px){.job-pair>.pc:nth-child(n){transform:none}}
/* the offers: the hero's window again, the title in slab, the route as a run of chips ending on the house yellow */
.offer{background:#FFFFFF;border:2px solid var(--navy);box-shadow:8px 8px 0 var(--navy)}
.offer .win-bar{font-size:12px;padding:8px 10px}
.offers>.offer:nth-child(4n+1),.offers>.offer:nth-child(4n+4){transform:rotate(-0.4deg)}
.offers>.offer:nth-child(4n+2),.offers>.offer:nth-child(4n+3){transform:rotate(0.4deg)}
@media (max-width:640px){.offers>.offer:nth-child(n){transform:none}}
.offer-title{font:400 clamp(1.6rem,2.6vw,2.2rem)/1.06 var(--disp);color:var(--navy)}
.offer-no{background:var(--yellow);color:var(--navy);padding:4px 7px;align-self:flex-start;margin-top:.3em}
.offer-text{font-size:var(--t-l);line-height:1.45}
@media (max-width:640px){.offer-text{font-size:var(--t-m)}.offer-body{padding:var(--s3)}}
.offer-route li{border:2px solid var(--navy);background:var(--paper);color:var(--navy)}
.offer-route li:not(:last-child)::after{color:var(--navy);font-weight:700}
.offer-route li:last-child{background:var(--yellow);border-color:var(--navy)}
.start-lbl{color:var(--blue-deep)}
.offer-art{border-bottom:2px solid var(--navy)}
/* pass 2 (2026-10-10): the feed in navy with the yellow, the wave, the grid as small windows */
.feed{background:var(--navy);color:var(--paper)}
.feed .now-lbl{color:var(--yellow)}
.feed-tile{border:2px solid var(--yellow);box-shadow:5px 5px 0 #000}
.feed-show a{color:var(--yellow)}
.wave-fill{fill:#1B2C46}
.wave-stroke{stroke:var(--yellow)}
.wave-crest{fill:var(--yellow)}
.era-no{background:var(--yellow);color:var(--navy)}
.era-years{color:var(--yellow)}
.era-name{color:var(--paper)}
.mq-shot{border:2px solid var(--paper);box-shadow:6px 6px 0 #000}
.era-note{background:rgba(242,196,0,.12)}
.mini-img{border:2px solid var(--navy);box-shadow:3px 3px 0 var(--navy)}
.offer-art{border-bottom:2px solid var(--navy)}
/* FINDING-002: one art box size for the three doors, so the titles sit on one line */
.product-img{position:relative;aspect-ratio:5/4;height:auto;min-height:0;overflow:hidden}
.product-img img{position:absolute;top:var(--s3);left:var(--s3);width:calc(100% - 2 * var(--s3));height:calc(100% - 2 * var(--s3));object-fit:contain}
/* FINDING-003: the eras sit in the water under the wave (one colour, no seam where the wave's fill ends) */
#work.band{padding-bottom:0}
.sea{background:#1B2C46;padding-bottom:var(--s7)}
.wave{margin-bottom:-1px}
/* FINDING-005: on a phone each door is one short window, art left and words right (2,201 px → under 800) */
@media (max-width:640px){
  .products{gap:var(--s4)}
  .product{display:grid;grid-template-columns:44% minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:var(--s3);padding-bottom:var(--s3)}
  .product .win-bar{grid-column:1/-1}
  .product-img{grid-column:1;grid-row:2/span 3;align-self:center;aspect-ratio:1/1;padding:6px;overflow:hidden}
  .product-img img{position:static;width:100%;height:100%;object-fit:contain;transform:none}
  .product-name{grid-column:2;padding:var(--s3) 0 0;font-size:1.6rem}
  .product-text{grid-column:2;padding:0;font-size:var(--t-s)}
  .product-go{grid-column:2;padding:var(--s2) 0 0;font-size:var(--t-s)}
}
:root{--maxw:1360px}
/* FINDING-009: two anchor sections get the bigger heading (the waves, then what I'd build); the rest stay at 40 px */
#work h2{font-size:clamp(2.6rem,5vw,4rem)}
#help h2{font-size:clamp(2.2rem,4vw,3.2rem)}
/* FINDING-010: each crest carries its era number and year, so the wave reads as the timeline; the surfer rides crest 03 */
.crest-lbl{position:absolute;z-index:2;transform:translate(-50%,0);background:var(--yellow);color:var(--navy);font:600 var(--t-xs)/1 var(--mono);padding:5px 8px;white-space:nowrap}
.crest-1{left:16.67%;top:calc(56.5% + 18px)}
.crest-2{left:50%;top:calc(37% + 18px)}
.crest-3{left:83.33%;top:calc(17.4% + 18px)}
.wave-surfer{transform:translate(-50%,-72%)}
@media (max-width:640px){.crest-lbl{font-size:10px;padding:3px 5px}}

/* ---------- the hero, 2026-10-10 (Bryan: "the most visually appealing and impactful") ----------
   The three chunky words are three plates on white, blended with multiply so their white floor becomes the paper
   and their soft shadows stay. Each word lands on its own, once, on load (the page's one authored entrance). */
.hp-w,.hs-art .hp-w{display:block;margin:0;mix-blend-mode:multiply}
.hp-w img{display:block;width:100%;height:auto}
/* the plates' floor reflection ends in a straight line; fade every edge so the words stand on the paper itself */
.hp-w img{-webkit-mask-image:linear-gradient(to bottom,#000 95%,transparent),linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 95%,transparent),linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent);mask-composite:intersect}
@media (prefers-reduced-motion:no-preference){
  .hp-w{animation:hp-land .7s cubic-bezier(.2,.75,.25,1) both}
  .hp-content{animation-delay:.14s}
  .hp-systems{animation-delay:.28s}
}
@keyframes hp-land{from{transform:translateY(-34px) rotate(-1.5deg);opacity:.25}to{transform:none;opacity:1}}

/* the hero, pass 3: the headline lockup, one scene, one text band */
.hero-poster{padding:var(--s5) 0 var(--s6)}
.hp-h1{font-size:clamp(2.8rem,6.2vw,5.6rem);line-height:1;margin:0;max-width:none;letter-spacing:-.01em}
.hp-scene{position:relative;margin-top:calc(var(--s2) * -1)}
.hp-row{position:relative;display:flex;align-items:flex-end;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.hp-row .hp-w{flex:0 0 auto}
.hp-b2b{width:30%}
.hp-content{width:37%;margin-left:-3%}
.hp-systems{width:38%;margin-left:-2%}
.hp-foot{display:grid;gap:var(--s4) var(--s6);margin-top:var(--s4);padding-top:var(--s4);border-top:2px solid var(--navy)}
@media (min-width:900px){.hp-foot{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.hp-say .lede{font-size:var(--t-l);max-width:50ch;margin-bottom:var(--s2)}
.hp-say .authorship{margin:0}
.hp-do .actions{margin:0}
.hp-do .facts{margin-top:var(--s3)}
@media (max-width:899px){
  .hp-row{flex-direction:column;align-items:stretch}
  .hp-row .hp-w{width:100%;margin-left:0}
  .hp-b2b{width:72%!important}
  .hp-foot{margin-top:var(--s3)}
  .hp-say .lede{font-size:var(--t-m)}
}

/* concept B: split, upgraded */
.hs-grid{display:grid;gap:var(--s5);align-items:center;padding-top:var(--s5);padding-bottom:var(--s5)}
@media (min-width:980px){.hs-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.hero-split h1{font-size:clamp(2.6rem,5vw,4.4rem);max-width:12ch}
.hs-art{position:relative;aspect-ratio:1400/1407;margin-right:calc(var(--gut) * -1)}
.hs-art .hp-w{position:absolute}
.hs-b2b{left:1.4%;top:1.7%;width:45.7%}
.hs-content{left:31.4%;top:13.6%;width:67.1%}
.hs-systems{left:0;top:53.1%;width:78.6%}
.hp-w{position:relative}
/* the trail: the brief goes from the deal to the director, the made thing goes from CONTENT into the machine */
.hp-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hp-path{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 11;vector-effect:non-scaling-stroke}
.hp-trail .hp-tip{fill:var(--navy)}
.hp-draw{fill:none;stroke:#fff;stroke-width:28;stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .hp-draw{animation:hp-draw .8s ease-out 3.3s both}
  .hp-draw-2{animation-delay:6.2s}
  .hp-tip{animation:hp-beat .3s ease-out both}
  .hp-tip-1{animation-delay:4s}
  .hp-tip-2{animation-delay:6.8s}
}
@keyframes hp-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (max-width:899px){.hp-trail{display:none}}
/* the travelers: the brief flies from the buyer to the director; a reel drops into the machine (SMIL, once) */
@media (prefers-reduced-motion:reduce){.hp-travel{display:none}}
/* the hero clips sit exactly where the plates sat: same blend, same edge fade */
.hp-w video{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 95%,transparent),linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 95%,transparent),linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent);mask-composite:intersect}
@keyframes hp-beat{from{opacity:0}to{opacity:1}}
/* one stage: a soft floor shadow runs under all three words, offset below them (depth, not a halo) */
.hp-row::after{content:"";position:absolute;left:4%;right:4%;bottom:-6px;height:28px;background:radial-gradient(50% 50% at 50% 50%,rgba(15,27,45,.16),rgba(15,27,45,0));pointer-events:none;z-index:-1}
@media (max-width:899px){.hp-row::after{display:none}}
/* the hero clips and stills carry the paper colour in their pixels (baked with ffmpeg multiply), because phones skip
   mix-blend-mode on video. Where a browser does blend, darken keeps the page wherever a plate is lighter than it, so
   the plate's flat paper gives way to the page's own grain and no plate edge shows; where it does not, the bake holds.
   (Multiply would darken the baked paper twice.) */
.hp-w,.hs-art .hp-w{mix-blend-mode:darken}
.hp-head{position:relative;z-index:1}

/* ---------- the hero, pass 4: the full stage (Bryan: "more animated detailed and fun around them, use the full hero space")
   One screen tall: the headline, then the scene (a band of sky with props over the three words on one floor), then the
   text band. The words run the full width of the screen so they are as big as one row allows. */
.hero-poster{padding:0}
.hp-stage{display:grid;grid-template-rows:auto 1fr auto;min-height:calc(100svh - var(--bar));padding:var(--s4) 0 var(--s4)}
.hp-scene{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;margin-top:0}
.hp-row{max-width:1720px;width:100%;padding:0 12px}
.hp-foot{margin-top:var(--s3)}
/* the idle loop sits exactly under its story clip; once it plays, the story clip steps aside */
.hp-w .hp-loop{position:absolute;inset:0;opacity:0}
.hp-w.is-looping .hp-loop{opacity:1}
.hp-w.is-looping > video[data-hero-play]{opacity:0}
/* ---------- the hero, pass 5: one canvas (Bryan 2026-10-11: "make better use of the space and positioning the items")
   The headline, the words, the trail and the props share .hp-canvas, a 2.3:1 box as wide as the screen allows while
   the text band still fits under it. --cw is its width, and the unit for the props' motion, so nothing moves relative
   to anything else at any size. The words climb: B2B on the floor, CONTENT 9% up, SYSTEMS 19% up, and the trail jumps
   from block to block. No z-index on the canvas or the row: the words' darken blend needs the page behind them. */
.hp-stage{display:block;min-height:0;padding:var(--s3) 0 var(--s4);overflow-x:clip}
.hp-canvas{--cw:min(100vw - 24px, max(960px, (100svh - var(--bar) - 250px) * 2.3));position:relative;width:var(--cw);aspect-ratio:2.3;margin:0 auto}
.hp-canvas .hp-row{position:absolute;inset:0;display:block;max-width:none;width:auto;margin:0;padding:0}
.hp-canvas .hp-row::after{display:none}
.hp-canvas .hp-w{position:absolute;margin:0}
.hp-canvas .hp-b2b{left:.5%;bottom:0;width:30%}
.hp-canvas .hp-content{left:27.5%;bottom:9%;width:37%}
.hp-canvas .hp-systems{left:61.5%;bottom:19%;width:38%}
.hp-canvas .hp-head{position:absolute;left:3%;top:4%;margin:0;padding:0;max-width:none}
.hp-canvas .hp-h1{font-size:calc(var(--cw) * .076);line-height:.94;width:min-content}
.hp-canvas .hp-trail{position:absolute;inset:0;width:100%;height:100%}
.hp-foot{margin-top:var(--s3)}
@media (max-width:899px){
  .hp-canvas{--cw:100vw;display:flex;flex-direction:column;width:auto;aspect-ratio:auto}
  .hp-canvas .hp-head{order:-1;position:relative;left:auto;top:auto;padding:0 var(--gut) var(--s2)}
  .hp-canvas .hp-h1{font-size:clamp(2.8rem,12vw,4.2rem);width:min-content}
  .hp-canvas .hp-row{position:relative;inset:auto;display:flex;flex-direction:column;align-items:stretch;padding:0 var(--gut)}
  .hp-canvas .hp-w{position:relative;left:auto;bottom:auto;width:100%}
  .hp-canvas .hp-b2b{width:72%}
  .hp-canvas .hp-trail,.hp-props,.hp-sky .hp-p{display:none}
  .hp-sky .hp-p-plane,.hp-sky .hp-p-cloud1{display:block}
  .hp-canvas .hp-p-cloud1{left:76%;top:27%;width:18%}
  .hp-canvas .hp-p-plane{left:-12%;top:6%;width:13%}
}

/* the props. Two layers: the sky spans the whole stage (positions in % of the stage); the row layer is pinned to the
   words (left in % of the row's width, bottom in % of its height, so a prop keeps its spot by its word at any width).
   Each prop pops in on its story beat (the clock in site.js: B2B .3s, CONTENT 3.9s, SYSTEMS 6.6s), then keeps a small
   motion of its own. --d is its depth for the cursor parallax (site.js sets --mx and --my on the stage). */
.hp-stage{position:relative}
.hp-sky{position:absolute;inset:0;pointer-events:none}
.hp-head{z-index:2}
.hp-props{position:absolute;inset:0;pointer-events:none;z-index:2}
.hp-p{position:absolute;display:block;--d:0;translate:calc(var(--mx,0) * var(--d) * 1px) calc(var(--my,0) * var(--d) * 1px);transition:translate .9s cubic-bezier(.2,.7,.3,1)}
.hp-p img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 8px rgba(15,27,45,.13))}
/* the sky */
.hp-p-cloud1{left:37.5%;top:2%;width:6%;--d:-8}
.hp-p-cloud2{left:64%;top:5%;width:4.4%;--d:-4;opacity:.9}
.hp-p-cloud3{left:1%;top:47%;width:4%;--d:-5;opacity:.85}
.hp-p-cloud2 img,.hp-p-cloud3 img{filter:none}
.hp-p-blimp{left:49%;top:8%;width:11%;--d:-12}
.hp-p-plane{left:-9%;top:20%;width:5.5%;--d:6}
/* in front of the words, each in the gap its beat owns */
.hp-p-env{left:21.5%;top:47%;width:4.6%;--d:10}
.hp-p-mega{left:31%;top:51%;width:5%;--d:6}
.hp-p-reel{left:60%;top:36%;width:4%;--d:8}
.hp-p-gears{left:81%;top:15%;width:5.2%;--d:12}
.hp-p-chart{left:91%;top:2%;width:6%;--d:16}
.hp-p-trophy{left:73.5%;top:76%;width:6.2%;--d:5}
.hp-p-rocket{left:96%;top:81%;width:2.5%;--d:0}
.hp-pad{position:absolute;left:96%;top:90%;width:2.5%;aspect-ratio:1;pointer-events:none}
/* the details: CONTENT's megaphone shouts back at the buyer, the payoff sparkles, the rocket leaves a puff */
.hp-shout{position:absolute;right:96%;top:6%;width:60%;height:60%}
.hp-shout i{position:absolute;right:0;top:50%;width:var(--w);aspect-ratio:1;translate:0 -50%;border-left:3px solid var(--navy);border-radius:50%;opacity:0}
.hp-shout i:nth-child(1){--w:40%}
.hp-shout i:nth-child(2){--w:70%;right:-12%}
.hp-shout i:nth-child(3){--w:100%;right:-24%}
.hp-spark{position:absolute;inset:-28%}
.hp-spark i{position:absolute;width:26%;aspect-ratio:1;background:var(--yellow);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0}
.hp-spark i:nth-child(1){left:0;top:8%}
.hp-spark i:nth-child(2){right:0;top:30%;width:19%}
.hp-spark i:nth-child(3){left:14%;bottom:6%;width:15%;background:var(--navy)}
.hp-pad i{position:absolute;left:10%;bottom:0;width:80%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:inset -3px -4px 0 rgba(15,27,45,.12);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .hp-p{animation:hp-pop .5s cubic-bezier(.2,.8,.3,1.25) both}
  .hp-p-cloud1{animation:hp-pop .5s 1s both,hp-drift 26s ease-in-out 1.5s infinite alternate}
  .hp-p-cloud2{animation:hp-pop .5s 1.3s both,hp-drift 34s ease-in-out 1.8s infinite alternate-reverse}
  .hp-p-cloud3{animation:hp-pop .5s 1.6s both,hp-drift 30s ease-in-out 2.1s infinite alternate}
  .hp-p-blimp{animation:hp-pop .6s .8s both,hp-blimp 38s ease-in-out 1.4s infinite alternate}
  .hp-p-plane{animation:hp-plane 17s linear 2s infinite}
  .hp-p-env{animation:hp-brief 8s ease-in-out 3.3s infinite}
  .hp-p-mega{animation:hp-pop .5s 4.1s both,hp-bob 2.4s ease-in-out 4.6s infinite}
  .hp-shout i{animation:hp-shout 1.6s ease-out 4.6s infinite}
  .hp-shout i:nth-child(2){animation-delay:4.8s}
  .hp-shout i:nth-child(3){animation-delay:5s}
  .hp-p-reel{animation:hp-pop .5s 6s both,hp-spin 6s linear 6.5s infinite}
  .hp-p-gears{animation:hp-pop .5s 6.9s both,hp-spin 10s linear 7.4s infinite}
  .hp-p-chart{animation:hp-rise .7s cubic-bezier(.2,.8,.3,1.3) 9s both,hp-bob 3.2s ease-in-out 9.7s infinite}
  .hp-p-trophy{animation:hp-pop .6s cubic-bezier(.2,.8,.3,1.5) 9.8s both,hp-bob 2.8s ease-in-out 10.4s infinite}
  .hp-spark i{animation:hp-twinkle 2.2s ease-in-out 10.4s infinite}
  .hp-spark i:nth-child(2){animation-delay:11s}
  .hp-spark i:nth-child(3){animation-delay:11.5s}
  .hp-p-trophy .hp-spark i{animation-delay:10.9s}
  .hp-p-trophy .hp-spark i:nth-child(2){animation-delay:11.6s}
  .hp-p-trophy .hp-spark i:nth-child(3){animation-delay:12.1s}
  .hp-p-rocket{animation:hp-rocket 12s 10.5s infinite both}
  .hp-pad i{animation:hp-puff 12s ease-out 10.5s infinite}
  .hp-pad i:nth-child(2){--px:-70%}
  .hp-pad i:nth-child(3){--px:70%}
  /* the words lift a little under the cursor */
  @media (hover:hover) and (min-width:900px){
    .hp-w{transition:translate .45s cubic-bezier(.3,1.7,.5,1),rotate .45s cubic-bezier(.3,1.7,.5,1)}
    .hp-w:hover{translate:0 -8px;rotate:-.7deg}
    .hp-content:hover{rotate:.6deg}
  }
}
@media (prefers-reduced-motion:reduce){.hp-p-plane,.hp-p-rocket,.hp-pad,.hp-shout,.hp-spark{display:none}}
@keyframes hp-pop{from{transform:scale(.4) translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes hp-rise{from{transform:translateY(40px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes hp-drift{from{transform:translateX(calc(var(--cw) * -.02))}to{transform:translateX(calc(var(--cw) * .02))}}
@keyframes hp-blimp{from{transform:translate(calc(var(--cw) * -.03),0)}to{transform:translate(calc(var(--cw) * .03),12px)}}
@keyframes hp-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes hp-spin{to{transform:rotate(360deg)}}
@keyframes hp-shout{0%{opacity:0;transform:translateX(0)}25%{opacity:1}100%{opacity:0;transform:translateX(-16px)}}
@keyframes hp-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}
/* the brief: lifts off the buyer's side, arcs over to the director, and lands in CONTENT; again every 8s */
@keyframes hp-brief{0%{transform:translate(0,calc(var(--cw) * .015)) scale(.5) rotate(-8deg);opacity:0}8%{opacity:1;transform:translate(calc(var(--cw) * .01),0) scale(1) rotate(-4deg)}30%{transform:translate(calc(var(--cw) * .07),calc(var(--cw) * -.045)) rotate(6deg)}50%{transform:translate(calc(var(--cw) * .13),calc(var(--cw) * -.035)) rotate(-5deg)}62%{transform:translate(calc(var(--cw) * .17),0) scale(.75) rotate(4deg);opacity:1}70%,100%{transform:translate(calc(var(--cw) * .185),calc(var(--cw) * .012)) scale(.4);opacity:0}}
/* the paper plane crosses the sky with a loop-the-loop in the middle (eight points round a 55px circle) */
@keyframes hp-plane{
  0%{transform:translate(0,0) rotate(6deg)}
  20%{transform:translate(calc(var(--cw) * 0.24),-14px) rotate(-3deg)}
  38%{transform:translate(calc(var(--cw) * 0.46),0) rotate(0)}
  40%{transform:translate(calc(var(--cw) * .46 + 39px),-16px) rotate(-45deg)}
  42%{transform:translate(calc(var(--cw) * .46 + 55px),-55px) rotate(-90deg)}
  44%{transform:translate(calc(var(--cw) * .46 + 39px),-94px) rotate(-135deg)}
  46%{transform:translate(calc(var(--cw) * 0.46),-110px) rotate(-180deg)}
  48%{transform:translate(calc(var(--cw) * .46 - 39px),-94px) rotate(-225deg)}
  50%{transform:translate(calc(var(--cw) * .46 - 55px),-55px) rotate(-270deg)}
  52%{transform:translate(calc(var(--cw) * .46 - 39px),-16px) rotate(-315deg)}
  54%{transform:translate(calc(var(--cw) * 0.46),0) rotate(-360deg)}
  76%{transform:translate(calc(var(--cw) * 0.8),-12px) rotate(-363deg)}
  100%{transform:translate(calc(var(--cw) * 1.2),6px) rotate(-357deg)}
}
/* the rocket: rumbles on the pad, lifts off past the chart, gone; again every 12s */
@keyframes hp-rocket{
  0%{transform:translateY(12px) scale(.6);opacity:0}
  6%{transform:none;opacity:1}
  9%,13%,17%{transform:translateX(-1.5px)}
  11%,15%,19%{transform:translateX(1.5px)}
  21%{transform:translateY(-6px);opacity:1;animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  48%{transform:translateY(calc(var(--cw) * -.62)) rotate(-3deg);opacity:1}
  50%,100%{transform:translateY(calc(var(--cw) * -.62));opacity:0}
}
@keyframes hp-puff{0%,18%{opacity:0;transform:translateX(0) scale(.2)}22%{opacity:.95;transform:translateX(calc(var(--px,0%) * .4)) scale(.7)}40%{opacity:0;transform:translateX(var(--px,0%)) translateY(-30%) scale(1.6)}100%{opacity:0}}

/* ---------- the house props (docs/designs/house-props.md): the clip turns up on the 404, unexplained and decorative */
.plain .wrap{position:relative}
.plain-prop{position:absolute;right:var(--gut);top:6px;width:86px;height:auto;rotate:8deg;filter:drop-shadow(0 10px 8px rgba(15,27,45,.13));pointer-events:none}
@media (prefers-reduced-motion:no-preference){.plain-prop{animation:hp-bob 3s ease-in-out infinite}}
@media (max-width:640px){.plain-prop{width:44px;top:6px}}

/* ---------- the hero, pass 6 (Bryan 2026-10-11: the name and "Creative Director" "need to be removed and worked into the
   chunky work and main hero section animation branding"). The headline is two chunky words, CREATIVE / DIRECTOR, in
   navy like B2B; the name rides the sky on a banner the yellow paper plane tows across the top, first thing on load. */
.hp-canvas .hp-head{top:11%}
.hp-canvas .hp-h1:has(.hp-title){width:auto}
.hp-title{display:flex;flex-direction:column;gap:calc(var(--cw) * .004)}
.hp-title img{display:block;width:calc(var(--cw) * .26);max-width:none;height:auto;filter:drop-shadow(0 8px 6px rgba(15,27,45,.12))}
@media (prefers-reduced-motion:no-preference){
  .hp-title img{animation:hp-land .7s cubic-bezier(.2,.75,.25,1) both}
  .hp-title img+img{animation-delay:.12s}
}
.hp-tow{position:absolute;left:0;top:1.2%;display:flex;align-items:center;translate:-110% 0;pointer-events:none;z-index:1}
.hp-banner{display:block;padding:.35em .9em;background:#FFFDF8;border:2px solid var(--navy);box-shadow:3px 3px 0 var(--navy);
  font:400 calc(var(--cw) * .017)/1 var(--disp,"Alfa Slab One"),serif;color:var(--navy);white-space:nowrap;transform-origin:100% 50%}
.hp-rope{display:block;width:calc(var(--cw) * .05);height:2px;background:var(--navy)}
.hp-tow img{display:block;width:calc(var(--cw) * .05);height:auto;margin-left:-4px}
@media (prefers-reduced-motion:no-preference){
  .hp-tow{animation:hp-tow 24s linear .6s infinite}
  .hp-banner{animation:hp-flap .5s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:reduce){.hp-tow{translate:none;left:auto;right:3%}}
@keyframes hp-tow{0%{translate:-110% 0}38%{translate:calc(var(--cw) * 1.08) 0}100%{translate:calc(var(--cw) * 1.08) 0}}
@keyframes hp-flap{from{transform:skewY(-1.5deg) scaleY(.98)}to{transform:skewY(1.5deg) scaleY(1.02)}}
/* the loop-the-loop plane waits until the banner has crossed */
@media (prefers-reduced-motion:no-preference){.hp-p-plane{animation-delay:10s}}
@media (max-width:899px){
  .hp-title img{width:min(78vw,440px)}
  .hp-canvas .hp-head{top:auto;padding-top:48px}
  .hp-sky .hp-tow{display:flex;top:.4%}
  .hp-banner{font-size:15px}
  .hp-rope{width:28px}
  .hp-tow img{width:44px}
}

/* all three house props in the hero (Bryan 2026-10-11: "a slight reference/appearance to the 3 brand meme characters/items
   with the yellow mug, paperplane and paperclip"): the mug is in the SYSTEMS plate, the plane tows the name and loops,
   and the clip turns up uninvited after the payoff, leaning in beside the trophy */
/* the clip peeks over the headline from behind CREATIVE (it sits in the sky layer, so the word hides its lower half),
   pops up two seconds in and ducks back down now and then: the eager assistant nobody asked for */
.hp-p-clip{left:21.5%;top:1.5%;width:3.6%;--d:-6;rotate:9deg}
.hp-p-clip img{filter:drop-shadow(0 6px 5px rgba(15,27,45,.15))}
@media (prefers-reduced-motion:no-preference){.hp-p-clip{animation:hp-peek 9s cubic-bezier(.3,1.35,.5,1) 1.8s infinite both}}
@keyframes hp-peek{0%{transform:translateY(75%)}8%,62%{transform:none}66%{transform:translateY(75%)}74%{transform:translateY(75%)}80%,100%{transform:none}}
@media (max-width:899px){.hp-sky .hp-p-clip{display:block;left:72%;top:1.6%;width:11%}}

/* pass 7 (2026-10-11, Bryan): the teams under the offers, an even 3 x 3 of featured pieces with their clips
   up front, the grid four to a row, and the surfer rides the whole wave. */
.teams{background:var(--surface);border-top:2px solid var(--navy);border-bottom:2px solid var(--navy);padding:var(--s5) 0}
.teams .teams-row{grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--s4);text-align:center}
.teams .teamrow{justify-content:center;gap:var(--s2) var(--s5)}
.teams .teamlbl{flex-basis:100%;width:auto;text-align:center}
.eras .era{margin:0;min-width:0}
@media (max-width:999px){.eras{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1000px){
  .eras{grid-template-rows:auto repeat(3,auto);row-gap:var(--s5)}
  .eras .era{grid-row:span 4;display:grid;grid-template-rows:subgrid}
  .eras .marquee{grid-row:span 3;display:grid;grid-template-rows:subgrid;margin:0}
}
.mq-shot{aspect-ratio:4/3}
.mq-has-video .mq-shot{border-color:var(--yellow);box-shadow:6px 6px 0 var(--yellow)}
.mq-has-video .mq-shot video{background:#0B1524}
.mq-chip{position:absolute;top:10px;left:10px;z-index:2;background:var(--yellow);color:var(--navy);font:600 11px/1 var(--mono);letter-spacing:.04em;padding:5px 7px;pointer-events:none}
.is-playing .mq-chip{display:none}
.mq-has-video .mq-watch{color:var(--yellow)}
.minis{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s4)}
@media (max-width:900px){.minis{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}}
@media (max-width:640px){.minis{grid-template-columns:minmax(0,1fr)}}  /* phones keep classic's one-column list rows */
.mini-img{aspect-ratio:4/3}
.mini-name{font-size:var(--t-m)}
.mini-kick{font-size:var(--t-s)}
@media (max-width:640px){.mini-name{font-size:var(--t-s)}.mini-kick{font-size:var(--t-xs)}}
/* the surfer: a full-size layer moved along the wave's own curve (keyframes sampled from the SVG path, so x and y are
   percentages of the wave box at any width); at rest (reduced motion) it sits on crest 03 as before */
.wave{overflow-x:clip}
.wave-ride{position:absolute;inset:0;z-index:3;pointer-events:none;translate:83.33% 17.4%}
.wave-ride .wave-surfer{left:0;top:0}
@media (prefers-reduced-motion:no-preference){
  .wave-ride{animation:wave-surf 22s linear infinite}
  .wave-ride .wave-surfer{animation:wave-tilt 22s linear infinite}
}
@keyframes wave-surf{0.0%{translate:-7.50% 86.96%}2.2%{translate:-5.00% 86.96%}4.3%{translate:-2.50% 86.96%}6.5%{translate:0.00% 86.96%}8.7%{translate:2.50% 86.11%}10.9%{translate:5.00% 83.17%}13.0%{translate:7.50% 77.45%}15.2%{translate:10.00% 69.18%}17.4%{translate:12.50% 61.37%}19.6%{translate:15.00% 57.22%}21.7%{translate:17.50% 56.69%}23.9%{translate:20.00% 59.39%}26.1%{translate:22.50% 65.62%}28.3%{translate:25.00% 73.79%}30.4%{translate:27.50% 80.81%}32.6%{translate:30.00% 85.11%}34.8%{translate:32.50% 86.85%}37.0%{translate:35.00% 86.24%}39.1%{translate:37.50% 81.98%}41.3%{translate:40.00% 73.02%}43.5%{translate:42.50% 59.92%}45.7%{translate:45.00% 47.11%}47.8%{translate:47.50% 39.28%}50.0%{translate:50.00% 36.96%}52.2%{translate:52.50% 39.28%}54.3%{translate:55.00% 47.11%}56.5%{translate:57.50% 59.92%}58.7%{translate:60.00% 73.02%}60.9%{translate:62.50% 81.98%}63.0%{translate:65.00% 86.24%}65.2%{translate:67.50% 86.72%}67.4%{translate:70.00% 82.68%}69.6%{translate:72.50% 72.50%}71.7%{translate:75.00% 55.79%}73.9%{translate:77.50% 36.89%}76.1%{translate:80.00% 23.34%}78.3%{translate:82.50% 17.73%}80.4%{translate:85.00% 18.78%}82.6%{translate:87.50% 26.97%}84.8%{translate:90.00% 42.93%}87.0%{translate:92.50% 61.95%}89.1%{translate:95.00% 76.65%}91.3%{translate:97.50% 84.64%}93.5%{translate:100.00% 86.96%}95.7%{translate:102.50% 86.96%}97.8%{translate:105.00% 86.96%}100.0%{translate:107.50% 86.96%}}
@keyframes wave-tilt{0.0%{rotate:0.0deg}2.2%{rotate:0.0deg}4.3%{rotate:0.0deg}6.5%{rotate:-0.2deg}8.7%{rotate:-3.6deg}10.9%{rotate:-8.3deg}13.0%{rotate:-13.6deg}15.2%{rotate:-16.0deg}17.4%{rotate:-11.9deg}19.6%{rotate:-4.4deg}21.7%{rotate:2.0deg}23.9%{rotate:8.8deg}26.1%{rotate:14.3deg}28.3%{rotate:14.9deg}30.4%{rotate:11.1deg}32.6%{rotate:5.9deg}34.8%{rotate:1.3deg}37.0%{rotate:-4.5deg}39.1%{rotate:-12.4deg}41.3%{rotate:-19.8deg}43.5%{rotate:-22.9deg}45.7%{rotate:-18.9deg}47.8%{rotate:-9.6deg}50.0%{rotate:-0.0deg}52.2%{rotate:9.6deg}54.3%{rotate:18.9deg}56.5%{rotate:22.9deg}58.7%{rotate:19.8deg}60.9%{rotate:12.4deg}63.0%{rotate:4.5deg}65.2%{rotate:-3.0deg}67.4%{rotate:-13.1deg}69.6%{rotate:-22.6deg}71.7%{rotate:-27.8deg}73.9%{rotate:-26.2deg}76.1%{rotate:-17.2deg}78.3%{rotate:-4.1deg}80.4%{rotate:8.5deg}82.6%{rotate:20.9deg}84.8%{rotate:27.6deg}87.0%{rotate:26.7deg}89.1%{rotate:19.7deg}91.3%{rotate:9.6deg}93.5%{rotate:0.6deg}95.7%{rotate:0.0deg}97.8%{rotate:0.0deg}100.0%{rotate:0.0deg}}