/* Owed homepage revamp (scroll.js): stacked sheets, pinned hero, lit words, ribbon, scroll
   stage, dealt cards, firms brief. Same fun style as style.css: flat fills, ink outlines, flat
   offset shadows. Base styles are the finished state, so the page reads fine without JS;
   ".js" rules add the starting states that scrolling undoes. */

/* Sheets: each section slides over the one before with rounded top corners */
.home > section { padding-bottom: calc(clamp(64px, 10vw, 128px) + 36px); }
.home > section:last-child { padding-bottom: clamp(64px, 10vw, 128px); }
.sheet { border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 36px 36px 0 0; margin: -36px -1.5px 0; }
@media (max-width: 640px) { .sheet { border-radius: 26px 26px 0 0; } }

/* Pinned hero: stays put and settles back while the next sheet covers it */
.js .hero.pin { position: sticky; top: var(--pin-top, 0px); z-index: 0; }
.js .hero.pin .hero-grid { transform: scale(calc(1 - var(--cover, 0) * 0.06)); opacity: calc(1 - var(--cover, 0) * 0.55); transform-origin: 50% 40%; }
.sparkle { transform: translateY(calc(var(--drift, 0) * 1px)) rotate(calc(var(--drift, 0) * 0.4deg)); }

/* Statement: words light up as you scroll */
.statement { padding-top: clamp(88px, 13vw, 168px); }
.home > .statement { padding-bottom: calc(clamp(88px, 13vw, 168px) + 28px); }
.say { margin-top: 22px; max-width: 17em; font-size: clamp(32px, 5.4vw, 70px); line-height: 1.08; }
.say .hl { background: linear-gradient(var(--yellow), var(--yellow)) no-repeat left center / 100% 100%; transition: background-size 0.5s ease; }
.js .say .w { opacity: 0.16; transition: opacity 0.3s ease; }
.js .say .w.lit { opacity: 1; }
.js .say .hl:not(.lit) { background-size: 0% 100%; }

/* Ribbon: a tilted ink band whose words slide as you scroll */
.ribbon {
  position: relative; z-index: 3; height: 56px; margin: -28px -3vw; transform: rotate(-1.5deg);
  background: var(--ink); color: var(--yellow); overflow: hidden; display: flex; align-items: center;
}
.ribbon-shift { transform: translateX(calc(var(--shift, 0) * -1px)); will-change: transform; }
.ribbon-track { display: flex; width: max-content; }
.js .ribbon-track.run { animation: ribbon 36s linear infinite; }
.ribbon-group { display: flex; flex: none; align-items: center; }
.ribbon-group span { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; padding: 0 20px; }
.ribbon-group b { color: var(--white); font-size: 14px; }
@keyframes ribbon { to { transform: translateX(calc(-100% / 6)); } }

/* For individuals: steps on the left, a card on the right that changes with each step */
.stagey { padding-top: clamp(84px, 11vw, 140px); }
.stage-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.stage-copy { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; align-items: start; }
.stage-copy .step-num { grid-row: span 2; margin: 0; }
.stage-copy h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; }
.stage-copy p { font-size: 18px; margin-top: 10px; max-width: 24em; }
.panel { margin-top: 28px; display: grid; place-items: center; }
.stage { display: none; }

.stage-on .stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.stage-on .stage-steps { gap: 0; position: relative; padding-left: 28px; }
.stage-on .stage-steps::before, .stage-on .stage-steps::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--white); }
.stage-on .stage-steps::after { background: var(--ink); transform-origin: top; transform: scaleY(var(--rail, 0)); }
.stage-on .stage-step { min-height: 62vh; display: flex; align-items: center; opacity: 0.3; transition: opacity 0.35s ease; }
.stage-on .stage-step.on { opacity: 1; }
.stage-on .stage-step .step-num { transition: background-color 0.35s ease, transform 0.35s cubic-bezier(.3,1.6,.5,1); }
.stage-on .stage-step.on .step-num { background: var(--yellow); transform: scale(1.1); }
.stage-on .stage { display: block; position: sticky; top: calc(50vh - 230px); height: 460px; }
.stage-on .stage-card { position: relative; height: 100%; }
.stage-on .stage .panel { position: absolute; inset: 0; margin: 0; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.3,1.2,.4,1); }
.stage-on .stage .panel:not(.on) { opacity: 0; transform: translateY(26px) scale(0.96); pointer-events: none; }

.stamp {
  display: inline-block; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tomato); background: var(--white); border: 2.5px solid var(--tomato); padding: 8px 12px; transform: rotate(-8deg);
  transition: transform 0.4s cubic-bezier(.3,1.8,.5,1), opacity 0.2s ease;
}

.art-consent { width: min(360px, 100%); position: relative; padding-bottom: 34px; }
.perm { list-style: none; margin: 4px 0 0; padding: 0; }
.perm li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1.5px solid var(--oat); font-size: 18px; font-weight: 500; }
.perm li:last-child { border-bottom: 0; }
.perm i { width: 26px; height: 26px; flex: none; border: 1.5px solid var(--ink); display: grid; place-items: center; font-style: normal; font-size: 15px; line-height: 1; transition: background-color 0.3s ease; }
.perm-yes i { background: var(--yellow); }
.perm-yes i::before { content: "✓"; transition: transform 0.35s cubic-bezier(.3,1.8,.5,1); }
.perm-no i { border-radius: 50%; background: var(--oat); }
.perm-no i::before { content: "✕"; font-size: 12px; }
.perm-no span { position: relative; color: var(--moss); }
.perm-no span::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 2px; background: var(--ink); transform-origin: left; transition: transform 0.4s ease; }
.art-consent .stamp { position: absolute; right: -14px; bottom: -16px; }
.js .panel:not(.on) .perm-yes i { background: var(--white); }
.js .panel:not(.on) .perm-yes i::before { transform: scale(0); }
.js .panel:not(.on) .perm-no span::after { transform: scaleX(0); }
.js .panel:not(.on) .stamp, .js .stamp[data-at]:not(.on) { transform: rotate(-8deg) scale(1.9); opacity: 0; }
.panel.on .perm-yes i, .panel.on .perm-yes i::before { transition-delay: 0.35s; }
.panel.on .perm-no:nth-child(2) span::after { transition-delay: 0.7s; }
.panel.on .perm-no:nth-child(3) span::after { transition-delay: 0.9s; }
.panel.on .perm-no:nth-child(4) span::after { transition-delay: 1.1s; }
.panel.on .stamp { transition-delay: 1.5s; }

.art-inbox { width: min(400px, 100%); position: relative; overflow: hidden; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 10px 12px; margin: 0 -12px; border-bottom: 1.5px solid var(--oat); font-size: 14px; line-height: 1.3; opacity: 0.4; transition: opacity 0.4s ease, background-color 0.4s ease; }
.rows li:last-child { border-bottom: 0; }
.rows b { font-size: 15px; }
.rows span { grid-column: 1; color: var(--moss); }
.rows .hit { background: var(--yellow); opacity: 1; }
.rows .hit span { color: var(--ink); }
.rows em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--display); font-weight: 700; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--white); border: 1.5px solid var(--ink); padding: 4px 6px; transition: transform 0.35s cubic-bezier(.3,1.8,.5,1); }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ink); opacity: 0; pointer-events: none; }
.js .panel:not(.on) .rows li { opacity: 1; background: transparent; }
.js .panel:not(.on) .rows em { transform: scale(0); }
.panel.on .rows li { transition-delay: 1.7s; }
.panel.on .rows li.hit:nth-child(1), .panel.on .rows li.hit:nth-child(1) em { transition-delay: 0.55s; }
.panel.on .rows li.hit:nth-child(3), .panel.on .rows li.hit:nth-child(3) em { transition-delay: 1.05s; }
.js .panel.on .scan { animation: scan 1.7s ease-in-out 0.2s both; }
@keyframes scan { 0% { top: 12%; opacity: 1; } 90% { top: 96%; opacity: 1; } 100% { top: 96%; opacity: 0; } }

.art-phone { width: min(300px, 100%); background: var(--white); border: 1.5px solid var(--ink); border-radius: 34px; box-shadow: 10px 10px 0 var(--ink); padding: 30px 16px 20px; position: relative; }
.art-phone::before { content: ""; position: absolute; top: 11px; left: 50%; width: 30%; height: 7px; transform: translateX(-50%); background: var(--oat); border: 1px solid var(--ink); border-radius: 7px; }
.art-phone .bubble { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.3,1.5,.5,1); }
.art-phone .bubble:last-child { margin-bottom: 0; }
.js .panel:not(.on) .art-phone .bubble { opacity: 0; transform: translateY(12px) scale(0.94); }
.panel.on .art-phone .bubble:nth-child(1) { transition-delay: 0.25s; }
.panel.on .art-phone .bubble:nth-child(2) { transition-delay: 0.8s; }
.panel.on .art-phone .bubble:nth-child(3) { transition-delay: 1.3s; }
.panel.on .art-phone .bubble:nth-child(4) { transition-delay: 1.9s; }

/* What we look for: the starburst turns as you scroll; the O sticker rolls in */
.burst svg { transform: rotate(calc(var(--spin, 0) * 1deg)); }
.sticker { transform: rotate(calc(-12deg + var(--spin, 0) * 1deg)); }

/* The deal: four cards dealt out of one stack (wide screens; scroll.js sets --t from 0 to 1) */
.dealing .card {
  transform: translate(calc(var(--dx, 0) * (1 - var(--t, 1)) * 1px), calc((1 - var(--t, 1)) * 60px)) rotate(calc(var(--rot, 0) * (1 - var(--t, 1)) * 1deg));
  will-change: transform;
}

/* For firms */
.firms-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .firms-grid { grid-template-columns: 1fr; } }
.checks { list-style: none; margin: 30px 0 36px; padding: 0; display: grid; gap: 16px; max-width: 34em; }
.checks li { position: relative; padding-left: 42px; font-size: 17px; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-size: 13px; }
.firms-note { margin-top: 22px; font-size: 14px; max-width: 36em; }
.brief { position: relative; padding-bottom: 44px; }
.brief dl { margin: 0; }
.brief-row { padding: 14px 0; border-bottom: 1.5px solid var(--oat); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.3,1.3,.4,1); }
.brief-row:last-child { border-bottom: 0; }
.brief dt { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss); margin-bottom: 5px; }
.brief dd { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.3; }
.yes-chip { display: inline-block; font-size: 14px; font-weight: 600; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 11px; margin: 2px 6px 2px 0; transition: transform 0.35s cubic-bezier(.3,1.8,.5,1); }
.brief .stamp { position: absolute; right: -12px; bottom: -14px; }
.js .brief-row:not(.on) { opacity: 0; transform: translateX(22px); }
.js .brief-row:not(.on) .yes-chip { transform: scale(0); }
.brief-row.on .yes-chip:nth-child(2) { transition-delay: 0.12s; }
.brief-row.on .yes-chip:nth-child(3) { transition-delay: 0.24s; }
@media (max-width: 640px) { .art-consent .stamp, .brief .stamp { right: 6px; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero.pin { position: relative; top: 0; }
  .js .hero.pin .hero-grid, .sparkle, .burst svg { transform: none; opacity: 1; }
  .js .ribbon-track.run, .js .panel.on .scan { animation: none; }
}