/* ==========================================================================
   DJ RAH RAHH — design system
   Palette pulled from the client's own logo: brand gold #F2AC05, chrome
   silver from the Team Magnum crest, on near-black.
   ========================================================================== */

:root{
  --gold:#f2ac05;
  --gold-hi:#ffc94a;
  --gold-lo:#b87d02;

  --ink:#08080b;
  --ink-2:#0c0c11;
  --panel:#111118;
  --panel-2:#171720;
  --line:rgba(255,255,255,.10);
  --line-gold:rgba(242,172,5,.32);

  --chrome:#cfd4dc;
  --smoke:#9aa0aa;
  --smoke-2:#6e747e;
  --white:#fff;

  --disp:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --body:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(80px,11vw,150px);
  --r:14px;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--chrome);
  font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.72;
  font-weight:300;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

::selection{background:var(--gold);color:#000}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:#000;padding:12px 20px;font-weight:600;
}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.center{text-align:center}
.gold{color:var(--gold)}

/* ---------------------------------------------------------------- type -- */
.h2{
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(38px,6.2vw,86px);
  line-height:.94;
  letter-spacing:-.01em;
  color:var(--white);
  margin:0 0 22px;
  text-transform:uppercase;
}

.sechead{max-width:760px;margin:0 auto clamp(44px,6vw,76px);text-align:center}
.sechead__sub{color:var(--smoke);margin:0;font-size:1.02em}

/* -------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:14px 28px;border-radius:100px;
  font-family:var(--body);font-weight:600;font-size:.86rem;
  letter-spacing:.09em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease),background-color .3s,color .3s,border-color .3s,box-shadow .35s;
  will-change:transform;
}
.btn--lg{padding:17px 36px;font-size:.9rem}
.btn--full{width:100%}

.btn--gold{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  color:#140d00;
  box-shadow:0 10px 30px -12px rgba(242,172,5,.75);
}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 18px 40px -14px rgba(242,172,5,.9)}

.btn--ghost{
  border-color:rgba(255,255,255,.24);
  color:var(--white);
  background:rgba(255,255,255,.03);
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}

/* ------------------------------------------------------------------ nav -- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background-color .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
  padding:14px 0;
}
.nav.is-stuck{
  background:rgba(8,8,11,.9);
  border-bottom-color:var(--line);
  padding:6px 0;
}
.nav__inner{
  width:100%;max-width:1440px;margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;align-items:center;gap:28px;
}
.nav__logo img{width:clamp(150px,15vw,208px);height:auto}

.nav__links{display:flex;gap:30px;margin-left:auto}
.nav__links a{
  font-size:.79rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--smoke);position:relative;padding:6px 0;transition:color .25s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--gold);transition:width .4s var(--ease);
}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after{width:100%}

.nav__cta{padding:11px 22px;font-size:.76rem}

.nav__burger{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;
}
.nav__burger span{
  display:block;height:2px;background:var(--white);border-radius:2px;
  margin:5px 0;transition:transform .35s var(--ease),opacity .25s;
}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobilemenu{
  position:fixed;inset:0;z-index:99;
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  padding:90px var(--pad) 40px;
}
.mobilemenu[hidden]{display:none}
.mobilemenu nav{display:flex;flex-direction:column;gap:20px;text-align:center}
.mobilemenu nav a{
  font-family:var(--disp);font-size:clamp(28px,8vw,44px);
  text-transform:uppercase;color:var(--white);line-height:1;
}
.mobilemenu nav a:hover{color:var(--gold)}

/* ----------------------------------------------------------------- hero -- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:120px 0 clamp(60px,9vw,110px);
  overflow:hidden;
  isolation:isolate;
}
#scene{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;display:block;
}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% 45%,rgba(242,172,5,.05),transparent 55%),
    linear-gradient(90deg,var(--ink) 4%,rgba(8,8,11,.72) 40%,rgba(8,8,11,0) 72%),
    linear-gradient(0deg,var(--ink) 1%,rgba(8,8,11,0) 32%);
}
.hero__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
}
.hero__title{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(44px,6.6vw,96px);
  line-height:.82;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--white);
  margin:0 0 26px;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .in{display:block}
.hero__title .gold{
  background:linear-gradient(175deg,var(--gold-hi) 8%,var(--gold) 45%,var(--gold-lo) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.06em;
}
.hero__lede{
  max-width:48ch;margin:0 0 38px;
  font-size:clamp(16px,1.35vw,20px);color:var(--chrome);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* -------------------------------------------------- soundcloud strip ---- */
.scrl{padding:clamp(18px,3vw,30px) 0 0}
.scrl__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:14px;
}
.scrl__kick{
  margin:0;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
}
.scrl__all{font-size:.8rem;color:var(--smoke);font-weight:500;transition:color .25s;white-space:nowrap}
.scrl__all:hover{color:var(--gold)}

.scrl__row{
  display:flex;gap:14px;
  overflow-x:auto;
  padding-bottom:14px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.scrl__row::-webkit-scrollbar{display:none}

.scard{flex:0 0 auto;width:158px;scroll-snap-align:start}
.scard img{
  width:158px;height:158px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .3s;
}
.scard:hover img{transform:translateY(-4px);border-color:var(--line-gold)}
.scard__t{
  display:block;margin-top:9px;color:var(--white);font-weight:600;
  font-size:.82rem;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scard__m{
  display:block;margin-top:2px;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
}
.scard--more{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;height:158px;padding:14px;text-align:center;
  border:1px solid var(--line-gold);border-radius:10px;background:var(--panel);
  transition:transform .4s var(--ease),background-color .3s;
}
.scard--more:hover{transform:translateY(-4px);background:var(--panel-2)}
.scard--more .scard__t{margin-top:0;white-space:normal}
.scard--more .scard__m{letter-spacing:.04em;text-transform:none;color:var(--smoke)}
.scard__plus{font-size:30px;color:var(--gold);font-weight:600;line-height:1}

/* --------------------------------------------------- brand banner band -- */
.banner{
  position:relative;
  padding:clamp(30px,6vw,70px) 0 clamp(50px,8vw,100px);
  background:
    radial-gradient(90% 140% at 50% 0%,rgba(242,172,5,.09),transparent 62%),
    var(--ink);
}
.banner__frame{
  position:relative;
  width:min(1560px,calc(100% - var(--pad)*2));
  margin-inline:auto;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line-gold);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 40px 90px -40px rgba(242,172,5,.35),
    0 30px 80px -30px rgba(0,0,0,.9);
  background:#fff;
}
.banner__frame img{width:100%;display:block;will-change:transform}
.banner__edge{
  position:absolute;top:0;bottom:0;width:12%;pointer-events:none;
}
.banner__edge--l{left:0;background:linear-gradient(90deg,rgba(8,8,11,.5),transparent)}
.banner__edge--r{right:0;background:linear-gradient(270deg,rgba(8,8,11,.5),transparent)}

/* ---------------------------------------------------------- credentials -- */
.creds{
  padding:clamp(46px,6vw,72px) 0;
  border-block:1px solid var(--line);
  background:var(--ink-2);
}
.creds__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,4vw,50px);
}
.cred{text-align:center}
.cred__big{
  font-family:var(--disp);font-size:clamp(34px,4.4vw,60px);line-height:1;
  margin:0 0 10px;color:var(--gold);letter-spacing:.01em;
}
.cred__lab{
  margin:0;font-size:.86rem;color:var(--smoke);line-height:1.5;
  max-width:22ch;margin-inline:auto;
}

/* ---------------------------------------------------------------- about -- */
.about{padding:var(--sec) 0}
.about__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(40px,6vw,90px);align-items:start;
}
.about__photo{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.about__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(242,172,5,.16),transparent 46%);
  pointer-events:none;
}
.quote{
  margin:26px 0 0;padding:22px 26px;
  border-left:2px solid var(--gold);
  background:var(--panel);
  border-radius:0 var(--r) var(--r) 0;
}
.quote blockquote{margin:0;font-size:1.02rem;color:var(--white);line-height:1.6}
.quote figcaption{margin-top:8px;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

.about__copy p{margin:0 0 20px;color:var(--smoke);font-size:1.02em}
.about__copy strong{color:var(--white);font-weight:600}

/* ------------------------------------------------------------- services -- */
.services{padding:var(--sec) 0;background:var(--ink-2);border-block:1px solid var(--line)}
.svc__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,24px);
}
.svc{
  padding:clamp(26px,3vw,38px);
  --cbg:linear-gradient(180deg,var(--panel),rgba(17,17,24,.35));
  transition:transform .5s var(--ease);
}
.svc:hover{transform:translateY(-6px)}
.svc h3{
  font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,1.9vw,27px);line-height:1.05;
  margin:0 0 12px;color:var(--white);letter-spacing:.005em;
}
.svc p{margin:0;color:var(--smoke);font-size:.97em}

/* ---------------------------------------------------------------- mixes -- */
.mixes{padding:var(--sec) 0}
.mix__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.2vw,28px);
}
.mix__art{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  aspect-ratio:1/1;
}
.mix__art img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),opacity .5s;
}
.mix__art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,8,11,.78),transparent 58%);
  opacity:.7;transition:opacity .45s;
}
.mix:hover .mix__art img{transform:scale(1.07)}
.mix:hover .mix__art{border-color:var(--line-gold)}

.mix__play{
  position:absolute;z-index:2;left:50%;top:50%;
  width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;
  background:rgba(242,172,5,.94);
  box-shadow:0 12px 34px -10px rgba(242,172,5,.9);
  opacity:0;transform:scale(.7);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.mix__play::before{
  content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #140d00;
}
.mix:hover .mix__play{opacity:1;transform:scale(1)}

.mix h3{
  font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.5vw,22px);margin:16px 0 4px;color:var(--white);line-height:1.1;
}
.mix__meta{margin:0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

.mix__note{
  margin:clamp(34px,4vw,50px) auto 30px;max-width:62ch;text-align:center;
  font-size:.82rem;color:var(--smoke-2);line-height:1.6;
}

/* -------------------------------------------------------------- gallery -- */
.gallery{padding:var(--sec) 0;background:var(--ink-2);border-block:1px solid var(--line)}
.gal{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,17vw,230px);
  gap:10px;
  padding-inline:clamp(10px,2vw,22px);
}
.gal__i{
  margin:0;overflow:hidden;border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
  background:var(--panel);
}
.gal__i--wide{grid-column:span 2}
.gal__i--tall{grid-row:span 2}
.gal__i img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease),opacity .6s;
  opacity:.86;
}
.gal__i:hover img{transform:scale(1.06);opacity:1}

/* -------------------------------------------------------------- reviews -- */
.reviews{padding:var(--sec) 0}
.rev__grid{
  columns:3;
  column-gap:clamp(16px,2vw,24px);
}
.rev{
  break-inside:avoid;
  margin:0 0 clamp(16px,2vw,24px);
  padding:clamp(24px,2.6vw,32px);
  --cbg:linear-gradient(180deg,var(--panel),rgba(17,17,24,.3));
  transition:transform .5s var(--ease);
}
.rev:hover{transform:translateY(-4px)}
.rev p{
  margin:0 0 18px;color:var(--chrome);font-size:.97em;line-height:1.68;
}
.rev footer{display:flex;flex-direction:column;gap:2px}
.rev cite{
  font-style:normal;font-weight:600;color:var(--white);
  font-size:.9rem;letter-spacing:.02em;
}
.rev footer span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

/* ----------------------------------------------------------------- nyep -- */
.nyep{padding:var(--sec) 0;background:var(--ink-2);border-block:1px solid var(--line)}
.nyep__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(40px,6vw,80px);align-items:center;
}
.nyep__copy p{color:var(--smoke);margin:0 0 24px;font-size:1.02em}
.nyep__copy strong{color:var(--white);font-weight:600}
.ticks{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;color:var(--chrome);font-size:.98em}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:11px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
}
.nyep__cta{display:flex;flex-wrap:wrap;gap:12px}
.nyep__media{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 40px 90px -45px rgba(0,0,0,.95);
}

/* ------------------------------------------------------------- partners -- */
.partners{padding:var(--sec) 0}
.plink__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
.plink{
  display:flex;flex-direction:column;gap:4px;
  padding:22px 26px;
  --cbg:linear-gradient(var(--panel),var(--panel));
  transition:transform .45s var(--ease);
}
.plink:hover{transform:translateY(-4px);--cbg:linear-gradient(var(--panel-2),var(--panel-2))}
.plink__name{color:var(--white);font-weight:600;font-size:1rem}
.plink__cat{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke-2)}
.plink:hover .plink__cat{color:var(--gold)}

/* -------------------------------------------------------------- contact -- */
.contact{
  padding:var(--sec) 0;
  background:
    radial-gradient(70% 90% at 15% 20%,rgba(242,172,5,.10),transparent 60%),
    var(--ink-2);
  border-top:1px solid var(--line);
}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(40px,6vw,90px);align-items:start;
}
.contact__copy p{color:var(--smoke);margin:0 0 32px;font-size:1.05em;max-width:44ch}

.social{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.social a{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:16px 4px;border-bottom:1px solid var(--line);
  font-weight:500;color:var(--white);
  transition:color .3s,padding-left .35s var(--ease),border-color .3s;
}
.social a span{color:var(--smoke-2);font-size:.86rem;transition:color .3s}
.social a:hover{color:var(--gold);padding-left:10px;border-color:var(--line-gold)}
.social a:hover span{color:var(--gold)}

.form{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  padding:clamp(26px,3vw,38px);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);
}
.field{display:flex;flex-direction:column;gap:8px;grid-column:1/-1}
.field--half{grid-column:span 1}
.field label{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);
}
.field input,.field select,.field textarea{
  font:inherit;font-weight:400;
  color:var(--white);
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:9px;
  padding:13px 15px;
  transition:border-color .3s,background-color .3s;
  width:100%;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:#0a0a0e;
}
.form .btn{grid-column:1/-1;margin-top:6px}

/* --------------------------------------------------------------- footer -- */
.foot{padding:clamp(56px,7vw,84px) 0 30px;background:var(--ink);border-top:1px solid var(--line)}
.foot__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(30px,4vw,60px);
  padding-bottom:clamp(36px,4vw,54px);
}
.foot__logo{width:190px;margin-bottom:18px}
.foot__blurb{margin:0;color:var(--smoke-2);font-size:.92rem;max-width:38ch}
.foot__nav,.foot__soc{display:flex;flex-direction:column;gap:12px}
.foot__nav a,.foot__soc a{
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke);
  transition:color .25s;width:fit-content;
}
.foot__nav a:hover,.foot__soc a:hover{color:var(--gold)}

.foot__bar{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:26px;border-top:1px solid var(--line);
}
.foot__bar p{margin:0;font-size:.78rem;color:var(--smoke-2);letter-spacing:.06em}
.foot__crew{text-transform:uppercase;letter-spacing:.2em}

/* ------------------------------------------------- card glow ring --------
   A slow-rotating gold "comet" arc that shows only through a thin rim.
   The spinning layer sits at z:-2; an inner panel (::after) carrying the
   card's real background covers everything except ~1.5px of edge.        */
.svc,.rev,.plink,.mcard{
  position:relative;z-index:0;overflow:hidden;
  border-radius:var(--r);
  background:transparent;border:0;
}
.svc::before,.rev::before,.plink::before,.mcard::before{
  content:"";position:absolute;z-index:-2;left:50%;top:50%;
  width:280%;height:280%;
  background-color:rgba(255,255,255,.09);
  background-image:conic-gradient(from 0deg,
    transparent 0deg,
    transparent 292deg,
    rgba(242,172,5,.30) 312deg,
    rgba(255,201,74,.85) 334deg,
    rgba(242,172,5,.30) 352deg,
    transparent 360deg);
  animation:ringspin 9s linear infinite;
  will-change:transform;
}
.rev::before{animation-duration:13s}
.plink::before{animation-duration:11s}
.svc:nth-child(2n)::before,.rev:nth-child(3n)::before,.plink:nth-child(2n)::before,
.mcard:nth-child(2n)::before{
  animation-delay:-5s;
}
.svc:nth-child(3n)::before,.rev:nth-child(2n)::before,.plink:nth-child(3n)::before,
.mcard:nth-child(3n)::before{
  animation-delay:-9s;animation-direction:reverse;
}
.svc:hover::before,.rev:hover::before,.plink:hover::before,.mcard:hover::before{
  background-color:rgba(242,172,5,.28);
}
.svc::after,.rev::after,.plink::after,.mcard::after{
  content:"";position:absolute;z-index:-1;inset:1.5px;
  border-radius:calc(var(--r) - 1.5px);
  /* opaque base under the (semi-transparent) panel gradient, or the
     spinning comet reads through the card body */
  background-color:#0e0e13;
  background-image:var(--cbg);
}
@keyframes ringspin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
/* Phones: the 16 review cards would each hold a large composited layer —
   freeze their rings (varied static arcs via the negative delays, no cost). */
@media (max-width:900px){
  .rev::before{animation-play-state:paused;will-change:auto}
}

/* ------------------------------------------------------------ animation --
   Elements are only pre-hidden when the .js-anim class is present, so a
   blocked CDN or a JS error leaves a fully readable page behind.          */
.js-anim [data-anim]{opacity:0}
/* Pre-hide the mask, never the inner span: GSAP owns .in's transform and
   a competing CSS transform makes it compose instead of replace. */
.js-anim .hero__title .line{opacity:0}

/* ============================================================ responsive */
@media (max-width:1080px){
  .svc__grid{grid-template-columns:repeat(2,1fr)}
  .rev__grid{columns:2}
  .plink__grid{grid-template-columns:repeat(2,1fr)}
  .mix__grid{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}

  .about__grid,.nyep__grid,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .nyep__media{order:-1}

  .creds__grid{grid-template-columns:repeat(2,1fr);gap:34px 20px}

  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(140px,30vw,200px)}
  .gal__i--tall{grid-row:span 1}
}

@media (max-width:900px){
  /* the medallion sits centered above the copy here — keep its zone
     (top ~35%) completely clear of the veil so the white crest stays white */
  .hero__veil{
    background:
      radial-gradient(90% 45% at 50% 18%,rgba(242,172,5,.05),transparent 62%),
      linear-gradient(0deg,var(--ink) 26%,rgba(8,8,11,.9) 44%,rgba(8,8,11,0) 64%);
  }
  /* content starts right below the badge instead of floating mid-screen,
     and everything centers under the centered medallion */
  .hero{align-items:flex-start}
  .hero__inner{padding-top:min(29svh,248px);text-align:center}
  .hero__lede{margin-inline:auto}
  .hero__cta{justify-content:center}
}

@media (max-width:640px){
  .hero{padding-top:104px}
  .hero__title{font-size:clamp(34px,13.5vw,56px)}
  .rev__grid{columns:1}
  .svc__grid,.plink__grid{grid-template-columns:minmax(0,1fr)}
  .mix__grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
  .form{grid-template-columns:minmax(0,1fr)}
  .field--half{grid-column:1/-1}
  .gal__i--wide{grid-column:span 2}
  .foot__bar{flex-direction:column}
}

/* --------------------------------------------- mobile home nav cards -----
   Paged mode only: summary cards on the home page leading to each page.  */
html:not(.paged) .mnav{display:none}
.mnav{padding:clamp(40px,8vw,64px) 0 clamp(56px,10vw,80px)}
.mnav__grid{display:grid;gap:14px}
.mcard{
  display:block;padding:20px 22px;
  --cbg:linear-gradient(var(--panel),var(--panel));
}
.mcard:active{--cbg:linear-gradient(var(--panel-2),var(--panel-2))}
.mcard__t{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:20px;letter-spacing:.02em;color:var(--white);line-height:1.1;
}
.mcard__a{color:var(--gold);font-family:var(--body);font-weight:600}
.mcard__d{display:block;margin-top:6px;color:var(--smoke);font-size:.9rem;line-height:1.55}

/* ------------------------------------------------- mobile paged mode -----
   Under 900px the head script adds .paged to <html>: each section belongs
   to a page via data-mpage and only the active page's sections render.
   js/main.js routes the URL hash to a page.                               */
html.paged [data-mpage]{display:none}
html.paged [data-mpage].mp-active{display:block}
html.paged .hero.mp-active{display:flex}
html.paged main{min-height:70svh}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
  [data-anim]{opacity:1!important;transform:none!important}
}