.duck-web {
  --duck-ink: #171512;
  --duck-yellow: #ffc533;
  --duck-paper: #fff7df;
  --duck-cyan: #55c3ce;
  --duck-purple: #7554c8;
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 0 0 clamp(10rem, 14vw, 18rem);
  margin-left: calc(50% - 50vw);
  color: var(--duck-ink);
  background: var(--duck-paper);
  overflow: clip;
}

.duck-web *, .duck-web *::before, .duck-web *::after { box-sizing: border-box; }
.duck-web img { display: block; max-width: 100%; height: auto; }
.duck-web h1, .duck-web h2, .duck-web h3, .duck-web p, .duck-web figure { margin: 0; color: inherit; }
.duck-web__eyebrow { color: #ef4c3d; font: 800 1.1rem/1.2 var(--_font-accent); letter-spacing: .08em; }

.duck-web__hero {
  display: grid;
  grid-template-columns: 60% 40%;
  min-height: 100svh;
  padding-top: 10rem;
  background: var(--duck-ink);
  color: #fff;
}

.duck-web__hero-copy { position: relative; display: flex; min-height: calc(100svh - 10rem); flex-direction: column; padding: clamp(3rem, 5vw, 7rem); }
.duck-web__brand { font: 800 1.5rem/1 var(--_font-default); }
.duck-web__hero-title { margin: auto 0; }
.duck-web__hero-title h1 { margin: 2.4rem 0 3rem; font-size: clamp(6rem, 8vw, 12rem); line-height: .86; letter-spacing: -.065em; }
.duck-web__hero-title h1 span { color: var(--duck-yellow); }
.duck-web__hero-title i, .duck-web__closing i { display: block; width: 14rem; border-top: .5rem solid var(--duck-yellow); }
.duck-web__hero-title > p:last-child { max-width: 23ch; margin-top: 3.4rem; color: #cbc7c1; font-size: clamp(1.7rem, 2vw, 2.5rem); line-height: 1.55; }
.duck-web__scroll { display: flex; justify-content: space-between; width: min(100%, 33rem); color: #fff; font: 700 1.1rem/1 var(--_font-accent); letter-spacing: .06em; text-decoration: none; }

.duck-web__hero-visual { position: relative; display: grid; min-width: 0; place-items: center; overflow: hidden; background: var(--duck-yellow); }
.duck-web__hero-visual::before { position: absolute; inset: 4rem; border: 1px solid rgba(23, 21, 18, .22); content: ""; }
.duck-web__hero-visual .duck-web__sun { position: absolute; width: min(34vw, 48rem); aspect-ratio: 1; border: 1px solid rgba(23, 21, 18, .2); border-radius: 50%; transform: scale(var(--duck-hero-scale, .75)); }
.duck-web__hero-visual img { position: relative; z-index: 2; width: min(43vw, 69rem); transform: translate3d(0, var(--duck-hero-y, 2rem), 0) rotate(var(--duck-hero-r, -3deg)); filter: drop-shadow(0 3rem 3rem rgba(78, 47, 0, .22)); }
.duck-web__hero-visual b { position: absolute; right: 2rem; bottom: 2rem; font: 900 clamp(4rem, 7vw, 10rem)/.78 var(--_font-accent); letter-spacing: -.07em; color: rgba(23, 21, 18, .1); text-align: right; }

.duck-web__section-head { position: relative; z-index: 2; max-width: 90rem; }
.duck-web__section-head h2 { margin: 2rem 0 2.4rem; font-size: clamp(5rem, 7vw, 10rem); line-height: .93; letter-spacing: -.06em; }
.duck-web__section-head > p:last-child:not(.duck-web__eyebrow) { max-width: 38ch; color: rgba(23, 21, 18, .62); font-size: clamp(1.6rem, 1.8vw, 2.2rem); line-height: 1.6; }
.duck-web__section-head--light h2 { color: #fff; }
.duck-web__section-head--light > p:last-child:not(.duck-web__eyebrow) { color: rgba(255, 255, 255, .62); }

.duck-web__values { position: relative; min-height: 110svh; padding: clamp(10rem, 14vw, 18rem) clamp(3rem, 7vw, 10rem); background: var(--duck-paper); }
.duck-web__value-list { position: relative; z-index: 2; width: 62%; margin-top: clamp(6rem, 9vw, 12rem); }
.duck-web__value-list article { display: grid; grid-template-columns: 7rem 13rem 1fr; align-items: center; min-height: 9rem; border-top: 1px solid rgba(23, 21, 18, .18); }
.duck-web__value-list article:last-child { border-bottom: 1px solid rgba(23, 21, 18, .18); }
.duck-web__value-list span { color: #ef4c3d; font: 700 1.1rem/1 var(--_font-accent); }
.duck-web__value-list h3 { font-size: clamp(2.5rem, 3vw, 4.4rem); }
.duck-web__value-list p { color: rgba(23, 21, 18, .56); font-size: 1.7rem; }
.duck-web__value-duck { position: absolute; right: -4%; bottom: -3%; width: min(43vw, 62rem); transform: translate3d(0, var(--duck-float-y, 0), 0) rotate(5deg); filter: drop-shadow(0 3rem 3rem rgba(66, 45, 12, .12)); }

.duck-web__emotions { min-height: 180svh; background: var(--duck-ink); }
.duck-web__sticky { position: sticky; top: 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 5vw; min-height: 100svh; align-items: center; padding: 12rem clamp(3rem, 7vw, 10rem) 6rem; overflow: hidden; }
.duck-web__emotion-cloud { position: relative; min-height: min(70vw, 75rem); }
.duck-web__emotion-cloud figure { position: absolute; width: min(17vw, 25rem); aspect-ratio: .72; overflow: hidden; transform: translate3d(var(--card-x, 0), var(--card-y, 8rem), 0) rotate(var(--card-r, 0deg)); transition: transform 900ms cubic-bezier(.16,1,.3,1), opacity 700ms ease; opacity: .18; }
.duck-web__emotion-cloud figure.is-active { transform: translate3d(var(--card-x, 0), 0, 0) rotate(var(--card-r, 0deg)); opacity: 1; }
.duck-web__emotion-cloud figure:nth-child(1) { left: 3%; top: 12%; --card-r: -7deg; }
.duck-web__emotion-cloud figure:nth-child(2) { left: 29%; top: 2%; --card-r: 4deg; }
.duck-web__emotion-cloud figure:nth-child(3) { left: 54%; top: 15%; --card-r: -2deg; }
.duck-web__emotion-cloud figure:nth-child(4) { left: 18%; top: 48%; --card-r: 5deg; }
.duck-web__emotion-cloud figure:nth-child(5) { left: 49%; top: 54%; --card-r: -5deg; }
.duck-web__emotion-cloud img { width: 100%; height: calc(100% - 4.2rem); object-fit: contain; padding: 1.5rem; }
.duck-web__emotion-cloud figcaption { display: grid; height: 4.2rem; place-items: center; background: var(--duck-ink); color: #fff; font-size: 1.8rem; }
.duck-web__emotion-cloud .is-cream { background: #f5e7c4; }.duck-web__emotion-cloud .is-lilac { background: #dcd0f6; }.duck-web__emotion-cloud .is-yellow { background: #ffe46d; }.duck-web__emotion-cloud .is-pink { background: #f2ada8; }.duck-web__emotion-cloud .is-blue { background: #cde6ea; }

.duck-web__roles { padding: clamp(10rem, 13vw, 17rem) 0 clamp(8rem, 11vw, 14rem); background: var(--duck-cyan); }
.duck-web__roles .duck-web__section-head { padding-inline: clamp(3rem, 7vw, 10rem); }
.duck-web__role-marquee { margin-top: 7rem; overflow: hidden; }
.duck-web__role-track { display: flex; width: max-content; gap: 2rem; animation: duck-role-marquee 34s linear infinite; }
.duck-web__role-track figure { width: clamp(18rem, 19vw, 30rem); flex: none; background: var(--duck-paper); }
.duck-web__role-track img { width: 100%; aspect-ratio: .85; object-fit: contain; padding: 1.5rem; }
.duck-web__role-track figcaption { padding: 1.4rem; border-top: 1px solid rgba(23,21,18,.18); font: 700 1.1rem/1 var(--_font-accent); letter-spacing: .08em; }
@keyframes duck-role-marquee { to { transform: translateX(calc(-50% - 1rem)); } }

.duck-web__campaign { position: relative; height: 420svh; background: var(--duck-paper); }
.duck-web__campaign-sticky { position: sticky; top: 0; display: grid; min-height: 100svh; align-content: center; padding: 10rem 0 3rem; overflow: hidden; }
.duck-web__campaign .duck-web__section-head { display: grid; grid-template-columns: 18rem minmax(0, 1fr) minmax(26rem, .55fr); gap: 3rem; max-width: none; align-items: end; padding-inline: clamp(3rem, 7vw, 10rem); }
.duck-web__campaign .duck-web__section-head h2 { margin: 0; font-size: clamp(4.4rem, 5vw, 7.4rem); }
.duck-web__poster-window { margin-top: clamp(3rem, 5vh, 6rem); overflow: visible; }
.duck-web__poster-track { display: flex; width: max-content; gap: clamp(1.4rem, 2vw, 3rem); padding-left: clamp(3rem, 7vw, 10rem); transform: translate3d(var(--poster-x, 0), 0, 0); will-change: transform; }
.duck-web__poster-track figure { width: clamp(18rem, 19vw, 29rem); flex: none; }
.duck-web__poster-track img { width: 100%; height: auto; box-shadow: 0 2rem 5rem rgba(70, 50, 10, .12); }
.duck-web__poster-track figcaption { margin-top: 1rem; color: rgba(23,21,18,.55); font: 700 1rem/1 var(--_font-accent); }
.duck-web__campaign-progress { width: calc(100% - clamp(6rem, 14vw, 20rem)); height: 2px; margin: 3rem auto 0; background: rgba(23,21,18,.15); }
.duck-web__campaign-progress span { display: block; width: var(--campaign-progress, 0%); height: 100%; background: #ef4c3d; }

.duck-web__pillars { padding: clamp(10rem, 14vw, 18rem) clamp(3rem, 7vw, 10rem); background: var(--duck-ink); }
.duck-web__pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8rem; }
.duck-web__pillar-grid article { position: relative; min-height: 50rem; padding: 3rem; overflow: hidden; color: #fff; }
.duck-web__pillar-grid article:nth-child(1) { background: #ef5143; }.duck-web__pillar-grid article:nth-child(2) { background: var(--duck-cyan); }.duck-web__pillar-grid article:nth-child(3) { background: #8bc93e; }.duck-web__pillar-grid article:nth-child(4) { background: var(--duck-purple); }
.duck-web__pillar-grid span { font: 700 1.1rem/1 var(--_font-accent); }
.duck-web__pillar-grid h3 { position: relative; z-index: 2; margin-top: 2rem; font-size: clamp(2.5rem, 2.6vw, 4.3rem); }
.duck-web__pillar-grid p { position: relative; z-index: 2; margin-top: 1rem; font-size: 1.5rem; }
.duck-web__pillar-grid img { position: absolute; right: -20%; bottom: -10%; width: 120%; transform: translate3d(0, 16%, 0) rotate(-5deg); transition: transform 900ms cubic-bezier(.16,1,.3,1); }
.duck-web__pillar-grid article.is-visible img { transform: translate3d(0, 0, 0) rotate(0); }

.duck-web__closing { display: grid; grid-template-columns: 1fr 42%; min-height: 100svh; padding: 12rem clamp(3rem, 7vw, 10rem) 7rem; align-items: center; background: var(--duck-purple); color: #fff; }
.duck-web__closing h2 { margin: 2rem 0 3rem; font-size: clamp(5rem, 7vw, 10rem); line-height: .92; letter-spacing: -.06em; }
.duck-web__closing div > p:last-child { max-width: 30ch; margin-top: 3rem; color: rgba(255,255,255,.7); font-size: 1.8rem; line-height: 1.55; }
.duck-web__closing img { width: 100%; filter: drop-shadow(0 3rem 4rem rgba(21,12,48,.25)); animation: duck-closing-float 4s ease-in-out infinite; }
@keyframes duck-closing-float { 50% { transform: translateY(-2.5rem) rotate(3deg); } }

[data-duck-reveal] { opacity: 0; transform: translate3d(0, 5rem, 0); transition: opacity 850ms ease, transform 900ms cubic-bezier(.16,1,.3,1); }
[data-duck-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

@media (max-width: 800px) {
  .duck-web__hero { grid-template-columns: 1fr; padding-top: 8rem; }
  .duck-web__hero-copy { min-height: 68svh; padding: 3rem; }
  .duck-web__hero-title h1 { font-size: clamp(6rem, 20vw, 8.8rem); }
  .duck-web__hero-visual { min-height: 62svh; }
  .duck-web__hero-visual::before { inset: 2rem; }
  .duck-web__hero-visual img { width: min(108vw, 58rem); }
  .duck-web__hero-visual .duck-web__sun { width: 80vw; }
  .duck-web__values { min-height: auto; padding: 10rem 3rem 0; }
  .duck-web__section-head h2 { font-size: clamp(4.7rem, 14vw, 7rem); }
  .duck-web__value-list { width: 100%; margin-top: 5rem; }
  .duck-web__value-list article { grid-template-columns: 4.5rem 8rem 1fr; min-height: 8rem; }
  .duck-web__value-list p { font-size: 1.35rem; }
  .duck-web__value-duck { position: relative; right: auto; bottom: auto; width: 115%; max-width: none; margin: 5rem -7.5% -4rem; }
  .duck-web__emotions { min-height: auto; }
  .duck-web__sticky { position: relative; grid-template-columns: 1fr; min-height: auto; padding: 10rem 3rem; }
  .duck-web__emotion-cloud { min-height: 75rem; margin-top: 3rem; }
  .duck-web__emotion-cloud figure { width: 43%; }
  .duck-web__emotion-cloud figure:nth-child(1) { left: 2%; }.duck-web__emotion-cloud figure:nth-child(2) { left: 52%; }.duck-web__emotion-cloud figure:nth-child(3) { left: 8%; top: 33%; }.duck-web__emotion-cloud figure:nth-child(4) { left: 54%; top: 39%; }.duck-web__emotion-cloud figure:nth-child(5) { left: 28%; top: 68%; }
  .duck-web__roles { padding-block: 9rem; }
  .duck-web__roles .duck-web__section-head { padding-inline: 3rem; }
  .duck-web__role-track figure { width: 20rem; }
  .duck-web__campaign { height: 360svh; }
  .duck-web__campaign-sticky { padding-top: 9rem; }
  .duck-web__campaign .duck-web__section-head { grid-template-columns: 1fr; gap: 1.5rem; padding-inline: 3rem; }
  .duck-web__campaign .duck-web__section-head h2 { font-size: clamp(4.2rem, 13vw, 6rem); }
  .duck-web__poster-track { padding-left: 3rem; }
  .duck-web__poster-track figure { width: 21rem; }
  .duck-web__pillars { padding: 10rem 3rem; }
  .duck-web__pillar-grid { grid-template-columns: 1fr 1fr; margin-top: 5rem; }
  .duck-web__pillar-grid article { min-height: 32rem; padding: 2rem; }
  .duck-web__closing { grid-template-columns: 1fr; min-height: auto; padding: 10rem 3rem 4rem; }
  .duck-web__closing h2 { font-size: clamp(4.8rem, 14vw, 7rem); }
  .duck-web__closing img { width: 120%; max-width: none; margin: 2rem -10% -3rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-duck-reveal], .duck-web__emotion-cloud figure { opacity: 1 !important; transform: none !important; transition: none !important; }
  .duck-web__role-track, .duck-web__closing img { animation: none !important; }
  .duck-web__poster-track { transform: none !important; overflow-x: auto; }
}