/* The homepage. Everything the four pillar stage, the scenario card, the
   brand wheel and the scroll-driven settling need beyond brand.css. */
main { overflow-x: clip; }


/* The one orchestrated moment on load: the columns rise, the lintel settles. */
@keyframes rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes bloom { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.settle { animation: settle .7s cubic-bezier(.2,.7,.2,1) .46s both; }
.bloom { animation: bloom .9s ease .6s both; }
.pop { animation: pop .38s cubic-bezier(.2,.7,.2,1) both; }

/* Moving through the page. Three scroll-driven behaviours, one system: the
   content of each section settles in as it enters; a stone hairline draws
   across its top edge; a faint reticle behind it lags the scroll, so there is
   depth between the background and what you are reading. Pure CSS, so it
   costs nothing on the main thread, and browsers without it, or with reduced
   motion on, simply show the finished state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view();
              animation-range: entry 0% entry 60%; }
    @keyframes reveal { from { opacity: 0; transform: translateY(44px) scale(.985); }
                        to { opacity: 1; transform: none; } }
    .rule { animation: draw linear both; animation-timeline: view();
            animation-range: entry 5% entry 65%; transform-origin: left center; }
    @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .drift { animation: drift linear both; animation-timeline: view();
             animation-range: entry 0% exit 100%; }
    @keyframes drift { from { transform: translateY(-90px); } to { transform: translateY(90px); } }
    /* The person block recedes faster than the pillars as you scroll away, so
       the hero has depth rather than just sliding off. */
    .recede { animation: recede linear both; animation-timeline: view();
              animation-range: exit 0% exit 100%; }
    @keyframes recede { to { transform: translateY(-110px); opacity: .25; } }
  }
}

/* The scope from the logo is the pointer over the hero, hotspot at its centre. */
#top { cursor: url(cursor/scope-32.png) 16 16, auto; }
#top { cursor: -webkit-image-set(url(cursor/scope-64.png) 2x, url(cursor/scope-32.png) 1x) 16 16, auto; }
#top { cursor: image-set(url(cursor/scope-64.png) 2x, url(cursor/scope-32.png) 1x) 16 16, auto; }
.pcol { cursor: inherit !important; }
.pcol:focus-visible { outline: 3px solid #7ACBEA; outline-offset: 6px; border-radius: 10px; }

/* Everything that can be pressed presses. */
.btn { transition: transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s ease, filter .18s ease; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px) scale(.98); }
.lnk { transition: color .18s ease, transform .18s ease; }
.lnk:hover { color: #FFFFFF !important; }
.lnk:active { transform: translateY(1px); }
.pcol img { transition: transform .16s cubic-bezier(.2,.7,.3,1); }
.pcol:active img { transform: translateY(3px); }

/* The founder figure sits straight on the navy. The fade hides the crop line
   at the bottom; the generated video takes the same slot and the same fade. */
.figure { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0) 100%); }

/* The wheel of brands: one track, two copies of the set, moved to minus half
   its width so it loops with no seam. Pauses on hover. Full bleed, edges
   faded by a mask. Logos ride full color on warm stone chips; a group label
   rides in the track ahead of its group. */
.wheel { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 9%, #000 91%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 9%, #000 91%, rgba(0,0,0,0) 100%); }
.track { display: flex; width: max-content; animation: wheel 64s linear infinite; }
.set { display: flex; align-items: center; gap: 18px; padding-right: 18px; }
@keyframes wheel { to { transform: translateX(-50%); } }
.wheel:hover .track { animation-play-state: paused; }
.chip { display: inline-flex; align-items: center; justify-content: center; flex: none;
        height: 64px; padding: 0 24px; border-radius: 10px; background: rgba(244,241,236,.94); }
.chip img { display: block; height: 34px; width: auto; max-width: 160px; object-fit: contain; }
.word { display: inline-flex; align-items: center; flex: none; height: 64px; padding: 0 22px;
        border-radius: 10px; border: 1px solid rgba(244,241,236,.35); color: #F4F1EC;
        font-family: 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 1.02rem;
        letter-spacing: -.01em; white-space: nowrap; }
.wlabel { display: inline-flex; align-items: center; flex: none; height: 64px; padding-left: 14px;
          margin-left: 10px; border-left: 2px solid #7ACBEA; color: #7ACBEA; white-space: nowrap;
          font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: .98rem; }

/* A short column beside a tall one follows the scroll instead of leaving a
   hole under itself. Off below 900px, where the columns stack. */
@media (min-width: 901px) { .sticky { position: sticky; top: 32px; } }

/* Small laptops: the description column is narrow, so its type tightens. */
@media (max-width: 1140px) {
  .panel p { font-size: .92rem !important; line-height: 1.38 !important; }
  .panel h2 { font-size: 1.2rem !important; }
}

/* Below 900px the stage does not have the width it needs, so tablets and
   phones keep the row at a smaller scale, the role line leaves, names may
   wrap, and the description sits under the row instead of beside it. Three
   tiers of column size so the four hit areas never overlap. */
@media (max-width: 900px) {
  .stage { height: 550px !important; }
  .stone { zoom: .62; }
  .pcol { width: 140px !important; }
  .pname { font-size: .95rem !important; white-space: normal !important; }
  .prole { display: none !important; }
  .panel { position: static !important; opacity: 1 !important; transform: none !important;
           visibility: visible !important; pointer-events: auto !important; margin-top: 18px;
           scroll-margin-top: 16px; }
  .showall { display: none !important; }
  .topgrid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .stage { height: 470px !important; }
  .stone { zoom: .5; }
  .pcol { width: 100px !important; }
  .pname { font-size: .88rem !important; }
}
@media (max-width: 480px) {
  .stage { height: 440px !important; }
  .stone { zoom: .45; }
  .pcol { width: 84px !important; }
  .pname { font-size: .84rem !important; }
  nav[aria-label="Main"] { gap: 10px 14px !important; }
  nav[aria-label="Main"] a { font-size: .9rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .settle, .bloom, .pop { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pcol, .pcol img, .stone, .panel { transition: none !important; }
  .track { animation: none; width: auto; }
  .set { flex-wrap: wrap; padding: 0 24px 24px; }
  .set + .set { display: none; }
  .wheel { -webkit-mask-image: none; mask-image: none; }
}