/* Creative Side. Layout: charcoal media stages with a slim control bar, a white identity band on a six-column hairline grid, a charcoal footer with the lime 8 bleeding off the edge.
   Palette follows the brand guidelines (v1.0): Creative Lime, Charcoal Black, Cool Grey, Pure White. */
:root{
  --lime:#BEFF00;
  --char:#1B1B1B;
  --grey:#CDCFD2;
  --white:#FFFFFF;
  --char-2:#262627;
  --line:#3a3b3d;
  --mute:#9ea1a6;
  --ink-soft:#4b4c4f;
  --focus:#BEFF00;
  --display:'Century Gothic','CenturyGothic','Poppins','Helvetica Neue',Arial,sans-serif;
  --body:'Aptos','Inter','Segoe UI','Helvetica Neue',Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--char);color:var(--white);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- sliders ---------- */
.slider{position:relative;background:var(--char);color:var(--white)}
.stage{position:relative;overflow:hidden;aspect-ratio:16/8;min-height:340px;max-height:calc(100vh - 76px);max-height:calc(100svh - 76px);background:var(--char);touch-action:pan-y;-webkit-user-select:none;user-select:none}
.slide{position:absolute;inset:0;background:var(--char);opacity:0;visibility:hidden;transition:opacity 1.2s cubic-bezier(.4,0,.2,1),visibility 0s linear 1.2s}
.slide.is-active{opacity:1;visibility:visible;z-index:2;transition-delay:0s}
.media{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.is-portrait .media{object-fit:contain}
.mbg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(36px) brightness(.5)}
.slider[data-mode="slide"] .slide{opacity:1;transition:transform 1s cubic-bezier(.7,0,.2,1)}
.slider[data-mode="slide"] .slide.is-active{visibility:visible;transition-delay:0s}

.bar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;align-items:center;column-gap:clamp(16px,3vw,48px);min-height:76px;background:var(--char)}
.cap{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat{font:700 15px/1.25 var(--display)}
.ttl{font-size:14px;line-height:1.35;color:var(--mute)}
.segs{display:flex;gap:6px}
.seg{flex:1;display:flex;align-items:center;height:36px;padding:0;border:0;background:none;cursor:pointer}
.seg i{display:block;width:100%;height:3px;background:var(--line);overflow:hidden;transition:height .2s}
.seg:hover i{height:5px}
.seg b{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}
.seg.past b{transform:scaleX(1)}
.seg.on b{animation:segfill var(--sdur,var(--dur,4600ms)) linear forwards}
.is-paused .seg.on b{animation-play-state:paused}
@keyframes segfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ctrl{display:flex;align-items:center;gap:2px}
.count{min-width:56px;margin-right:8px;text-align:right;font:600 13px var(--display);font-variant-numeric:tabular-nums;color:var(--mute)}
.ib{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--white);cursor:pointer;transition:background .2s,color .2s}
.ib:hover{background:var(--char-2);color:var(--lime)}
.is-reduced .toggle{display:none}
.is-reduced .seg.on b{animation:none;transform:scaleX(1)}

/* ---------- on-brand placeholder artwork ---------- */
.art{position:absolute;inset:0;overflow:hidden;container-type:size}
.art .g{position:absolute;display:block}
.art-word{position:absolute;left:5cqw;bottom:6cqh;max-width:62cqw;font:700 min(8.5cqw,15cqh)/1.02 var(--display);letter-spacing:-.02em;text-wrap:balance}
.eight{position:absolute;aspect-ratio:369/526;background:var(--lime);-webkit-mask:url(logo-icon.png) center/contain no-repeat;mask:url(logo-icon.png) center/contain no-repeat}
.art-dark8{background:var(--char);color:var(--white)}
.art-dark8 .eight{height:150cqh;right:4cqw;top:-26cqh}
.art-dark8l{background:var(--char);color:var(--white)}
.art-dark8l .eight{height:150cqh;right:-6cqw;top:-18cqh;transform:scaleX(-1)}
.art-dark8l .art-word{left:auto;right:5cqw;text-align:right}
.art-lime{background:var(--lime);color:var(--char)}
.art-lime .g1{width:62cqh;aspect-ratio:1;border-radius:50%;background:var(--char);right:24cqw;top:14cqh}
.art-lime .g2{width:38cqh;aspect-ratio:1;border-radius:50%;background:var(--white);right:12cqw;top:46cqh}
.art-lime .g3{width:30cqh;aspect-ratio:1;border-radius:50%;border:.7cqh solid var(--char);right:6cqw;top:8cqh}
.art-grey{background:var(--grey);color:var(--char)}
.art-grey .g1{width:min(92cqh,60cqw);aspect-ratio:1;border-radius:50%;background:var(--char);right:-8cqh;bottom:-24cqh}
.art-grey .g2{width:30cqh;aspect-ratio:1;border-radius:50%;background:var(--lime);right:34cqw;top:12cqh}
.art-white{background:var(--white);color:var(--char)}
.art-white .g1{width:min(104cqh,64cqw);aspect-ratio:1;border-radius:50%;background:var(--lime);right:6cqw;top:-10cqh}
.art-white .g2{width:34cqh;aspect-ratio:1;border-radius:50%;background:var(--char);right:3cqw;bottom:10cqh}
.art-ring{background:var(--char);color:var(--white)}
.art-ring .g1{width:96cqh;aspect-ratio:1;border-radius:50%;border:1.2cqh solid var(--lime);right:8cqw;top:6cqh}
.art-ring .g2{width:40cqh;aspect-ratio:1;border-radius:50%;background:var(--white);right:34cqw;bottom:6cqh}


/* portrait stages (phones): re-seat the shapes so the word stays readable */
@container (max-aspect-ratio: 1/1){
  .art-word{max-width:84cqw;font-size:12cqw}
  .art-dark8 .eight{height:66cqh;right:-6cqw;top:-8cqh}
  .art-dark8l .eight{height:66cqh;left:-6cqw;right:auto;top:-8cqh}
  .art-lime .art-word,.art-grey .art-word,.art-white .art-word,.art-ring .art-word{top:7cqw;bottom:auto}
  .art-lime .g1{width:70cqw;right:auto;left:8cqw;top:auto;bottom:22cqh}
  .art-lime .g2{width:42cqw;right:6cqw;top:auto;bottom:8cqh}
  .art-lime .g3{width:30cqw;right:10cqw;top:auto;bottom:40cqh}
  .art-grey .g1{width:90cqw;right:-15cqw;top:auto;bottom:-20cqw}
  .art-grey .g2{width:26cqw;right:18cqw;top:auto;bottom:62cqw}
  .art-white .g1{width:90cqw;right:-10cqw;top:auto;bottom:-14cqw}
  .art-white .g2{width:26cqw;right:auto;left:8cqw;top:auto;bottom:10cqw}
  .art-ring .g1{width:84cqw;right:-12cqw;top:auto;bottom:8cqw}
  .art-ring .g2{width:34cqw;right:auto;left:8cqw;bottom:6cqw}
}

/* ---------- identity ---------- */
.identity{position:relative;overflow:hidden;background:var(--char);color:var(--white);--focus:#BEFF00;border-bottom:1px solid var(--line)}
.identity::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:calc(100% / 6) 100%;pointer-events:none}
.ring,.disc{position:absolute;border-radius:50%;pointer-events:none}
.disc{width:clamp(180px,24vw,380px);aspect-ratio:1;background:var(--white);left:calc(clamp(180px,24vw,380px) / -3);bottom:calc(clamp(180px,24vw,380px) / -3)}
.ring{width:clamp(140px,17vw,270px);aspect-ratio:1;border:clamp(8px,1vw,14px) solid var(--lime);right:calc(clamp(140px,17vw,270px) / -4);top:12%}
.id-in{position:relative;display:grid;justify-items:center;text-align:center;gap:clamp(56px,8vw,120px);padding-block:clamp(72px,9vw,140px) clamp(88px,12vw,180px)}
.logo{width:min(100%,880px)}
.logo img{display:block;width:100%;height:auto;padding:clamp(8px,2vw,28px)}
.msg{display:grid;gap:20px;justify-items:center}
.statement{max-width:20ch;font:700 clamp(28px,4.2vw,60px)/1.04 var(--display);letter-spacing:-.025em;text-wrap:balance}
.support{max-width:42ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--grey)}

/* ---------- footer ---------- */
.foot{position:relative;overflow:hidden;background:var(--char);color:var(--white)}
.big8{position:absolute;right:max(-60px,-4vw);top:clamp(-120px,-8vw,-40px);height:clamp(420px,58vw,900px);aspect-ratio:369/526;background:var(--lime);-webkit-mask:url(logo-icon.png) center/contain no-repeat;mask:url(logo-icon.png) center/contain no-repeat;pointer-events:none}
.foot-in{position:relative;display:grid;gap:clamp(64px,9vw,128px);padding-block:clamp(80px,11vw,160px) 32px}
.cta{display:grid;gap:40px;justify-items:start}
.cta-h{max-width:14ch;font:700 clamp(36px,6vw,92px)/.98 var(--display);letter-spacing:-.03em;text-wrap:balance}
.btn{display:inline-flex;align-items:center;padding:20px 38px;border-radius:999px;text-decoration:none;background:var(--lime);color:var(--char);font:700 17px/1 var(--display);transition:background .25s,transform .25s}
.btn:hover,.btn:focus-visible{background:var(--white);transform:translateY(-2px)}
.f-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px;padding-top:40px;border-top:1px solid var(--line)}
.f-brand{grid-column:span 4;display:grid;gap:20px;align-content:start}
.f-brand img{display:block;width:160px;height:auto}
.f-svc{grid-column:span 3}
.f-con{grid-column:span 3}
.f-soc{grid-column:span 2}
.fd{color:var(--mute);line-height:1.6}
.fh{margin-bottom:16px;font:700 14px/1.3 var(--display);color:var(--grey)}
.f-grid li{padding-block:4px;line-height:1.45}
.lnk{text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .3s,color .3s}
.lnk:hover,.lnk:focus-visible{background-size:100% 1px;color:var(--lime)}
.legal{font-size:14px;color:var(--mute)}

.rv{transform:translateY(24px);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{transform:none}

/* ---------- editor (only seen by people who can edit this page) ---------- */
.ed-open{position:fixed;z-index:60;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));padding:14px 22px;border:0;border-radius:999px;background:var(--lime);color:var(--char);font:700 15px/1 var(--display);cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.ed-open:hover{background:var(--white)}
.ed{position:fixed;z-index:70;top:0;right:0;bottom:0;width:min(560px,100vw);display:flex;flex-direction:column;background:var(--char-2);color:var(--white);box-shadow:-12px 0 40px rgba(0,0,0,.45);transform:translateX(102%);transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s;padding-top:env(safe-area-inset-top,0px)}
.ed.is-open{transform:none}
.ed *{min-width:0}
.ed{visibility:hidden}
.ed.is-open{visibility:visible;transition-delay:0s}
.ed label.eb{display:inline-block;position:relative;color:var(--white);font-size:13px}
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.ed-head h2{font:700 20px/1.2 var(--display)}
.ed-x{width:40px;height:40px;border:0;background:none;color:var(--white);font-size:22px;cursor:pointer}
.ed-body{flex:1;overflow-y:auto;padding:8px 20px 28px;-webkit-overflow-scrolling:touch}
.ed-help{margin:16px 0 0;color:var(--grey);font-size:14px;line-height:1.55}
.ed-sec{margin-top:28px}
.ed-sec>h3{font:700 16px/1.3 var(--display);margin-bottom:12px}
.ed-list{display:grid;gap:10px}
.ed-row{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:12px;background:var(--char);border:1px solid var(--line)}
.ed-row.is-drop,.ed-add.is-drop{border-color:var(--lime)}
.ed-thumb{position:relative;width:84px;height:64px;overflow:hidden;background:var(--line)}
.ed-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ed-thumb .tag{position:absolute;left:4px;bottom:4px;padding:2px 6px;border-radius:3px;background:var(--char);font-size:11px;line-height:1.3}
.ed-fields{display:grid;gap:8px}
.ed label{display:grid;gap:4px;font-size:13px;color:var(--grey)}
.ed input[type=text],.ed input[type=url],.ed input[type=email],.ed input[type=tel]{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:0;background:var(--char);color:var(--white);font:15px var(--body)}
.ed input::placeholder{color:#76797e}
.ed .chk{display:flex;align-items:center;gap:8px}
.ed .chk input{width:18px;height:18px;accent-color:var(--lime)}
.ed-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.eb{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--white);font:600 13px/1 var(--body);cursor:pointer}
.eb:hover{border-color:var(--lime);color:var(--lime)}
.eb[disabled]{opacity:.4;cursor:default}
.eb.warn{border-color:#ff6b57;color:#ff6b57}
.eb input{position:absolute;width:1px;height:1px;opacity:0}
.eb:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.ed-add{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;padding:22px 16px;border:1px dashed var(--mute);color:var(--grey);font-size:14px;text-align:center;cursor:pointer;position:relative}
.ed-add:hover{border-color:var(--lime);color:var(--lime)}
.ed-add input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ed-grid2{display:grid;gap:12px}
.ed-foot{display:grid;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--char-2)}
.ed-status{min-height:20px;font-size:14px;color:var(--grey)}
.ed-status.err{color:#ff8b7b}
.ed-status.ok{color:var(--lime)}
.ed-pub{padding:15px 20px;border:0;border-radius:999px;background:var(--lime);color:var(--char);font:700 16px/1 var(--display);cursor:pointer}
.ed-pub:hover{background:var(--white)}
.ed-pub[disabled]{opacity:.45;cursor:default}
.ed-todo{margin:12px 0 0;padding:12px 14px;background:var(--char);border-left:3px solid var(--lime);font-size:14px;line-height:1.55;color:var(--grey)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .f-brand{grid-column:1/-1}
  .f-svc,.f-con{grid-column:span 6}
  .f-soc{grid-column:1/-1}
}
@media (max-width:760px){
  .bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"segs segs" "cap ctrl";padding-block:2px 10px}
  .segs{grid-area:segs}
  .cap{grid-area:cap}
  .ctrl{grid-area:ctrl}
  .count{display:none}
  .stage{aspect-ratio:4/5;min-height:0}
  .ring{display:none}
  .id-in{padding-bottom:clamp(160px,44vw,260px)}
  .big8{position:relative;right:auto;top:auto;display:block;height:58vw;margin:-8vw 0 0 auto;transform:translateX(12vw)}
}
@media (max-width:520px){
  .f-svc,.f-con{grid-column:1/-1}
  .ed-row{grid-template-columns:1fr}
  .ed-thumb{width:100%;height:120px}
}
@media (prefers-reduced-motion:reduce){
  .rv{transform:none;transition:none}
  .slide,.slider[data-mode="slide"] .slide{transition-duration:.01s}
  .btn,.lnk,.ed{transition:none}
}