/* Ben Williams — benwilliams.com — v2, 15 Sep 2026
   Colours/fonts kept by James's ruling: near-black, cream, orange-red, green;
   Anton display + Archivo body. */
:root{
  --ink:#000000;
  --cream:#F2F2EA;
  --accent:#D8FF00;
  --pitch:#0B0B09;
  --smoke:#1A1A16;
  --ash:#9E9A8C;
  --good:#1c7a45;
  --line:#1A1A16;
  --line-dark:#1A1A16;
  --gutter:20px;
  --body:'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--body);
  font-weight:400;line-height:1.5;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
.h-face{
  font-family:'Archivo', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.92;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
section{position:relative}

/* ---------- colour bands ---------- */
.band-dark{background:var(--ink);color:var(--cream)}
.band-pitch{background:var(--pitch);color:var(--cream)}
.band-dark .line{background:var(--line)}
.band-pitch .line{background:var(--line)}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:14px var(--gutter);
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  padding-left:calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right:calc(var(--gutter) + env(safe-area-inset-right, 0px));
  mix-blend-mode:difference;
}
.topbar .mark{font-family:'Anton',sans-serif;letter-spacing:.06em;color:#fff;min-width:0;display:inline-flex}
.burger{
  width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:0;
}
.burger span{display:block;width:24px;height:2px;background:#fff}
.pill{
  font-family: 'Anton', Impact, sans-serif;font-weight:400;font-size:13px;letter-spacing:.04em;
  background:var(--accent);color:var(--ink);border:none;border-radius:999px;
  padding:11px 20px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:8px;
  transition:transform .18s ease,opacity .2s ease;
  text-decoration:none;
  text-transform:uppercase;
}
.pill:hover{transform:translateY(-1px)}
.pill.outline{background:transparent;color:var(--cream);border:1px solid var(--cream)}

/* topbar / sticky pill swap — never both visible (ScrollTrigger toggles these) */
.topbar{transition:opacity .25s ease,visibility .25s ease}
.topbar.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.sticky-pill{
  position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:39;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
}
.sticky-pill.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.sticky-pill .pill{box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* ---------- hero: the chooser — 7 full-height vertical panels ---------- */
.hero{ min-height:100svh; padding:0; position:relative; overflow:hidden; }
.hero-panels{
  display:flex; width:100%; min-height:640px; height:100svh;
}
.panel{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; cursor:pointer;
  display:flex; align-items:flex-end; justify-content:flex-start;
  border-right:1px solid var(--line); padding:0; margin:0; text-align:left;
  background:#111; color:var(--cream); font:inherit;
  transition:flex 450ms cubic-bezier(.22,.61,.36,1);
}
.panel:last-child{border-right:none}
.panel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position: center 20%;
  filter:brightness(.55); transition:filter 450ms ease;
}
.panel-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.28); transition:opacity 450ms ease; }
.panel.is-active img{filter:brightness(.85)}
.panel.is-active .panel-overlay{opacity:0}
.panel-flatbg{filter:none}
.panel-content{
  position:relative; z-index:1; width:100%; padding:60px 20px 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);
}
.panel-wordmark{
  font-size:clamp(15px,1.6vw,20px); letter-spacing:.02em; white-space:nowrap;
  transition: opacity 300ms ease, transform 300ms ease;
}
.panel-eyebrow{
  display:none; opacity:0; transform:translateY(12px); transition:opacity 300ms ease, transform 300ms ease;
  font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:4px;
}
.wordmark-logo{
  max-height: 44px;
  max-width: 140px;
  width: auto;
  height: auto;
  display: block;
  mix-blend-mode: screen;
  filter: invert(1) brightness(1.8) contrast(1.2);
  transition: opacity 300ms ease;
}
.panel-title,.panel-blurb,.panel-link{
  display:none; opacity:0; transform:translateY(12px); transition:opacity 300ms ease, transform 300ms ease;
}
.panel.is-active .panel-eyebrow,.panel.is-active .panel-title,.panel.is-active .panel-blurb,.panel.is-active .panel-link{ display:block; }
.panel-title{ font-size:clamp(22px,2.4vw,34px); line-height:1.02; margin-top:0; }
.panel-blurb{ font-size:14px; opacity:0; max-width:38ch; line-height:1.4; }
.panel-link{
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .06em;
  background: var(--accent);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-block;
  text-transform: uppercase;
}
.panel.is-active{ flex:2.2 1 0; }
.panel.is-active .panel-wordmark{ opacity:0; height:0; margin-bottom:0; overflow:hidden; pointer-events:none; }
.panel.is-active .panel-wordmark .wordmark-logo{ opacity:0; }
.panel.is-active .panel-eyebrow{ opacity:1; transform:none; }
.panel.is-active .panel-title{ opacity:1; transform:none; margin-top:4px; margin-bottom:10px; }
.panel.is-active .panel-blurb{ opacity:.85; transform:none; margin-bottom:16px; }
.panel.is-active .panel-link{ opacity:1; transform:none; }

@media(max-width:899px){
  .hero-panels{
    display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;
    height:100svh; min-height:560px;
  }
  .panel{ flex:0 0 88vw; scroll-snap-align:center; transition:none; }
  .panel.is-active{ flex:0 0 88vw; }
  .panel.is-active .panel-wordmark{margin-bottom:10px}
}

/* ---------- Accordion Section ---------- */
.accordion-section {
  padding: 80px 0;
}
.accordion-container {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
}
.accordion-row {
  border-bottom: 1px solid var(--line);
}
.accordion-row:first-child {
  border-top: 1px solid var(--line);
}
.accordion-header {
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  padding: 24px 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.accordion-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 3;
}
.accordion-row-eyebrow {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
}
.accordion-row-title {
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  margin: 0;
  line-height: 1.05;
  color: inherit;
  letter-spacing: 0.02em;
}
.accordion-row-blurb {
  font-size: 14px;
  margin: 0;
  opacity: 0.7;
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.4;
  max-width: 80ch;
}
.accordion-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}

/* Color rhythm styling for PITCH accordion band */
.band-pitch .accordion-row {
  border-bottom: 1px solid var(--smoke);
}
.band-pitch .accordion-row:first-child {
  border-top: 1px solid var(--smoke);
}
.band-pitch .accordion-header {
  color: var(--cream);
}
.band-pitch .accordion-arrow {
  border: 1px solid var(--smoke);
  color: var(--cream);
}
.band-pitch .accordion-row-blurb {
  color: var(--cream);
  opacity: 0.7;
}

/* Distinct row elements in band-pitch */
.band-pitch .accordion-row .accordion-row-title { color: var(--cream); }
.band-pitch .accordion-row .accordion-row-eyebrow { color: var(--accent); }

/* Pitch form fields with smoke borders and chalk text */
.band-pitch .inline-form label {
  color: var(--cream);
  opacity: 0.85;
}
.band-pitch .inline-form .checks-fieldset legend {
  color: var(--cream);
  opacity: 0.85;
}
.band-pitch .inline-form input,
.band-pitch .inline-form select,
.band-pitch .inline-form textarea {
  background: var(--pitch);
  border: 1px solid var(--smoke);
  color: var(--cream);
}
.band-pitch .inline-form input::placeholder,
.band-pitch .inline-form textarea::placeholder {
  color: var(--ash);
}
.band-pitch .inline-form input:focus,
.band-pitch .inline-form select:focus,
.band-pitch .inline-form textarea:focus {
  border-color: var(--accent);
}
.band-pitch .inline-form button[type=submit] {
  background: var(--accent);
  color: var(--ink);
}
.accordion-header[aria-expanded="true"] .accordion-arrow {
  transform: rotate(180deg);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
.accordion-content {
  display:grid; grid-template-rows:0fr; transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-content.is-open { grid-template-rows:1fr; }
.accordion-content > * { min-height:0; overflow:hidden; }


/* Accordion Specific Content Items */
.accordion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.accordion-actions a.plain {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.accordion-actions a.plain:hover {
  opacity: 1;
}

/* Shop Grid Photo Tiles */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 899px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }
  .shop-tile {
    aspect-ratio: 4 / 3 !important;
    width: 100%;
  }
}
.shop-tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
}
.shop-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.8);
}
.shop-tile:hover img {
  transform: scale(1.03);
  filter: brightness(0.95);
}
.shop-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 60%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}
.shop-tile .shop-title {
  font-size: clamp(20px, 2.5vw, 28px);
  color: #fff;
  margin: 0;
}
.shop-tile .shop-cta {
  align-self: flex-start;
  margin-top: auto;
}

/* Skool Community Content */
.skool-content {
  padding: 16px 0;
}
.skool-content p {
  font-size: 15px;
  margin: 0 0 16px;
  opacity: 0.85;
}

/* YouTube Thumbnail Grid */
.accordion-ytgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .accordion-ytgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.accordion-ytgrid a {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
}
.accordion-ytgrid a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.75);
}
.accordion-ytgrid a:hover img {
  transform: scale(1.03);
  filter: brightness(0.9);
}
.accordion-ytgrid a span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 11px;
  background: rgba(11, 11, 11, 0.85);
  color: #fff;
  padding: 3px 6px;
  border-radius: 3px;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- inline form ---------- */
.inline-form label{display:block;font-size:13px;margin:0 0 6px;opacity:.7}
.inline-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.inline-form .row{grid-template-columns:1fr}}
.inline-form input,.inline-form textarea,.inline-form select{
  width:100%;background:rgba(244,241,234,.06);border:1px solid var(--line);color:inherit;
  border-radius:6px;padding:12px 14px;font-family:inherit;font-size:15px;min-height:44px;margin-bottom:14px;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 13px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.inline-form input,.inline-form textarea{background-image:none}
.inline-form select{padding-right:38px;cursor:pointer}
.inline-form textarea{min-height:88px;resize:vertical}
.inline-form .hp{position:absolute;left:-9999px}
.inline-form .checks-fieldset{border:none;padding:0;margin:0 0 14px}
.inline-form .checks-fieldset legend{font-size:13px;opacity:.7;padding:0;margin-bottom:8px}
.inline-form .checks{display:flex;flex-wrap:wrap;gap:4px 16px}
.inline-form .check{display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px;opacity:1;margin:0}
.inline-form .check input[type=checkbox]{
  width:22px;height:22px;min-height:22px;margin:0;padding:0;
  accent-color:var(--accent);flex:0 0 auto;
}
.inline-form button[type=submit]{
  background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:14px 20px;font-weight:600;font-size:15px;cursor:pointer;min-height:44px;
}
.inline-form .form-note{font-size:13px;opacity:.6;margin:12px 0 0}
.inline-form .form-status{margin-top:12px;font-size:14px}
.inline-form .form-status.ok{color:#7fd19a}
.inline-form .form-status.err{color:#ff9d8a}

/* ---------- about ---------- */
.about{padding:80px 0}
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.about-image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
}
.about-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-content .kicker {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 12px;
}
.about-content p {
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.45;
  margin: 0;
  opacity: 0.9;
}

/* ---------- footer ---------- */
footer{padding:64px 0 48px;border-top:1px solid var(--line)}
footer .socials{display:flex;flex-wrap:wrap;gap:2px 8px;margin:18px 0 24px}
footer .socials a{font-size:14px;opacity:.75;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px}
footer .socials a:hover{opacity:1}
footer p a{display:inline-flex;align-items:center;min-height:44px}
footer .fine{font-size:12px;opacity:.5;margin-top:20px}

/* ---------- enquiry drawer ---------- */
dialog#drawer{
  border:none;padding:0;margin:0;background:transparent;color:var(--cream);
  max-width:none;max-height:none;width:100%;height:100%;
}
dialog#drawer::backdrop{background:rgba(0,0,0,.5)}
.drawer-panel{
  position:fixed;background:var(--ink);z-index:60;
  display:flex;flex-direction:column;
  /* mobile: bottom sheet */
  left:0;right:0;bottom:0;top:auto;max-height:88svh;
  border-radius:16px 16px 0 0;padding:22px var(--gutter) 28px;
  overflow-y:auto;
}
@media(min-width:1024px){
  .drawer-panel{
    top:0;bottom:0;right:0;left:auto;width:460px;max-height:none;
    border-radius:0;padding:32px 34px 34px;
  }
}
.drawer-panel .drawer-close{
  position:absolute;top:16px;right:16px;background:none;border:none;color:var(--cream);
  font-size:22px;cursor:pointer;min-width:44px;min-height:44px;
}
.drawer-panel h3{font-family:'Anton',sans-serif;font-size:26px;margin:0 0 4px;padding-right:40px}
.drawer-panel .step-label{font-size:13px;opacity:.6;margin-bottom:18px}
.lane-choice{
  display:block;width:100%;text-align:left;background:none;border:none;color:var(--cream);
  border-top:1px solid var(--line);padding:16px 0;cursor:pointer;font-size:16px;min-height:44px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.lane-choice:last-child{border-bottom:1px solid var(--line)}
.lane-choice .k{color:var(--accent);font-size:13px;margin-right:10px}
.lane-choice:hover{background:rgba(244,241,234,.04)}
.drawer-form label{display:block;font-size:13px;margin:16px 0 6px;opacity:.75}
.drawer-form input,.drawer-form textarea{
  width:100%;background:rgba(244,241,234,.06);border:1px solid var(--line);color:var(--cream);
  border-radius:6px;padding:12px 14px;font-family:inherit;font-size:15px;min-height:44px;
}
.drawer-form textarea{min-height:96px;resize:vertical}
.drawer-form .hp{position:absolute;left:-9999px}
.drawer-form button[type=submit]{
  margin-top:20px;width:100%;background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:14px;font-weight:700;font-size:15px;cursor:pointer;min-height:44px;
}
.drawer-form .back{
  background:none;border:none;color:var(--cream);opacity:.6;font-size:13px;cursor:pointer;
  padding:0 0 12px;min-height:44px;
}
.form-status{margin-top:14px;font-size:14px}
.form-status.ok{color:#7fd19a}
.form-status.err{color:#ff9d8a}

/* ---------- Verification & Review Refinements (15 Sep 2026) ---------- */

/* 1. Shop Hero Panel Split vertically into top & bottom halves */
.panel-split-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.panel img.panel-brand-logo{ position:static; inset:auto; width:auto; height:34px; filter:none; object-fit:contain; margin-bottom:10px; }
.panel .panel-split-images .panel-split-img {
  position: static;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  height: 50%;
  object-fit: cover;
  object-position: center;
}

/* 2. Brand logo above panel eyebrow when expanded */
.panel-brand-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: none;
  margin-bottom: 12px;
  align-self: flex-start;
}
.panel.is-active .panel-brand-logo {
  display: block;
}

/* 3. Text link under the blurb in marketing row */
.marketing-blurb-link-wrap {
  margin-top: 8px;
}
.marketing-blurb-link {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease;
}
.marketing-blurb-link:hover {
  color: var(--ink);
}

/* 4. Watermarks on the accordion rows */
.accordion-row {
  position: relative;
}
.accordion-watermarks {
  position: absolute;
  right: 48px;
  top: 0;
  height: 100%;
  max-height: 150px;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;
  z-index: 2;
}
.accordion-watermark-link {
  display: flex;
  align-items: center;
  height: 88%;
  opacity: 0.12;
  filter: brightness(0) invert(0.95);
  transition: opacity 0.2s ease;
  pointer-events: auto;
}
.accordion-watermark-link:hover {
  opacity: 0.35;
}
.accordion-watermark-img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Ensure chevron button/arrow is clickable above watermarks */
.accordion-arrow {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* On phone the marks drop out of the text band and sit in the empty
   gutter at the foot of the row (present whether the row is open or closed:
   a closed row leaves ~80px, an open one leaves the 80px content pad). */
@media (max-width: 899px) {
  /* NB: the later `.accordion-watermarks{max-width:44%}` / `.accordion-watermark-link
     .accordion-watermark-img{max-width:320px}` polish rules sit further down the file,
     so these selectors are deliberately one level more specific to win on order. */
  /* one level more specific: the base --wm-tone lives further down the file */
  .accordion-section .accordion-row { --wm-tone: .19; } /* smaller marks on phone need a touch more tone */
  .accordion-row .accordion-watermarks {
    top: auto;
    bottom: 14px;
    right: 20px;
    left: auto;
    height: auto;
    max-height: 46px;
    max-width: 62%;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 1;
  }
  .accordion-row .accordion-watermark-link {
    height: auto;
    max-height: 46px;
  }
  .accordion-watermark-link:hover {
    opacity: inherit; /* no hover effect on mobile */
  }
  .accordion-watermarks .accordion-watermark-link .accordion-watermark-img {
    /* explicit height, not auto: the SVG marks (youtube, soundcloud) have no
       intrinsic size and collapse to 0x0 under height:auto in a shrink-wrapped box */
    height: 46px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
  }
  .accordion-header-left {
    position: relative;
    z-index: 3; /* above watermarks */
  }
}
.marketing-blurb-link{ display:inline-block; min-height:44px; line-height:44px; }



/* Closed rows leave nothing behind: no padding, hidden to screen readers, no stray focus ring */
.accordion-content-inner { padding-bottom:0; }
.accordion-content-inner > * { padding-bottom:32px; }
.accordion-content:not(.is-open) > * { visibility:hidden; transition: visibility 0s .35s; }
.accordion-content.is-open > * { visibility:visible; }
.accordion-header:focus { outline:none; }
.accordion-header:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

.social{ display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; }
.social-icon{ width:20px; height:20px; filter:invert(1) brightness(1.2); opacity:.95; }
.social:hover span{ text-decoration:underline; }
.social-icon--ink{ filter:none; width:18px; height:18px; vertical-align:-3px; margin-right:6px; }

/* Footer: stacked, email first, faded brand marks behind */
footer{ position:relative; overflow:hidden; padding:72px 0 56px; }
footer .wrap{ position:relative; z-index:1; }
.footer-name{ font-size:clamp(34px,4vw,56px); line-height:1; margin:0 0 18px; }
.footer-email a{ display:inline-flex; align-items:center; gap:12px; font-size:clamp(18px,2vw,24px); font-weight:600; min-height:48px; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.6); }
.footer-email a:hover{ border-color:#fff; }
.footer-email .social-icon{ width:24px; height:24px; }
footer .socials{ display:flex; flex-direction:column; align-items:flex-start; gap:0; margin:22px 0 28px; }
footer .socials a.social{ font-size:16px; opacity:.92; min-height:46px; padding:0; }
footer .socials a.social:hover{ opacity:1; }
footer .fine a{ color:inherit; text-decoration:underline; }
/* =====================================================================
   FOOTER BRAND ROW - single authoritative block (replaces the old
   absolutely-positioned .footer-marks scatter, 16 Sep 2026).
   The system: the row hangs off the footer's two existing grid lines.
   Label sits on the logo's left edge (col 1), marks start on the socials'
   left edge (col 2). One baseline, one gap, two optical sizes:
     --wordmark  wide lettering  -> shorter box so it doesn't dominate
     --badge     round/square    -> taller box so it reads the same size
   Only Ben's own ventures live here; platform icons are in the socials list.
   ===================================================================== */
footer .footer-brands{
  grid-column:1 / -1;
  display:grid; grid-template-columns:subgrid; align-items:center;
  margin-top:28px; padding-top:24px;
  border-top:1px solid var(--line);
}
.footer-brands-label{
  grid-column:1;
  font-family:'Anton',Impact,sans-serif; font-weight:400;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.footer-brands-list{
  grid-column:2;
  display:flex; align-items:center; gap:40px;
  list-style:none; margin:0; padding:0;
}
.footer-brands-list li{ display:flex; align-items:center; }
.brand-mark{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
  opacity:.45;
  transition:opacity 250ms ease;
}
.brand-mark:hover,.brand-mark:focus-visible{ opacity:1; }
.brand-mark:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:2px; }
.brand-mark img{
  display:block; width:auto; max-width:none; object-fit:contain;
  filter:grayscale(1) brightness(1.75) contrast(1.15);
}
.brand-mark--wordmark img{ height:28px; }
.brand-mark--badge img{ height:40px; }
/* Optical corrections - the artwork, not the layout, is uneven:
   EDEN SZN is a hairline monogram, Creator Code ships with built-in padding. */
.brand-mark--eden img{ height:46px; filter:grayscale(1) brightness(2.2) contrast(1.3); }
.brand-mark--code img{ height:50px; }

/* Phone: footer stacks to one column, so the row does too - label above,
   marks in four equal cells spanning the content width. */
@media (max-width:900px){
  footer .footer-brands{ grid-template-columns:1fr; row-gap:16px; margin-top:20px; padding-top:20px; }
  .footer-brands-label,.footer-brands-list{ grid-column:1; }
  .footer-brands-list{ justify-content:space-between; gap:12px; }
  .brand-mark{ opacity:.55; }
  .brand-mark--wordmark img{ height:24px; }
  .brand-mark--badge img{ height:34px; }
  .brand-mark--eden img{ height:40px; }
  .brand-mark--code img{ height:42px; }
}
/* Compact footer: name + email left, handles in a 2-column grid right, brand row below */
footer{ padding:40px 0 28px; }
footer .wrap{ display:grid; grid-template-columns:auto 1fr; column-gap:64px; align-items:start; }
.footer-name{ font-size:clamp(28px,3vw,40px); margin:0 0 10px; }
.footer-email a{ font-size:17px; min-height:40px; }
footer .socials{ grid-column:2; grid-row:1 / span 2; display:grid; grid-template-columns:repeat(2, minmax(0, 220px)); gap:0 32px; margin:2px 0 0; align-self:start; }
footer .socials a.social{ font-size:15px; min-height:38px; }
footer .fine{ grid-column:1 / -1; margin-top:14px; }
@media (max-width:900px){ footer .wrap{ grid-template-columns:1fr; } footer .socials{ grid-column:1; grid-row:auto; grid-template-columns:1fr 1fr; gap:0 16px; margin-top:14px; } footer .fine{ grid-column:1; } }

/* ---------- Rebrand Overrides & Polish (15 Sep 2026) ---------- */
.topbar-logo {
  height: 22px;
  width: auto;
  display: block;
}
.footer-logo {
  width: 260px;
  height: auto;
  display: block;
}
.footer-name-wrap {
  margin: 22px 0;
  display: block;
  position: relative;
  z-index: 10;
}
.panel[data-id="dj"] .wordmark-logo {
  width: 70%;
  min-width: 90px;
  max-width: none;
  max-height: none;
  filter: none;
  mix-blend-mode: normal;
}
/* (.topbar-name is declared once, below) */

/* Review fixes 15 Sep: labels in Anton so they fit a 176px panel; wordmarks sized; marks off the text */
.panel-wordmark.h-face{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(14px,1.3vw,18px); letter-spacing:.04em; }
.panel-wordmark-img .wordmark-logo{ width:min(72%,180px); height:auto; display:block; }
.panel.is-active .panel-eyebrow{ font-family:'Anton',sans-serif; }
.accordion-watermark-link .accordion-watermark-img{ max-width:320px; }
.accordion-watermarks{ max-width:44%; justify-content:flex-end; }
.accordion-watermark-link[href*="hypeenergy"] .accordion-watermark-img{ filter:grayscale(1) brightness(1.6) contrast(1.6); }
footer .socials{ max-width:520px; }

/* Creator Code mark: top-right of its hero panel, bigger */
.panel[data-id='skool'] .panel-brand-logo{ position:absolute; top:18px; right:18px; height:64px; width:auto; margin:0; display:block; opacity:1; }
.accordion-watermark-link[href*="hypeenergy"] .accordion-watermark-img{ filter:none; opacity:1; }
.panel > img.panel-brand-logo{ position:absolute; inset:auto; top:18px; right:18px; height:64px; width:auto; filter:none; display:block; z-index:2; }
@media (max-width:900px){ .panel > img.panel-brand-logo{ height:48px; } }
/* =====================================================================
   NAV WORDMARK - SINGLE AUTHORITATIVE DECLARATION.
   The brand's headline face at full width (Archivo 900, wdth 125) - the
   closest live font to the drawn wordmark. Do NOT re-declare .topbar-name
   elsewhere; it previously had three competing sizes plus an !important.
   Fluid: 20px at 320px (the width where "BEN WILLIAMS" + the 44px burger
   + a 16px gap exactly fills the 280px between the gutters), ~25px at 375px,
   38px from ~520px up. Never wraps, never touches the burger.
   ===================================================================== */
.topbar-name{
  /* Orbitron 800: the closest live face to the drawn BENJAMMIN' wordmark
     (heavy, extended, squared-round geometry). Owner's request, 16 Sep 2026. */
  font-family:'Orbitron','Archivo',sans-serif;
  font-weight:800;
  font-size:clamp(17px, 7.6vw - 7px, 32px);
  letter-spacing:.03em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--cream);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
/* Official BEN WILLIAMS wordmark artwork (16 Sep 2026) replaces the Orbitron
   text. Width matches the text it replaced at every size - 154px @320,
   ~191px @375, 284px from ~520px up - so the burger gap is unchanged. */
.topbar-wordmark{
  display:block;
  width:clamp(154px, 67.45vw - 62px, 284px);
  height:auto;
  max-width:none;
}
/* Inline BENJAMMIN' wordmark in panel titles - sits on the text baseline at
   cap height so "BOOK [wordmark] TO PLAY" reads as one headline. */
/* Specificity is deliberate: `.panel img` / `.hero .panel img` style the full-bleed
   background photo (absolute, inset:0, cover, dimmed) and must NOT touch this. */
.hero .panel .panel-title img.title-wordmark,
.panel .panel-title img.title-wordmark{
  position:static; inset:auto; display:inline-block;
  height:.74em; width:auto; max-width:none; min-width:0;
  object-fit:contain; object-position:left bottom;
  filter:none !important; /* beats hero.css `.hero .panel img{filter:brightness(.72) !important}` */
  opacity:1; transform:none; mix-blend-mode:normal; transition:none;
  vertical-align:baseline; margin:0 .06em;
}
/* Phone: the mobile headline is condensed Anton, so an inline wordmark reads
   short and wraps badly. Stack it as a poster - BOOK / wordmark / TO PLAY. */
@media (max-width:899px){
  .hero .panel .panel-title img.title-wordmark,
  .panel .panel-title img.title-wordmark{
    display:block; width:min(100%, 300px); height:auto;
    margin:.14em 0 .18em;
  }
}
.about-text p, .about p, .about-copy p{ font-size:16px; line-height:1.55; max-width:52ch; }

/* ==========================================================================
   APPROVED FIVE IMPROVEMENTS IMPLEMENTATION
   ========================================================================== */

/* 1) POSTER LINE ON EVERY PANEL & PHOTO CRUSH */
.panel-poster {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
/* Crush panel photos brightness to .45 at rest */
.panel img {
  filter: brightness(.45) !important;
  transition: filter 450ms ease !important;
}
.panel.is-active img {
  filter: brightness(.85) !important;
}
/* when the DJ panel is active hide its wordmark image */
.panel.is-active .panel-wordmark-img {
  display: none !important;
}

/* 2) ONE LOAD MOMENT (GSAP + Stagger) */
.panel {
  transform: translateY(6%);
  opacity: 0;
  /* Only transition flex to avoid conflicting with GSAP's transform/opacity animations */
  transition: flex 450ms cubic-bezier(.22,.61,.36,1) !important;
}
.panel-content {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .panel {
    transform: none !important;
    opacity: 0;
  }
  .panel-content {
    opacity: 0;
  }
}

/* 3) HERO → STRIP SEAM */
#accordion {
  padding-top: 96px !important;
  border-top: 1px solid var(--smoke) !important;
}
.accordion-row {
  overflow: hidden !important;
}
/* Any ghost/watermark flattened to a single smoke tone, no change on hover.
   Tone is driven by --wm-tone so the phone breakpoint can lift it without
   stacking a second !important on top of this one. */
.accordion-row { --wm-tone: .16; }
.accordion-watermark-link,
.accordion-watermark-link[href*="hypeenergy"] .accordion-watermark-img,
.accordion-watermark-link .accordion-watermark-img,
.accordion-watermark-link:hover,
.accordion-watermark-link:hover .accordion-watermark-img {
  filter: brightness(0) invert(var(--wm-tone)) !important;
  opacity: 1 !important;
}

/* 4) NEON HAIRLINES */
.accordion-row {
  border-top: 1px solid rgba(216,255,0,0.35) !important;
  border-bottom: none !important;
}
.accordion-row:has(.accordion-header[aria-expanded="true"]),
.accordion-row.is-open {
  border-top-color: #D8FF00 !important;
}

/* Row elements text stylings */
.accordion-row-eyebrow {
  color: var(--accent) !important;
}
.accordion-row-title {
  color: var(--cream) !important;
}
.accordion-row-blurb {
  color: var(--ash) !important;
  opacity: 1 !important;
  font-size: 15px !important;
}
.accordion-header {
  padding: 28px 0 !important;
}
/* Ensure sticky pill never covers submit button */
.accordion-content-inner {
  padding-bottom: 96px !important;
}

/* 5) MOBILE HERO (<900px) */
@media (max-width: 899px) {
  .panel {
    flex: 0 0 88vw !important;
    scroll-snap-align: center !important;
    transition: flex 450ms cubic-bezier(.22,.61,.36,1), opacity 450ms ease !important;
  }
  .panel.is-active {
    flex: 0 0 88vw !important;
    scroll-snap-align: center !important;
  }
  .accordion-content-inner {
    padding-bottom: 80px !important;
  }
}
.mobile-hero-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 12px;
  color: var(--accent);
  z-index: 20;
  display: none;
}
.mobile-hero-hint {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--body);
  font-weight: 400;
  font-size: 11px;
  color: var(--ash);
  z-index: 20;
  display: none;
  transition: opacity 300ms ease;
}
@media (max-width: 899px) {
  .mobile-hero-counter {
    display: block;
  }
  .mobile-hero-hint {
    display: block;
  }
}

/* Extra Mobile target sizes & visual polish */
.accordion-arrow {
  width: 44px !important;
  height: 44px !important;
}
.footer-logo {
  max-width: 100% !important;
}
.about, .about-content, .about p, #aboutParas p {
  font-size: 16px !important;
}
.footer-email a {
  min-height: 44px !important;
}
footer .socials a.social {
  min-height: 44px !important;
}
/* (.topbar-name size is handled by the clamp() in its single declaration) */

.panel[data-id='shop'] img{ object-position:center 12%; }
.shop-tile img{ object-position:center 12% !important; }