/* ==========================================================================
   AIIMS redesign · Footer stack · Round 1 "A Refined" (approved 8 Oct 2026)
   Creator Hub (shows + brand partners carousel) → Make your MARK (original) → Footer
   Brand: black #0E0E0E, raised #171717, orange #F5412C, stone #9A9E8E, grey #EFEFEF.
   4px corners. Mono kickers with a 1.2px orange rule. Branded hover on buttons.
   ========================================================================== */
.ahf-hub,.ahf{--f-black:#0E0E0E;--f-raised:#171717;--f-orange:#F5412C;--f-stone:#9A9E8E;--f-grey:#EFEFEF;
  --f-g72:rgba(239,239,239,.72);--f-line:rgba(239,239,239,.1);--f-line2:rgba(239,239,239,.28);
  --f-sans:"Interphases","TT Interphases Pro","Helvetica Neue",Arial,sans-serif;--f-mono:"InterphasesMono","TT Interphases Pro Mono",ui-monospace,Menlo,monospace;
  --f-gut:1.5rem;--f-ease:cubic-bezier(.2,.8,.2,1);
  background:var(--f-black);color:var(--f-grey);font-family:var(--f-sans);-webkit-font-smoothing:antialiased}
.ahf-hub *,.ahf *{box-sizing:border-box}
:where(.ahf-hub,.ahf) a{color:inherit;text-decoration:none}
.ahf-hub p,.ahf p,.ahf h2,.ahf ul{margin:0}
.ahf-hub :focus-visible,.ahf :focus-visible{outline:2px solid var(--f-orange);outline-offset:3px}
/* same container as the rest of the site (theme .container): 1510px max with 1.5rem padding = 1462px content */
.ahf-in{width:100%;max-width:1510px;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
@media (max-width:1509px){.ahf-in{max-width:1280px}}
@media (max-width:1279px){.ahf-in{max-width:1024px}}
@media (max-width:1023px){.ahf-in{max-width:768px}}
@media (max-width:767px){.ahf-in{max-width:640px}}

/* shared */
.ahf-kicker{display:inline-block;align-self:flex-start;font:700 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--f-grey);padding-bottom:7px;border-bottom:1.2px solid var(--f-orange);white-space:nowrap}
.ahf-mono{font:700 12px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.ahf-rule{height:1px;background:var(--f-line)}
.ahf-arrow{display:inline-block;transition:transform .2s var(--f-ease)}
.ahf-plus{font-family:"Vandalord",var(--f-sans);font-weight:400;color:var(--f-orange);line-height:1;transition:transform .2s var(--f-ease),color .2s}
.ahf-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:4px;font:600 15px/1 var(--f-sans);white-space:nowrap;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease}
.ahf-btn--primary{background:var(--f-orange);border:1px solid var(--f-orange);color:var(--f-grey)!important}
.ahf-btn--primary:hover,.ahf-btn--primary:focus-visible{background:#fff;border-color:#fff;color:#0E0E0E!important;transform:scale(1.05)}

/* ---------------------------------------------------------------- Creator Hub */
.ahf-hub .ahf-in{padding-top:96px;padding-bottom:72px;display:flex;flex-direction:column;gap:48px}
.ahf-hub__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ahf-hub__brand{display:flex;flex-direction:column;gap:18px}
.ahf-hub__logo{display:inline-flex;align-items:center;gap:10px}
.ahf-hub__logo svg{height:36px;width:auto;display:block}
.ahf-hub__logo span{font:700 15px/15px var(--f-sans);text-transform:uppercase;color:var(--f-grey)}
.ahf-hub__tag{color:var(--f-stone)}
.ahf-block{display:flex;flex-direction:column;gap:24px}
.ahf-shows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ahf-show{position:relative;display:block;aspect-ratio:31/40;border-radius:4px;overflow:hidden;background:var(--f-raised);isolation:isolate}
.ahf-show::after{content:"";position:absolute;inset:0;border:1.2px solid transparent;border-radius:4px;transition:border-color .25s;pointer-events:none;z-index:3}
.ahf-show img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--f-ease)}
.ahf-show__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,14,0) 45%,rgba(14,14,14,.92) 100%);z-index:1}
.ahf-show__badge{position:absolute;left:16px;top:16px;z-index:2;padding:5px 8px;border-radius:4px;background:rgba(14,14,14,.72);font:700 10px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--f-grey)}
.ahf-show__badge.is-live{background:var(--f-orange)}
.ahf-show__body{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:6px}
.ahf-show__title{font:700 22px/26px var(--f-sans);color:var(--f-grey);transition:color .25s}
.ahf-show__host{font:400 12px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--f-stone)}
.ahf-show:hover::after,.ahf-show:focus-visible::after{border-color:var(--f-orange)}
.ahf-show:hover img{transform:scale(1.04)}
.ahf-show:hover .ahf-show__title,.ahf-show:focus-visible .ahf-show__title{color:var(--f-orange)}

/* brand partners carousel (two rows: row 1 scrolls left, row 2 scrolls right, like the original) */
.ahf-partners__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
/* min-width: 'Play' is as wide as 'Pause', so toggling never re-wraps the head row on phones (<=399px) */
.ahf-pause{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:7.5em;height:34px;padding:0 12px;border:1px solid var(--f-line2);border-radius:4px;background:none;color:var(--f-grey);cursor:pointer;
  font:700 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .3s ease}
.ahf-pause svg{width:12px;height:12px}
.ahf-pause:hover,.ahf-pause:focus-visible{background:var(--f-orange);border-color:var(--f-orange);color:#fff;transform:scale(1.05)}
.ahf-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.ahf-marquee+.ahf-marquee{margin-top:-4px}
.ahf-marquee__track{display:flex;gap:16px;width:max-content;padding:2px 0;animation:ahf-left var(--ahf-dur,60s) linear infinite}
.ahf-marquee__track.is-rev{animation-name:ahf-right}
@keyframes ahf-left{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}
@keyframes ahf-right{from{transform:translateX(calc(-50% - 8px))}to{transform:translateX(0)}}
.ahf-partners:hover .ahf-marquee__track,.ahf-partners:focus-within .ahf-marquee__track,.ahf-partners.is-paused .ahf-marquee__track{animation-play-state:paused}
/* keyboard (footer.js adds is-kbd): the rows stop at their start so the focused card can be scrolled into view, clear of the 48px edge fade
   (the inline padding lets the first card clear it too) */
.ahf-marquee{scroll-padding-inline:48px}
.ahf-partners.is-kbd .ahf-marquee__track{animation:none;padding-inline:48px}
.ahf-card{flex:none;width:120px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ahf-card__img{display:block;width:120px;height:120px;border-radius:4px;overflow:hidden;border:1px solid var(--f-line);background:var(--f-raised);transition:border-color .25s,transform .3s var(--f-ease)}
.ahf-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.ahf-card__name{font:600 12px/1.25 var(--f-sans);color:var(--f-g72);text-align:center;transition:color .25s}
.ahf-card:hover .ahf-card__img,.ahf-card:focus-visible .ahf-card__img{border-color:var(--f-orange);transform:translateY(-2px)}
.ahf-card:hover .ahf-card__name,.ahf-card:focus-visible .ahf-card__name{color:var(--f-orange)}

/* ---------------------------------------------------------------- Footer */
.ahf{border-top:1px solid var(--f-line)}
.ahf .ahf-in{padding-top:88px;padding-bottom:40px;display:flex;flex-direction:column;gap:56px}
.ahf-challenger{display:none;font:800 36px/38px var(--f-sans);letter-spacing:-.03em}

/* app (one block - replaces the injected strip + card) */
.ahf-app{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px 32px;background:var(--f-raised);border:1px solid var(--f-line);border-radius:4px}
.ahf-app__copy{display:flex;flex-direction:column;gap:14px;max-width:640px}
.ahf-app__title{font:700 28px/32px var(--f-sans);color:var(--f-grey)}
.ahf-app__sub{font:400 16px/24px var(--f-sans);color:var(--f-g72)}
.ahf-app__stores{display:flex;gap:10px;flex-wrap:wrap}
.ahf-store{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 16px 0 12px;border-radius:4px;color:var(--f-grey);background:rgba(239,239,239,.05);
  transition:background-color .3s ease,color .3s ease,transform .3s ease}
.ahf-store__ic{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}
.ahf-store__ic svg{width:28px;height:28px;display:block}
.ahf-store__txt{display:flex;flex-direction:column;gap:2px}
.ahf-store small{font:700 10px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--f-g72)}
.ahf-store b{font:600 16px/1.1 var(--f-sans)}
.ahf-store:hover,.ahf-store:focus-visible{background:rgba(239,239,239,.12);transform:scale(1.05)}

/* link columns */
.ahf-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.ahf-col__head{display:block;margin:0 0 22px;padding:0;background:none;border:0;cursor:default;color:inherit;text-align:left}
.ahf-col__head .ahf-plus{display:none}
.ahf-col__list,.ahf-sub{list-style:none;padding:0;margin:0}
.ahf-col__list{display:flex;flex-direction:column;gap:14px}
.ahf-link{display:inline;font:400 16px/22px var(--f-sans);color:var(--f-g72);
  background:linear-gradient(var(--f-orange),var(--f-orange)) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:color .2s,background-size .25s var(--f-ease)}
a.ahf-link:hover,a.ahf-link:focus-visible{color:var(--f-orange);background-size:100% 1px}
a.ahf-link:hover .ahf-arrow{transform:translateX(3px)}
.ahf-link.is-soon{font-style:italic;color:var(--f-stone)}
.ahf-link.is-past{text-decoration:line-through;color:var(--f-stone)}
.ahf-link.is-all{font-weight:600;color:var(--f-orange)}

/* inner (sub) menus: on-brand disclosure instead of the white hover dropdown */
.has-sub{display:flex;flex-direction:column}
.ahf-sub__row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ahf-sub__toggle{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:-1px;padding:0 2px;height:24px;background:none;border:0;cursor:pointer;color:inherit}
.ahf-count{font:700 10px/1 var(--f-mono);color:var(--f-stone)}
.ahf-sub__toggle .ahf-plus{font-size:22px}
.ahf-sub__toggle:hover .ahf-plus{transform:rotate(90deg)}
/* desktop: hover (or keyboard focus, or the + button) opens the inner pages in a popup beside the item.
   Keyboard focus only (:focus-visible), so a mouse click on the - can close a pinned popup. */
@media (min-width:761px){
  .has-sub{position:relative}
  .ahf-sub{position:absolute;z-index:20;left:calc(100% + 18px);top:-14px;width:max-content;min-width:240px;max-width:340px;max-height:380px;overflow-y:auto;
    padding:14px 16px 12px;background:var(--f-raised);border:1px solid var(--f-line2);border-left:1.2px solid var(--f-orange);border-radius:4px;
    box-shadow:0 18px 40px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px;
    opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .2s ease,transform .2s var(--f-ease),visibility 0s linear .2s;scrollbar-width:thin;scrollbar-color:var(--f-orange) transparent}
  .ahf-sub::before{content:attr(data-label);display:block;margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--f-line);font:700 11px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--f-orange)}
  /* invisible bridge so the pointer can travel from the item to the popup */
  .has-sub::after{content:"";position:absolute;left:100%;top:-14px;width:22px;height:calc(100% + 28px)}
  .ahf-sub>li{padding:6px 0}
  .ahf-sub .ahf-link{display:block}
  .has-sub:hover>.ahf-sub,.has-sub.is-open>.ahf-sub{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s var(--f-ease),visibility 0s}
  /* :has() rules stand alone so a browser without it drops only these, not the hover rules */
  .has-sub:has(:focus-visible)>.ahf-sub{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s var(--f-ease),visibility 0s}
  /* Esc (or the keyboard -) dismisses a popup that hover or focus holds open; footer.js clears is-shut once both leave the item */
  .has-sub.is-shut>.ahf-sub{opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .2s ease,transform .2s var(--f-ease),visibility 0s linear .2s}
  .has-sub:hover>.ahf-sub__row .ahf-link{color:var(--f-orange)}
  .has-sub:has(:focus-visible)>.ahf-sub__row .ahf-link{color:var(--f-orange)}
  .has-sub:hover>.ahf-sub__row .ahf-plus{transform:rotate(90deg)}
  .has-sub:hover{z-index:21}
}
/* mobile: the same inner pages open in place with the + / - toggle */
@media (max-width:760px){
  .ahf-sub{display:none;border-left:1.2px solid transparent;margin-left:2px}
  .has-sub.is-open>.ahf-sub{display:block;animation:ahf-drop .28s var(--f-ease);border-left-color:var(--f-orange);margin-top:10px;padding:2px 0 2px 12px}
  .has-sub.is-open>.ahf-sub>li{padding:5px 0}
}
@keyframes ahf-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.has-sub.is-open>.ahf-sub__row .ahf-link{color:var(--f-orange)}
/* only the + turns on hover; the - stays level (this beats the two hover rotations above) */
.has-sub.is-open>.ahf-sub__row .ahf-plus{color:var(--f-grey);transform:none}
.ahf-sub .ahf-link{font-size:14px;line-height:20px;color:rgba(239,239,239,.85)}

/* contact + socials */
.ahf-contact{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ahf-contact__l{display:flex;flex-direction:column;gap:24px;max-width:520px}
.ahf-logo svg{height:36px;width:auto;display:block}
.ahf-tabs{display:flex;gap:24px}
.ahf-tab{display:inline-flex;align-items:center;gap:8px;padding:0 0 8px;background:none;border:0;border-bottom:1.2px solid transparent;cursor:pointer;
  font:700 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(239,239,239,.5);transition:color .2s,border-color .2s}
.ahf-tab[aria-selected="true"]{color:var(--f-grey);border-bottom-color:var(--f-orange)}
.ahf-tab:hover{color:var(--f-grey)}
.ahf-flag{display:inline-block;width:20px;height:14px;border-radius:2px;overflow:hidden}
.ahf-flag svg{display:block;width:100%;height:100%}
.ahf-office{display:flex;flex-direction:column;gap:8px}
.ahf-office[hidden]{display:none}
.ahf-office__lines{display:flex;flex-wrap:wrap;gap:6px 24px}
.ahf-office__lines a{font:600 18px/1.3 var(--f-sans);color:var(--f-grey);transition:color .2s}
.ahf-office__lines a:hover{color:var(--f-orange)}
.ahf-office__addr{font:400 16px/24px var(--f-sans);color:var(--f-g72)}
.ahf-office__note{font:700 11px/1.4 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--f-stone)}
.ahf-office__note a{color:var(--f-grey);border-bottom:1px solid var(--f-orange)}
.ahf-office__note a:hover{color:var(--f-orange)}
.ahf-socials{display:flex;gap:10px}
.ahf-social{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .3s ease,transform .3s ease}
.ahf-social svg{width:26px;height:26px;display:block}
.ahf-social:hover,.ahf-social:focus-visible{background:rgba(239,239,239,.08);transform:scale(1.1)}

/* partner + award badges: real artwork, each on the container that suits it */
.ahf-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) repeat(3,88px);gap:12px;align-items:stretch}
.ahf-badge{position:relative;display:flex;align-items:center;justify-content:center;height:88px;border-radius:4px;overflow:hidden;border:1px solid var(--f-line);
  transition:border-color .25s,transform .3s var(--f-ease)}
.ahf-badge img{display:block;max-width:100%;object-fit:contain}
.ahf-badge.is-light{background:var(--f-grey);padding:14px 18px}
.ahf-badge.is-light img{max-height:56px}
.ahf-badge.is-light img[src*="google"]{max-height:76px}
.ahf-badge.is-dark{background:#070908;padding:0}
.ahf-badge.is-dark img{height:100%;width:100%;object-fit:cover}
.ahf-badge.is-award{padding:0;background:var(--f-raised)}
.ahf-badge.is-award img{width:100%;height:100%;object-fit:cover}
.ahf-badge:hover,.ahf-badge:focus-visible{border-color:var(--f-orange);transform:translateY(-2px)}

/* legal */
.ahf-legal{display:flex;justify-content:space-between;align-items:flex-start;gap:48px}
.ahf-legal__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font:400 14px/1.4 var(--f-sans);color:var(--f-g72)}
.ahf-legal__links a{font-weight:600;color:rgba(239,239,239,.85);transition:color .2s}
.ahf-legal__links a:hover{color:var(--f-orange)}
.ahf-sep{color:rgba(239,239,239,.28)}
.ahf-legal__note{max-width:620px;font:400 13px/20px var(--f-sans);color:var(--f-stone)}
.ahf-legal__note strong{font-weight:600;color:var(--f-grey)}
.ahf-markline{display:block;width:100%;height:10px;object-fit:cover}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .ahf-shows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ahf-cols{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px}
  .ahf-badges{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* the award tiles widen to a grid cell here, so show the whole square artwork instead of a cropped strip */
  .ahf-badge.is-award img{object-fit:contain}
}
@media (max-width:860px){
  .ahf-app{flex-direction:column;align-items:flex-start}
  .ahf-legal{flex-direction:column;gap:20px}
}
@media (max-width:760px){
  .ahf-hub .ahf-in{padding-top:64px;padding-bottom:56px;gap:36px}
  .ahf-hub__head{flex-direction:column;align-items:stretch}
  .ahf-hub__head .ahf-btn{justify-content:center}
  /* scroll-padding keeps the snapped first card on the 24px gutter instead of the screen edge */
  .ahf-shows{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--f-gut);margin:0 calc(-1 * var(--f-gut));padding:0 var(--f-gut);scrollbar-width:none}
  .ahf-shows::-webkit-scrollbar{display:none}
  .ahf-show{flex:none;width:260px;scroll-snap-align:start}
  .ahf-card,.ahf-card__img{width:92px}.ahf-card__img{height:92px}.ahf-card__name{font-size:10px}
  /* the bottom padding lets the legal note scroll clear of the floating buttons: theme #back-top (48px tall at bottom:14%) and the call button below it */
  .ahf .ahf-in{padding-top:56px;padding-bottom:calc(14vh + 56px);gap:36px}
  .ahf-challenger{display:block}
  .ahf-app{padding:24px 20px}
  .ahf-app__title{font-size:24px}
  .ahf-app__stores{flex-direction:column;width:100%}.ahf-store{width:100%}
  /* columns become an accordion with the Vandalord + / - toggle */
  .ahf-cols{display:flex;flex-direction:column;gap:0;border-bottom:1px solid var(--f-line)}
  .ahf-col{border-top:1px solid var(--f-line)}
  .ahf-col__head{display:flex;width:100%;align-items:center;justify-content:space-between;margin:0;padding:18px 0;cursor:pointer}
  .ahf-col__head .ahf-plus{display:inline;font-size:26px}
  .ahf-col__head[aria-expanded="true"] .ahf-plus{color:var(--f-grey)}
  .ahf-col__list{display:none;padding:0 0 20px}
  .ahf-col.is-open .ahf-col__list{display:flex}
  .ahf-contact{flex-direction:column;align-items:flex-start}
  .ahf-office__lines{flex-direction:column}
  .ahf-badges{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .ahf-badge{grid-column:span 3;height:76px}
  .ahf-badge.is-award{grid-column:span 2;height:auto;aspect-ratio:1}
  .ahf-badge.is-light{padding:10px 12px}
  .ahf-sep{display:none}
}
/* the nowrap kicker + Pause need 344px: below 400px the button drops under the kicker when it doesn't fit */
@media (max-width:399px){
  .ahf-partners__head{flex-wrap:wrap;row-gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .ahf-marquee__track{animation:none}
  .ahf-marquee{overflow-x:auto}
  /* no loop: hide the aria-hidden loop copies, and the Pause button that has nothing to pause */
  .ahf-card[aria-hidden="true"],.ahf-pause{display:none}
  .ahf-hub *,.ahf *{transition:none!important}
}

/* theme back-to-top (theme.css z-index 999, later in the DOM) would sit over the open header mega menu (999); keep it under */
#back-top{z-index:998}