/* ============================================================
   ICONE — Global stylesheet
   Premium minimalist corporate design system
   ============================================================ */

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-soft: #55585c;
  --color-orange: #cd3a01;
  --color-blue: #002154;
  --color-charcoal: #1e1e1d;
  --color-green: #0d3f23;
  --color-border: #e6e6e4;

  --font-main: "Jost", "Helvetica Neue", Arial, sans-serif;

  --header-height: clamp(84px, 7vh, 100px);
  --container-max: 1880px;
  --gutter: clamp(24px, 5vw, 100px);

  --card-size: clamp(190px, 15.5vw, 260px);
  --card-gap: clamp(18px, 1.6vw, 28px);

  --transition: 260ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.letter-spaced {
  letter-spacing: 0.14em;
}

/* Visible keyboard focus for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  max-width: var(--container-max);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  height: clamp(28px, 2.2vw, 36px);
  width: auto;
}

.brand-name {
  font-size: clamp(18px, 1.5vw, 23px);
  letter-spacing: 0.34em;
  font-weight: 400;
  color: var(--color-text);
  padding-left: 2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 40px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.main-nav a {
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.14em;
  font-weight: 400;
  color: var(--color-text);
  padding-bottom: 10px;
  position: relative;
  transition: color var(--transition);
  white-space: nowrap;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}


.main-nav a:hover {
  color: var(--color-orange);
}

.main-nav a:hover::after {
  transform: scaleX(1);
}

.main-nav a.is-active {
  color: var(--color-text);
}

.main-nav a.is-active::after {
  transform: scaleX(1);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 28px;
  border-left: 1px solid var(--color-border);
}


.lang-switch button {
  background: none;
  border: none;
  font-family: inherit;
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  transition: color var(--transition);
  padding: 4px 0;
}


.lang-switch button:hover {
  color: var(--color-text);
}

.lang-switch button.is-active {
  color: var(--color-orange);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 30px;
  height: 22px;
  position: relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-text);
  transition: transform var(--transition);
}

.nav-toggle span {
  top: 50%;
}

.nav-toggle span::before {
  top: -8px;
}

.nav-toggle span::after {
  top: 8px;
}

/* ============================================================
   Hero / main content
   ============================================================ */

.hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 108px) var(--gutter) clamp(60px, 10vh, 120px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(48px, 8vw, 140px);
  align-items: center;
}




/* Cards grid */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--card-size));
  grid-template-rows: repeat(2, var(--card-size));
  gap: var(--card-gap);
}

.service-card {
  width: var(--card-size);
  height: var(--card-size);
  border-radius: 3px;
  padding: clamp(16px, 1.5vw, 22px) clamp(15px, 1.35vw, 20px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background var(--transition);
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.35);
}

.service-card:hover::after {
  background: rgba(255, 255, 255, 0.04);
}

.service-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
}

.service-card--studio { background: var(--color-orange); }
.service-card--business { background: var(--color-blue); }
.service-card--technologies { background: var(--color-charcoal); }
.service-card--industries { background: var(--color-green); }

.card-icon {
  width: clamp(20px, 1.6vw, 27px);
  height: clamp(20px, 1.6vw, 27px);
  stroke: #fff;
  fill: none;
  stroke-width: 1.4;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-title {
  color: #fff;
  font-size: clamp(13px, 1.05vw, 17px);
  letter-spacing: 0.14em;
  font-weight: 400;
}

.card-rule {
  width: 26px;
  height: 2px;
  background: var(--color-orange);
}

.service-card--studio .card-rule {
  background: rgba(255, 255, 255, 0.65);
}

.card-descriptor {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(10px, 0.82vw, 12.5px);
  letter-spacing: 0.01em;
  font-weight: 300;
}

.card-arrow-row {
  display: flex;
  justify-content: flex-end;
}


.card-arrow {
  width: clamp(16px, 1.3vw, 20px);
  height: clamp(16px, 1.3vw, 20px);
  stroke: #fff;
  fill: none;
  stroke-width: 1.4;
  transition: transform var(--transition);
}


.service-card:hover .card-arrow {
  transform: translateX(4px);
}


/* Hero copy */

.hero-copy {
  max-width: 620px;
}

.eyebrow {
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.28em;
  color: var(--color-text-soft);
  margin: 0 0 10px;
}

.headline {
  font-size: clamp(23px, 2.15vw, 32px);
  letter-spacing: 0.1em;
  font-weight: 400;
  margin: 0 0 20px;
  line-height: 1.25;
}

.hero-rule {
  width: 52px;
  height: 2px;
  background: var(--color-orange);
  margin: 0 0 26px;
}


.hero-lines {
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hero-lines li {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.6;
}

.explore-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.16em;
  font-weight: 400;
  color: var(--color-text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-orange);
  transition: gap var(--transition), color var(--transition);
}

.explore-link:hover {
  gap: 22px;
  color: var(--color-orange);
}

.explore-link svg {
  width: 18px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}


/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  max-width: var(--container-max);
  margin: -100px auto 0;
  padding: 28px var(--gutter) 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.social-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 1.9vw, 30px);
}

.social-links a {
  width: clamp(36px, 2.8vw, 46px);
  height: clamp(36px, 2.8vw, 46px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: background var(--transition), color var(--transition);
}

.social-links svg {
  width: clamp(17px, 1.4vw, 22px);
  height: clamp(17px, 1.4vw, 22px);
  fill: currentColor;
}

.social-links a:hover {
  background: var(--color-charcoal);
  color: #fff;
}

.footer-copy {
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
}

/* ============================================================
   Placeholder pages (What We Do, Branches, Contact, service pages)
   ============================================================ */

.placeholder-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(80px, 16vh, 180px) var(--gutter);
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.placeholder-main .eyebrow {
  margin-bottom: 14px;
}

.placeholder-main .headline {
  margin-bottom: 24px;
}

.placeholder-main p {
  font-size: 15px;
  color: var(--color-text-soft);
  max-width: 520px;
  line-height: 1.7;
  margin: 0 0 34px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-orange);
  width: fit-content;
}

.back-link:hover {
  color: var(--color-orange);
}

/* ============================================================
   Desktop visual calibration
   Target: at normal 100% browser zoom, approximate the visual
   density of the approved +1 Safari zoom reference.
   This intentionally scales the responsive design tokens and
   component limits — it does NOT use CSS zoom or transform: scale().
   ============================================================ */

@media (min-width: 1024px) {
  :root {
    --header-height: clamp(100px, 8.3vh, 119px);
    --gutter: clamp(29px, 5.9vw, 119px);
    --card-size: clamp(226px, 18.4vw, 309px);
    --card-gap: clamp(21px, 1.9vw, 33px);
  }

  .brand {
    gap: 14px;
  }

  .brand-logo {
    height: clamp(33px, 2.6vw, 43px);
  }

  .brand-name {
    font-size: clamp(21px, 1.78vw, 27px);
  }

  .header-right,
  .main-nav {
    gap: 47px;
  }

  .main-nav a {
    font-size: clamp(13px, 1vw, 16px);
    padding-bottom: 12px;
  }

  .lang-switch {
    gap: 21px;
    padding-left: 33px;
    transform: translateY(-7px);
  }

  .lang-switch button {
    font-size: clamp(13px, 0.95vw, 15px);
  }

  .hero {
    padding-top: clamp(37px, 7vh, 100px);
    padding-bottom: clamp(71px, 11.9vh, 143px);
    gap: clamp(57px, 9.5vw, 166px);
  }

  .service-card {
    padding: clamp(19px, 1.78vw, 26px) clamp(18px, 1.6vw, 24px);
  }

  .card-icon {
    width: clamp(24px, 1.9vw, 32px);
    height: clamp(24px, 1.9vw, 32px);
  }

  .card-title {
    font-size: clamp(15px, 1.25vw, 20px);
  }

  .card-descriptor {
    font-size: clamp(12px, 0.97vw, 15px);
  }

  .card-arrow {
    width: clamp(19px, 1.55vw, 24px);
    height: clamp(19px, 1.55vw, 24px);
  }

  .hero-copy {
    max-width: 736px;
  }

  .eyebrow {
    font-size: clamp(13px, 1vw, 16px);
  }

  .headline {
    font-size: clamp(27px, 2.55vw, 38px);
    margin-bottom: 24px;
    padding-bottom: 0;
  }

  .hero-rule {
    width: 62px;
    margin-bottom: 31px;
  }

  .hero-lines {
    margin-bottom: 43px;
    gap: 8px;
  }

  .hero-lines li {
    font-size: clamp(19px, 1.66vw, 24px);
  }

  .explore-link {
    gap: 19px;
    font-size: clamp(13px, 1vw, 16px);
  }

  .social-links {
    gap: clamp(24px, 2.25vw, 36px);
  }

  .social-links a {
    width: clamp(43px, 3.3vw, 55px);
    height: clamp(43px, 3.3vw, 55px);
  }

  .social-links svg {
    width: clamp(20px, 1.66vw, 26px);
    height: clamp(20px, 1.66vw, 26px);
  }

  .footer-copy {
    font-size: clamp(13px, 0.95vw, 15px);
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
  .header-right {
    gap: 24px;
  }

  .main-nav {
    gap: 24px;
  }
}

@media (max-width: 820px) {
  .nav-toggle {
    display: block;
  }

  .header-right {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
  }

  .header-right.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .main-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  .main-nav a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .lang-switch {
    border-left: none;
    padding-left: 0;
    padding-top: 16px;
  }


  .hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }


  .hero-copy {
    max-width: 460px;
  }

  .hero-rule {
    margin-left: auto;
    margin-right: auto;
  }

}

@media (max-width: 520px) {
  :root {
    --card-size: 146px;
    --card-gap: 14px;
  }

  .brand-name {
    font-size: 17px;
    letter-spacing: 0.22em;
  }

  .card-title {
    font-size: 13px;
  }

  .card-descriptor {
    font-size: 10.5px;
  }

  .site-footer {
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
   ICONE Studio — content only. Header/footer stay inherited from
   the original site styles above.
   ============================================================ */
.studio-shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 34px var(--gutter) 160px;
}
.studio-breadcrumb {
  margin: 0 0 28px;
  font-size: 13px;
  letter-spacing: .09em;
  color: var(--color-text-soft);
}
.studio-breadcrumb span { color: var(--color-orange); }
.studio-hero {
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(460px,1.22fr);
  gap: 72px;
  align-items: center;
  margin-bottom: 54px;
}
.studio-kicker {
  margin: 0 0 14px;
  color: var(--color-orange);
  font-size: clamp(54px,6vw,90px);
  font-weight: 300;
  letter-spacing: .07em;
  line-height: 1;
}
.studio-subtitle {
  margin: 0;
  font-size: clamp(19px,1.75vw,28px);
  letter-spacing: .12em;
}
 .studio-subtitle a { color: inherit; text-decoration: none; }
.studio-subtitle a:hover { color: var(--color-orange); }
.orange-rule,.section-rule,.panel-rule {
  display:block;
  width: 66px;
  height: 2px;
  background: var(--color-orange);
}
.orange-rule { margin: 27px 0 25px; }
.studio-copy {
  max-width: 470px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
.wave-art {
  min-height: 265px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.wave-art::before {
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%; height:1px;
  background:rgba(215,59,0,.18);
}
.wave-art span {
  width:100%; height:230px;
  display:block;
  background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,75,14,.52) 12px 14px);
  -webkit-mask: radial-gradient(ellipse 52% 47% at 50% 50%,#000 0 52%,transparent 82%);
  mask: radial-gradient(ellipse 52% 47% at 50% 50%,#000 0 52%,transparent 82%);
  opacity:.72;
}
.studio-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--color-border);
  margin-bottom:46px;
}
.studio-panel {
  min-height:255px;
  padding:0 36px 34px 0;
}
.studio-panel + .studio-panel {
  border-left:1px solid var(--color-border);
  padding-left:40px;
}
.panel-top { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.panel-num { color:var(--color-orange); font-size:34px; font-weight:300; line-height:1; }
.panel-icon { color:var(--color-orange); font-size:38px; font-weight:300; line-height:1; }
.panel-icon svg { width:44px; height:44px; display:block; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.panel-rule { width:50px; margin:17px 0 27px; }
.studio-panel h2 { margin:0 0 12px; font-size:20px; font-weight:400; letter-spacing:.07em; }
.studio-panel p { max-width:310px; min-height:56px; margin:0 0 22px; font-size:14px; line-height:1.55; }
.action-link { display:inline-flex; align-items:center; gap:16px; color:var(--color-orange); font-size:13px; letter-spacing:.07em; }
.action-link span { font-size:20px; font-weight:300; line-height:1; }
.studio-section { margin:0 0 42px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.section-head h2 { margin:0 0 11px; font-size:16px; font-weight:400; letter-spacing:.16em; }
.section-rule { width:34px; }
.release-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.release-player {
  position:relative;
  min-height:156px;
  padding:14px 14px 12px 116px;
  border-radius:4px;
  color:#fff;
  background:linear-gradient(145deg,#111,#333);
  box-shadow:0 3px 8px rgba(0,0,0,.08);
}
.release-cover { position:absolute; left:14px; top:14px; width:88px; height:88px; border-radius:4px; background:#222; }
.release-cover--velchi { background:linear-gradient(145deg,#0f0d09,#a25a21 55%,#1b1712); }
.release-cover--stephanois { background:linear-gradient(160deg,#b9a98f,#50636b 45%,#121618); }
.release-cover--nostalgia { background:linear-gradient(145deg,#0b0b0b,#6f310d 58%,#111); }
.release-meta { display:flex; flex-direction:column; gap:2px; min-height:62px; padding-top:8px; }
.release-meta strong { font-size:14px; font-weight:500; }
.release-meta span { font-size:12px; opacity:.82; }
.release-controls { display:flex; align-items:center; gap:16px; }
.release-controls button { width:34px; height:34px; border:0; border-radius:50%; background:#fff; color:#111; cursor:pointer; }
.release-controls span { opacity:.9; }
.release-progress { position:absolute; left:14px; right:14px; bottom:10px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; font-size:10px; }
.release-progress i { height:2px; background:rgba(255,255,255,.25); }
.visual-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.visual-card { position:relative; min-height:175px; overflow:hidden; border-radius:4px; color:#fff; padding:16px; display:flex; align-items:center; justify-content:center; background:#181818; }
.visual-card::before { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.8),transparent 60%); }
.visual-card--street { background:linear-gradient(135deg,#111 20%,#59321a 52%,#090909); }
.visual-card--coast { background:linear-gradient(150deg,#837760,#263943 56%,#111); }
.visual-card--aerial { background:linear-gradient(150deg,#cba06b,#246574 58%,#0b262c); }
.visual-card div { position:absolute; left:16px; right:16px; bottom:14px; z-index:2; display:flex; flex-direction:column; gap:2px; }
.visual-card strong { font-size:13px; font-weight:500; }
.visual-card small { font-size:11px; opacity:.86; }
.visual-play { position:relative; z-index:2; width:52px; height:38px; border-radius:9px; background:rgba(0,0,0,.62); display:grid; place-items:center; padding-left:3px; }
.cta-band { margin-top:46px; padding:27px 34px; background:#f7f7f6; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; }
.cta-icon { color:var(--color-orange); font-size:33px; }
.cta-copy h3 { margin:0 0 4px; font-size:21px; font-weight:400; letter-spacing:.10em; }
.cta-copy span { font-size:14px; }
@media (max-width: 980px) {
  .studio-shell { padding-bottom:130px; }
  .studio-hero { grid-template-columns:1fr; gap:16px; }
  .wave-art { min-height:170px; }
  .studio-grid,.release-cards,.visual-cards { grid-template-columns:1fr; }
  .studio-panel { padding:28px 0; }
  .studio-panel + .studio-panel { border-left:0; border-top:1px solid var(--color-border); padding-left:0; }
  .cta-band { grid-template-columns:auto 1fr; }
  .cta-band .action-link { grid-column:2; }
}
@media (max-width: 520px) {
  .studio-shell { padding-top:28px; }
  .studio-kicker { font-size:52px; }
  .studio-subtitle { font-size:18px; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .release-player { padding-left:110px; }
  .cta-band { grid-template-columns:1fr; }
  .cta-band .action-link { grid-column:auto; }
}

/* ============================================================
   RELEASES — final desktop treatment
   ============================================================ */
.release-page-body { min-height:100vh; }
.releases-shell { padding-top:34px; padding-bottom:68px; }
.releases-intro {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:48px;
  align-items:end;
  margin-bottom:42px;
}
.releases-intro .studio-kicker { font-size:clamp(58px,5.9vw,88px); margin-bottom:0; }
.releases-intro .studio-copy { max-width:520px; }
.releases-intro-visual {
  position:relative;
  width:min(610px,44vw);
  height:180px;
  align-self:center;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) 1px minmax(120px,.55fr);
  align-items:center;
  gap:28px;
  margin:6px 0 0;
}
.releases-intro-visual::before {
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background:linear-gradient(90deg,rgba(236,67,20,.05),rgba(236,67,20,.22),rgba(236,67,20,.06));
}
.release-soundwave {
  height:142px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  opacity:.55;
}
.release-soundwave span {
  display:block;
  width:2px;
  height:var(--h);
  min-height:10px;
  background:linear-gradient(to bottom,rgba(236,67,20,.05),rgba(236,67,20,.58),rgba(236,67,20,.05));
}
.release-visual-separator {
  height:112px;
  background:#ededed;
  z-index:1;
}
.release-film-mark {
  width:124px;
  height:78px;
  border:1px solid rgba(236,67,20,.34);
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.release-film-mark::before, .release-film-mark::after {
  content:"";
  position:absolute;
  left:12px; right:12px;
  height:1px;
  background:rgba(236,67,20,.14);
}
.release-film-mark::before { top:12px; }
.release-film-mark::after { bottom:12px; }
.release-play-triangle {
  width:0; height:0;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  border-left:17px solid rgba(236,67,20,.66);
  margin-left:4px;
}
.release-visual-labels {
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  justify-content:space-between;
  padding:0 12px 0 28px;
  color:#aaa;
  font-size:10px;
  letter-spacing:.25em;
}
.release-platform-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:30px;
  position:relative;
}
.release-platform-grid::before {
  content:"";
  position:absolute;
  left:50%; top:0; bottom:26px;
  width:1px;
  background:#e5e5e5;
  transform:translateX(-15px);
}
.release-platform { min-width:0; }
.release-platform--spotify { padding-right:14px; }
.release-platform--youtube { padding-left:14px; }
.release-platform-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.release-platform-head h2 {
  margin:0;
  display:flex;
  align-items:center;
  gap:11px;
  font-size:15px;
  font-weight:400;
  letter-spacing:.16em;
  white-space:nowrap;
}
.release-view-all { font-size:11px; white-space:nowrap; }
.platform-icon { width:22px; height:22px; display:inline-grid; place-items:center; flex:0 0 auto; }
.platform-icon svg { width:100%; height:100%; }
.platform-icon--spotify { color:#1ed760; }
.platform-icon--spotify svg circle { fill:currentColor; stroke:none; }
.platform-icon--spotify svg path { fill:none; stroke:#fff; stroke-width:1.35; stroke-linecap:round; }
.platform-icon--youtube { color:#ff0000; }
.platform-icon--youtube svg path:first-child { fill:currentColor; }
.platform-icon--youtube svg path:last-child { fill:#fff; }
.featured-release {
  min-height:186px;
  position:relative;
  overflow:hidden;
  border-radius:5px;
  background:linear-gradient(135deg,#111,#242424);
  color:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.12);
  margin-bottom:17px;
}
.featured-release--spotify { padding:20px 66px 56px 176px; }
.featured-cover {
  position:absolute;
  left:16px; top:16px;
  width:142px; height:142px;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
}
.cover-word {
  position:absolute;
  left:0; right:0; bottom:13px;
  text-align:center;
  color:#fff;
  font-size:10px;
  letter-spacing:.18em;
}
.featured-info { display:flex; flex-direction:column; gap:4px; min-width:0; }
.featured-info small { color:#27d760; font-size:10px; letter-spacing:.09em; }
.featured-info strong { font-size:20px; font-weight:400; line-height:1.15; }
.featured-info span { font-size:12px; opacity:.85; }
.spotify-mark { position:absolute; top:18px; right:18px; width:27px; height:27px; }
.spotify-mark svg { width:100%; height:100%; }
.spotify-mark circle { fill:#fff; }
.spotify-mark path { fill:none; stroke:#111; stroke-width:1.25; stroke-linecap:round; }
.featured-controls {
  position:absolute;
  left:176px; right:16px; bottom:13px;
  display:flex;
  align-items:center;
  gap:10px;
}
.featured-controls button {
  border:0; background:transparent; color:#fff;
  font-family:inherit; padding:0; cursor:pointer;
}
.featured-controls .main-play {
  width:31px; height:31px; border-radius:50%; background:#fff; color:#111;
  display:grid; place-items:center; font-size:12px;
}
.featured-controls .heart { color:#1ed760; font-size:20px; margin-left:auto; }
.featured-progress { min-width:0; flex:1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; font-size:9px; opacity:.92; }
.featured-progress i { height:3px; border-radius:3px; background:#555; position:relative; }
.featured-progress b { display:block; width:38%; height:100%; background:#5dd785; border-radius:3px; }
.featured-progress b::after { content:""; position:absolute; left:38%; top:50%; width:8px; height:8px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }
.featured-release--youtube { padding:16px 18px 48px; display:grid; grid-template-columns:minmax(190px,1.08fr) minmax(0,.92fr); gap:18px; align-items:center; }
.video-frame { min-height:132px; position:relative; overflow:hidden; border-radius:3px; }
.video-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:40px; border-radius:10px; background:#ff0000; display:grid; place-items:center; padding-left:3px; color:#fff; font-size:20px; }
.youtube-info small { color:#ff2424; }
.youtube-info strong { font-size:16px; }
.youtube-controls { position:absolute; left:16px; right:16px; bottom:11px; display:flex; align-items:center; gap:10px; font-size:9px; color:#ddd; }
.youtube-progress { flex:1; height:3px; border-radius:3px; background:#4a4a4a; position:relative; }
.youtube-progress b { display:block; width:34%; height:100%; background:#ff0000; border-radius:3px; }
.youtube-progress b::after { content:""; position:absolute; left:34%; top:50%; width:8px; height:8px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }
.youtube-tools { white-space:nowrap; font-size:12px; }
.platform-list { border:1px solid #dedede; border-radius:4px; overflow:auto; max-height:318px; background:#fff; }
.platform-row {
  min-height:62px;
  display:grid;
  grid-template-columns:66px minmax(0,1fr) 46px 48px 30px 30px;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-bottom:1px solid #e8e8e8;
  position:relative;
}
.platform-row:last-child { border-bottom:0; }
.platform-row.is-selected { background:linear-gradient(90deg,#fff4ee,#fff); }
.platform-row.is-selected::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--color-orange); }
.mini-cover { width:66px; height:48px; border-radius:3px; background:#ddd; overflow:hidden; }
.release-platform--spotify .mini-cover { width:48px; height:48px; margin-left:8px; }
.row-title { min-width:0; display:flex; flex-direction:column; gap:2px; }
.row-title strong { font-size:13px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-title small { font-size:10px; color:#555; white-space:nowrap; }
.platform-row.is-selected .row-title strong { color:var(--color-orange); }
.row-year,.row-duration { font-size:10px; color:#666; text-align:center; }
.platform-row button { border:0; background:transparent; font-family:inherit; color:#222; padding:3px; cursor:pointer; }
.release-note { margin:10px 0 0; text-align:center; color:#777; font-size:10px; }
/* Artistic placeholders until real cover/thumbnail files are connected */
.cover-stephanois { background:linear-gradient(160deg,#7b8d91 0%,#c9b89c 38%,#26383d 68%,#101719 100%); }
.cover-nostalgia { background:linear-gradient(145deg,#16100d,#6f310d 55%,#0b0b0b); }
.cover-velchi { background:linear-gradient(145deg,#0d5157,#d9b36b 53%,#10282a); }
.cover-adrar { background:linear-gradient(160deg,#c6b08a,#74623f 42%,#30291c); }
.cover-tergit { background:linear-gradient(150deg,#ba7e48,#65411f 46%,#251a12); }
.video-street { background:linear-gradient(100deg,#070809 10%,#442816 45%,#0c0d0e 75%,#5a3217); }
.video-coast { background:linear-gradient(155deg,#8aa1a2,#d8c8a7 45%,#3f5960 60%,#1d2f33); }
.video-boat { background:linear-gradient(165deg,#c7b68f,#8d6b3c 55%,#2f3d3a); }
.video-adrar { background:linear-gradient(155deg,#baa06e,#70552f 52%,#303532); }
.video-tergit { background:linear-gradient(155deg,#d2a16c,#704322 53%,#2a2118); }
.release-footer { margin:0 auto; padding-top:26px; }

@media (max-width: 1100px) {
  .release-platform-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .release-view-all { align-self:flex-end; }
  .featured-release--spotify { padding-left:146px; }
  .featured-cover { width:114px; height:114px; }
  .featured-controls { left:146px; }
  .featured-release--youtube { grid-template-columns:1fr; padding-bottom:48px; }
  .video-frame { min-height:110px; }
}
@media (max-width: 900px) {
  .releases-intro { grid-template-columns:1fr; gap:10px; }
  .releases-intro-visual { justify-self:start; width:100%; max-width:620px; margin:0; }
  .release-platform-grid { grid-template-columns:1fr; gap:42px; }
  .release-platform-grid::before { display:none; }
  .release-platform--spotify,.release-platform--youtube { padding:0; }
}
@media (max-width: 620px) {
  .releases-intro-visual { display:none; }
  .featured-release--spotify { padding:16px 16px 58px 118px; min-height:150px; }
  .featured-cover { left:12px; top:12px; width:92px; height:92px; }
  .featured-controls { left:12px; right:12px; }
  .featured-progress { display:none; }
  .platform-row { grid-template-columns:54px minmax(0,1fr) 32px 28px; }
  .platform-row .row-year,.platform-row .row-duration { display:none; }
  .mini-cover { width:54px; height:42px; }
  .release-platform--spotify .mini-cover { width:42px; height:42px; margin-left:5px; }
}

/* ============================================================
   PRODUCTION — visual treatment aligned with approved mockup
   ============================================================ */
.production-shell { padding-top:34px; padding-bottom:132px; }
.production-shell .studio-breadcrumb span { color:var(--color-orange); }
.production-hero {
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(480px,1.28fr);
  gap:64px;
  align-items:center;
  margin-bottom:62px;
}
.production-hero .studio-kicker { margin-bottom:24px; }
.production-hero .studio-subtitle { letter-spacing:.04em; font-size:clamp(21px,1.55vw,28px); }
.production-hero .studio-copy { max-width:520px; }
.production-wave { min-height:290px; position:relative; display:flex; align-items:center; overflow:hidden; }
.production-wave::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(215,59,0,.15); }
.production-wave span {
  display:block; width:100%; height:250px; opacity:.72;
  background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,75,14,.45) 7px 9px);
  -webkit-mask:radial-gradient(ellipse 56% 50% at 53% 50%,#000 0 48%,rgba(0,0,0,.9) 58%,transparent 86%);
  mask:radial-gradient(ellipse 56% 50% at 53% 50%,#000 0 48%,rgba(0,0,0,.9) 58%,transparent 86%);
  clip-path:polygon(0 48%,5% 45%,10% 50%,15% 39%,20% 53%,25% 29%,30% 57%,35% 18%,40% 67%,45% 8%,50% 73%,55% 20%,60% 64%,65% 12%,70% 62%,75% 25%,80% 57%,85% 35%,90% 53%,95% 44%,100% 49%,100% 51%,95% 56%,90% 47%,85% 65%,80% 43%,75% 75%,70% 38%,65% 88%,60% 36%,55% 80%,50% 27%,45% 92%,40% 33%,35% 82%,30% 43%,25% 71%,20% 47%,15% 61%,10% 50%,5% 55%,0 52%);
}
.production-services { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--color-border); margin-bottom:52px; }
.production-service { min-height:312px; padding:0 28px 34px 0; display:flex; flex-direction:column; align-items:flex-start; }
.production-service + .production-service { border-left:1px solid var(--color-border); padding-left:30px; }
.production-service-icon { color:var(--color-orange); margin-bottom:18px; }
.production-service-icon svg { width:45px; height:45px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.production-service h2 { margin:0; font-size:20px; font-weight:400; letter-spacing:.045em; }
.production-mini-rule { display:block; width:34px; height:2px; background:var(--color-orange); margin:16px 0 15px; }
.production-tags { margin:0 0 22px; font-size:13px; line-height:1.5; color:var(--color-text); }
.production-description { margin:0 0 28px; max-width:245px; font-size:13px; line-height:1.65; min-height:66px; }
.production-service .action-link { margin-top:auto; }
.production-process { margin:0 0 52px; }
.production-section-title h2 { margin:0 0 12px; font-size:16px; font-weight:400; letter-spacing:.13em; }
.production-section-title > span { display:block; width:34px; height:2px; background:var(--color-orange); margin-bottom:28px; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.process-step { position:relative; display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:start; min-height:145px; padding-right:34px; }
.process-icon { width:66px; height:66px; border-radius:50%; background:#f7f7f6; display:grid; place-items:center; color:var(--color-orange); }
.process-icon svg { width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.process-copy > div { display:flex; align-items:baseline; gap:13px; margin:8px 0 17px; }
.process-copy strong { color:var(--color-orange); font-size:19px; font-weight:400; }
.process-copy h3 { margin:0; font-size:13px; font-weight:400; letter-spacing:.03em; }
.process-copy p { margin:0; font-size:12px; line-height:1.55; }
.process-arrow { position:absolute; right:14px; top:25px; color:var(--color-orange); font-size:29px; font-weight:300; }
.production-cta-grid { display:grid; grid-template-columns:1fr 1fr; background:#f8f8f7; }
.production-cta { min-height:270px; display:grid; grid-template-columns:76px 1fr; gap:24px; padding:32px 38px; }
.production-cta + .production-cta { border-left:1px solid var(--color-border); }
.production-cta-icon { color:var(--color-orange); padding-top:1px; }
.production-cta-icon svg { width:52px; height:52px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.production-cta h2 { margin:0; font-size:21px; font-weight:400; letter-spacing:.11em; line-height:1.35; }
.production-cta p { margin:0 0 22px; max-width:430px; font-size:13px; line-height:1.6; }
.production-cta small { display:block; margin-top:27px; font-size:11px; }
.production-page-body .site-footer { margin-top:-96px; }
@media (max-width:1100px) {
  .production-hero { grid-template-columns:1fr; gap:10px; }
  .production-wave { min-height:180px; }
  .production-services { grid-template-columns:repeat(2,1fr); }
  .production-service:nth-child(3) { border-left:0; border-top:1px solid var(--color-border); padding-left:0; padding-top:30px; }
  .production-service:nth-child(4) { border-top:1px solid var(--color-border); padding-top:30px; }
  .process-grid { grid-template-columns:repeat(2,1fr); row-gap:28px; }
  .production-cta-grid { grid-template-columns:1fr; }
  .production-cta + .production-cta { border-left:0; border-top:1px solid var(--color-border); }
}
@media (max-width:680px) {
  .production-services,.process-grid { grid-template-columns:1fr; }
  .production-service,.production-service + .production-service,.production-service:nth-child(3),.production-service:nth-child(4) { border-left:0; border-top:1px solid var(--color-border); padding:28px 0; min-height:0; }
  .production-service:first-child { border-top:0; padding-top:0; }
  .process-step { min-height:125px; }
  .production-cta { grid-template-columns:1fr; }
  .production-wave { min-height:145px; }
}

/* ============================================================
   ARTISTS & PROJECTS / CREATION / MEDIA — mockup-aligned pages
   Home header/footer intentionally preserved.
   ============================================================ */
.studio-home-footer { margin-top:0; }
.artists-shell,.creation-shell,.media-shell { padding-top:34px; padding-bottom:64px; }
.artists-hero,.creation-hero,.media-hero { display:grid; grid-template-columns:minmax(0,.72fr) minmax(440px,1.28fr); gap:62px; align-items:center; margin-bottom:50px; }
.artists-hero .studio-kicker,.creation-hero .studio-kicker,.media-hero .studio-kicker { font-size:clamp(58px,5.4vw,86px); }
.artists-hero .studio-copy,.creation-hero .studio-copy,.media-hero .studio-copy { max-width:470px; }

/* Artists */
.artists-wave { min-height:260px; display:flex; align-items:center; position:relative; overflow:hidden; }
.artists-wave::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(255,75,14,.12); }
.artists-wave span { width:100%; height:210px; opacity:.72; background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(255,75,14,.36) 11px 14px); clip-path:polygon(0 49%,7% 47%,13% 52%,18% 40%,23% 55%,28% 30%,33% 62%,39% 16%,44% 73%,49% 8%,54% 68%,59% 20%,64% 62%,69% 12%,74% 65%,80% 24%,85% 57%,91% 38%,96% 52%,100% 49%,100% 51%,96% 48%,91% 62%,85% 43%,80% 76%,74% 35%,69% 88%,64% 38%,59% 80%,54% 32%,49% 92%,44% 27%,39% 84%,33% 38%,28% 70%,23% 45%,18% 60%,13% 48%,7% 53%,0 51%); -webkit-mask:radial-gradient(ellipse 55% 46% at 66% 50%,#000 0 54%,transparent 88%); mask:radial-gradient(ellipse 55% 46% at 66% 50%,#000 0 54%,transparent 88%); }
.artists-projects-grid { display:grid; grid-template-columns:.95fr 1.05fr; border-bottom:1px solid var(--color-border); }
.artists-column { padding-right:42px; border-right:1px solid var(--color-border); }
.projects-column { padding-left:48px; }
.numbered-title { display:flex; gap:26px; align-items:flex-start; margin-bottom:20px; }
.numbered-title>span { color:var(--color-orange); font-size:34px; font-weight:300; line-height:1; }
.numbered-title h2 { margin:0 0 7px; font-size:18px; font-weight:400; letter-spacing:.10em; }
.numbered-title small { color:#777; font-size:11px; }
.artist-roster { display:grid; grid-template-columns:1fr 1fr; column-gap:44px; }
.artist-card { min-height:72px; display:grid; grid-template-columns:52px 1fr auto; gap:14px; align-items:center; border-bottom:1px solid #e8e8e8; }
.artist-card strong { display:block; font-size:12px; letter-spacing:.04em; }
.artist-card small { color:#555; font-size:11px; }
.artist-card b { color:var(--color-orange); font-weight:300; font-size:24px; }
.artist-photo { width:48px; height:48px; border-radius:4px; display:block; background:#222; }
.ap1{background:linear-gradient(145deg,#111,#7a421f 58%,#080808)} .ap2{background:linear-gradient(155deg,#101317,#48505a 55%,#121214)} .ap3{background:linear-gradient(135deg,#e6e6e6,#202020)} .ap4{background:linear-gradient(145deg,#ddc4b1,#2b1d1c)} .ap5{background:linear-gradient(150deg,#d3a66d,#31261a)} .ap6{background:linear-gradient(145deg,#222,#090909)} .ap7{background:linear-gradient(145deg,#ddd,#252525)} .ap8{background:linear-gradient(145deg,#8b5e3b,#1d2b31)} .ap9{background:linear-gradient(145deg,#170b09,#9a1f0d)} .ap10{background:linear-gradient(145deg,#b4774d,#3d2c23)}
.artist-viewall { margin-top:28px; }
.project-player { display:grid; grid-template-columns:40% 60%; min-height:190px; border-radius:5px 5px 0 0; overflow:hidden; background:linear-gradient(145deg,#151515,#252525); color:#fff; }
.project-video { position:relative; min-height:190px; display:grid; place-items:center; }
.project-video button { width:62px; height:62px; border-radius:50%; border:0; background:rgba(0,0,0,.65); color:#fff; font-size:26px; padding-left:5px; }
.project-now { padding:20px 24px; display:flex; flex-direction:column; }
.project-now strong { font-size:18px; } .project-now>span { margin-top:4px; font-size:12px; } .project-controls { margin-top:24px; font-size:18px; letter-spacing:.06em; }
.project-progress { position:relative; height:3px; margin:22px 0 8px; background:#555; } .project-progress i { position:absolute; left:0; top:0; bottom:0; width:30%; background:#ff2a1a; } .project-progress b { position:absolute; left:30%; top:50%; width:9px; height:9px; border-radius:50%; background:#ff2a1a; transform:translate(-50%,-50%); }
.project-now small { font-size:10px; }
.project-list { border:1px solid #ddd; border-top:0; }
.project-list>div { min-height:52px; display:grid; grid-template-columns:24px 52px minmax(0,1fr) 44px; gap:12px; align-items:center; padding:6px 12px; border-bottom:1px solid #eee; }
.project-list>div:last-child { border-bottom:0; } .project-list em { font-style:normal; font-size:11px; } .project-list span { font-size:12px; } .project-list small { font-size:10px; text-align:right; }
.project-thumb { width:46px; height:32px; border-radius:3px; background:#444; } .pt1{background:linear-gradient(145deg,#0e1d24,#3e6170)} .pt2{background:linear-gradient(145deg,#2b0b04,#f05c1f)} .pt3{background:linear-gradient(145deg,#7994a2,#d4b88b)} .pt4{background:linear-gradient(145deg,#050505,#a54e16)} .pt5{background:linear-gradient(145deg,#30100b,#7a3d20)}
.project-youtube { margin-top:18px; }

/* Creation */
.creation-art { min-height:300px; position:relative; overflow:hidden; opacity:.78; background:linear-gradient(90deg,transparent 0 32%,rgba(255,75,14,.025) 32% 100%); }
.c-grid { position:absolute; inset:20px 0 0 16%; background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px); background-size:54px 54px; -webkit-mask:linear-gradient(90deg,transparent,#000 12% 88%,transparent); mask:linear-gradient(90deg,transparent,#000 12% 88%,transparent); }
.c-circle { position:absolute; width:220px; height:220px; border:1px solid rgba(0,0,0,.18); border-radius:50%; right:5%; top:18px; }
.c-mark { position:absolute; left:26%; top:42%; font-size:120px; line-height:1; font-weight:300; color:rgba(0,0,0,.08); }
.c-impact { position:absolute; right:5%; top:53%; font-size:9px; font-weight:500; letter-spacing:.12em; }
.creation-services,.media-services { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--color-border); margin-bottom:42px; }
.creation-services article,.media-services article { min-height:300px; padding:0 36px 34px 0; display:flex; flex-direction:column; }
.creation-services article+article,.media-services article+article { border-left:1px solid var(--color-border); padding-left:38px; }
.service-top { display:flex; align-items:center; justify-content:space-between; color:var(--color-orange); }
.service-top span { font-size:34px; font-weight:300; } .service-top i { font-style:normal; font-size:42px; font-weight:300; }
.mini-rule { display:block; width:34px; height:2px; background:var(--color-orange); margin:14px 0 22px; }
.creation-services h2,.media-services h2 { margin:0 0 12px; font-size:18px; font-weight:400; letter-spacing:.05em; }
.creation-services p,.media-services p { font-size:12px; line-height:1.7; max-width:300px; margin:0 0 16px; }
.creation-services .service-tags,.media-services .service-tags { font-size:11px; line-height:1.5; min-height:34px; }
.creation-services .action-link,.media-services .action-link { margin-top:auto; }
.selected-head h2 { margin:0; font-size:18px; font-weight:400; letter-spacing:.05em; } .selected-head>span { display:block; width:34px; height:2px; background:var(--color-orange); margin:10px 0 10px; } .selected-head p { margin:0 0 20px; font-size:11px; }
.creation-gallery,.visual-gallery { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.creation-gallery article,.visual-gallery article { min-width:0; } .creation-gallery strong,.visual-gallery strong { display:block; margin-top:8px; font-size:11px; font-weight:400; } .creation-gallery small,.visual-gallery small { display:block; font-size:9px; color:#666; margin-top:2px; }
.creation-thumb { height:205px; border-radius:7px; padding:16px; display:flex; align-items:flex-end; justify-content:center; text-align:center; color:#fff; font-weight:500; letter-spacing:.08em; font-size:14px; }
.ct1{background:radial-gradient(circle at 50% 30%,#8e3c17 0 15%,#120a08 38%,#070707 70%)} .ct2{background:radial-gradient(circle,#fff 0 2%,#cc974d 3%,#0b0b0b 22%,#050505 70%)} .ct3{background:linear-gradient(160deg,#dfd4c6,#b9a58e 55%,#26211c)} .ct4{background:linear-gradient(160deg,#0c2516,#183d24 55%,#0a140d)} .ct5{background:linear-gradient(155deg,#f1f1f1,#bdbdbd)} .ct6{background:linear-gradient(160deg,#0b1421,#4c6a84 45%,#090a0e)}
.studio-bottom-cta { display:grid; grid-template-columns:64px 1fr auto; gap:24px; align-items:center; margin-top:48px; padding:28px 34px; background:#f8f8f7; }
.cta-bubble { color:var(--color-orange); font-size:46px; } .studio-bottom-cta h2 { margin:0 0 4px; font-size:21px; font-weight:400; letter-spacing:.08em; } .studio-bottom-cta p { margin:0; font-size:12px; }

/* Media */
.media-art { min-height:280px; position:relative; overflow:hidden; background:radial-gradient(ellipse at center,rgba(255,75,14,.07),transparent 66%); }
.media-art::before { content:""; position:absolute; inset:15% 4%; opacity:.55; background:repeating-linear-gradient(0deg,transparent 0 10px,rgba(255,75,14,.20) 10px 14px); -webkit-mask:radial-gradient(ellipse at center,#000 0 55%,transparent 78%); mask:radial-gradient(ellipse at center,#000 0 55%,transparent 78%); }
.media-art span { position:absolute; color:rgba(255,75,14,.55); font-size:52px; font-weight:300; } .ma-play{left:18%;top:45%}.ma-mic{left:45%;top:35%}.ma-cam{left:67%;top:52%}.ma-video{right:8%;top:38%}
.media-player-card { display:grid; grid-template-columns:1.1fr .9fr; gap:38px; padding:24px 28px 18px; border:1px solid #ddd; border-radius:8px; margin:0 0 38px; }
.media-player-left h2 { margin:0; font-size:17px; font-weight:400; letter-spacing:.10em; } .media-player-left>p { margin:0 0 15px; font-size:11px; }
.media-main-video { height:245px; position:relative; border-radius:6px; display:grid; place-items:center; overflow:hidden; }
.media-main-video>button { width:64px; height:48px; border:0; border-radius:10px; background:rgba(0,0,0,.65); color:#fff; font-size:23px; }
.video-bottom { position:absolute; left:0; right:0; bottom:0; padding:9px 12px; background:linear-gradient(transparent,rgba(0,0,0,.9)); color:#fff; font-size:10px; } .video-bottom span { float:right; }
.media-playlist-button { display:block; width:max-content; margin:18px auto 0; padding:8px 20px; border:1px solid var(--color-orange); border-radius:6px; color:var(--color-orange); font-size:11px; letter-spacing:.06em; }
.media-playlist>div { min-height:58px; display:grid; grid-template-columns:28px 50px 1fr 42px; gap:10px; align-items:center; border-bottom:1px solid #eee; } .media-playlist em { color:var(--color-orange); font-style:normal; font-size:11px; }.media-playlist i { width:50px; height:40px; border-radius:4px; background:#555; }.media-playlist span { display:flex; flex-direction:column; }.media-playlist strong { font-size:11px; font-weight:400; }.media-playlist small { font-size:9px; color:#777; }.media-playlist b { font-size:10px; font-weight:400; text-align:right; }
.mp1{background:linear-gradient(145deg,#20140d,#a77546)} .mp2{background:linear-gradient(145deg,#2d1d13,#6b4a31)} .mp3{background:linear-gradient(145deg,#1b1c1f,#4b6370)} .mp4{background:linear-gradient(145deg,#dad2c7,#6d5140)} .mp5{background:linear-gradient(145deg,#28130a,#be5b22)} .mp6{background:linear-gradient(145deg,#d2b18e,#6b3f25)}
.selected-visuals-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }.selected-visuals-head h2 { margin:0; font-size:17px; font-weight:400; letter-spacing:.10em; }
.visual-thumb { height:130px; border-radius:7px; display:flex; align-items:flex-end; justify-content:center; padding:12px; color:#fff; text-align:center; font-size:12px; letter-spacing:.07em; font-weight:400; }
.vt1{background:linear-gradient(145deg,#0b0b0b,#7f3515)} .vt2{background:linear-gradient(145deg,#f05a18,#5a1c06)} .vt3{background:linear-gradient(145deg,#090909,#252525)} .vt4{background:linear-gradient(145deg,#7f999d,#cfb78e)} .vt5{background:linear-gradient(145deg,#0d0c0b,#744019)} .vt6{background:linear-gradient(145deg,#121212,#5b351e)}

@media(max-width:1100px){
  .artists-hero,.creation-hero,.media-hero{grid-template-columns:1fr;gap:12px}.artists-wave,.creation-art,.media-art{min-height:170px}
  .artists-projects-grid{grid-template-columns:1fr}.artists-column{border-right:0;border-bottom:1px solid var(--color-border);padding:0 0 36px}.projects-column{padding:36px 0 0}
  .creation-gallery,.visual-gallery{grid-template-columns:repeat(3,1fr)}.media-player-card{grid-template-columns:1fr}
}
@media(max-width:720px){
  .artist-roster{grid-template-columns:1fr}.creation-services,.media-services{grid-template-columns:1fr}.creation-services article,.media-services article,.creation-services article+article,.media-services article+article{border-left:0;border-top:1px solid var(--color-border);padding:28px 0;min-height:0}.creation-services article:first-child,.media-services article:first-child{border-top:0;padding-top:0}
  .creation-gallery,.visual-gallery{grid-template-columns:repeat(2,1fr)}.project-player{grid-template-columns:1fr}.studio-bottom-cta{grid-template-columns:1fr}.artist-card{grid-template-columns:52px 1fr auto}
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-page {
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
  padding: 62px 56px 22px;
  box-sizing: border-box;
}

.contact-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(380px,.85fr);
  gap: 68px;
  align-items: center;
  padding: 4px 0 58px;
  min-height: 0;
}

.contact-breadcrumb {
  margin: 0 0 34px;
  color: #777;
  font-size: 13px;
  letter-spacing: .08em;
}

.contact-title {
  margin: 0 0 18px;
  color: #d43708;
  font-size: 72px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .03em;
}

.contact-tagline {
  margin: 0 0 23px;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: .13em;
  line-height: 1.4;
}

.contact-rule {
  width: 72px;
  height: 2px;
  background: #ef3d13;
  margin: 0 0 25px;
}

.contact-lead {
  max-width: 580px;
  margin: 0;
  color: #454545;
  font-size: 16px;
  line-height: 1.75;
}

.contact-visual {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.contact-visual::before,
.contact-visual::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(226, 58, 17, .18);
}
.contact-visual::before { top: 50%; }
.contact-visual::after { transform: rotate(90deg); }

.contact-orbit {
  position: absolute;
  border: 1px solid rgba(226, 58, 17, .18);
  border-radius: 50%;
}
.contact-orbit--one { width: 250px; height: 250px; }
.contact-orbit--two { width: 390px; height: 190px; }

.contact-center {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226, 58, 17, .35);
  color: #e23a11;
  font-size: 30px;
  font-weight: 300;
  background: #fff;
  z-index: 2;
}

.contact-visual-label {
  position: absolute;
  color: #c4c4c4;
  font-size: 11px;
  letter-spacing: .22em;
}
.contact-visual-label--studio { top: 17%; left: 19%; }
.contact-visual-label--business { top: 20%; right: 15%; }
.contact-visual-label--tech { bottom: 18%; left: 14%; }
.contact-visual-label--industries { bottom: 16%; right: 10%; }

.contact-panel {
  margin-top: 34px;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  padding: 36px 0 38px;
}

.contact-panel-heading {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 32px;
}

.contact-panel-index {
  color: #e53a0d;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

.contact-panel-heading h2,
.contact-direct h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .08em;
}

.contact-panel-heading p {
  margin: 7px 0 0;
  color: #707070;
  font-size: 14px;
}

.contact-form {
  background: #fafafa;
  border: 1px solid #ececec;
  padding: 34px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #222;
  font-size: 13px;
  letter-spacing: .035em;
}

.form-field--full { grid-column: 1 / -1; }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #cfcfcf;
  background: #fff;
  padding: 13px 12px;
  color: #111;
  font: inherit;
  font-size: 15px;
  outline: none;
  border-radius: 0;
}

.form-field textarea {
  border: 1px solid #d8d8d8;
  resize: vertical;
  min-height: 150px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: #e23a11;
}

.contact-form-footer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-end;
  margin-top: 30px;
}

.contact-destination {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #777;
  font-size: 12px;
}
.contact-destination strong {
  color: #222;
  font-size: 14px;
  font-weight: 400;
}
.contact-copy-note { color: #a0a0a0; }

.contact-submit {
  border: 0;
  background: transparent;
  color: #e23a11;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .08em;
  cursor: pointer;
}
.contact-submit svg {
  width: 30px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.contact-form-status {
  margin: 14px 0 0;
  color: #666;
  font-size: 12px;
}

.contact-direct {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
  padding: 34px 0 12px;
}

.contact-direct > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 22px;
}

.contact-direct-copy p {
  margin: 0 0 10px;
  color: #666;
}
.contact-direct-copy a {
  color: #e23a11;
  text-decoration: none;
  font-size: 18px;
  letter-spacing: .04em;
}

@media (max-width: 900px) {
  .contact-page { width: 100%; max-width: 760px; padding: 38px 30px 22px; }
  .contact-hero { grid-template-columns: 1fr; gap: 20px; }
  .contact-visual { min-height: 220px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field--full { grid-column: auto; }
  .contact-form { padding: 24px 20px; }
  .contact-form-footer { align-items: flex-start; flex-direction: column; }
  .contact-direct { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 560px) {
  .contact-title { font-size: 46px; }
  .contact-visual { display: none; }
  .contact-panel-heading { gap: 18px; }
}

/* Contact page — footer spacing refinement */
.contact-page-body .contact-panel {
  border-bottom: 0;
  padding-bottom: 38px;
}
.contact-page-body .site-footer {
  margin-top: 38px;
  padding-top: 28px;
  border-top: 0;
}

/* Artists & Projects — hero alignment to approved mockup */
@media (min-width: 901px){
  .artists-page-body .artists-hero{
    grid-template-columns:minmax(650px,1.08fr) minmax(0,.92fr);
    gap:56px;
    align-items:center;
    margin-bottom:42px;
  }
  .artists-page-body .artists-hero .studio-kicker{
    font-size:clamp(54px,4.55vw,72px);
    line-height:1.02;
    white-space:nowrap;
    letter-spacing:.015em;
  }
  .artists-page-body .artists-hero .studio-subtitle{
    margin-top:12px;
  }
  .artists-page-body .artists-wave{
    min-height:220px;
  }
  .artists-page-body .artists-wave span{
    height:185px;
  }
}

/* ============================================================
   MEDIA — final mockup fidelity pass
   Header/footer remain the shared Home header/footer.
   ============================================================ */
.media-shell{padding-top:30px;padding-bottom:46px}
.media-hero{grid-template-columns:minmax(0,.78fr) minmax(470px,1.22fr);gap:58px;align-items:center;margin-bottom:40px}
.media-hero .studio-kicker{font-size:clamp(66px,5.9vw,94px);line-height:.98;letter-spacing:.025em}
.media-hero .studio-subtitle{font-size:clamp(20px,1.65vw,29px);letter-spacing:.14em;margin-top:18px}
.media-subnav{display:flex;align-items:center;gap:.45em;flex-wrap:wrap}
.media-subnav b{font-weight:300;color:var(--color-orange)}
.media-subnav a{color:inherit;text-decoration:none;position:relative;transition:color .2s ease}
.media-subnav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--color-orange);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.media-subnav a:hover{color:var(--color-orange)}
.media-subnav a:hover::after{transform:scaleX(1)}
.media-hero .orange-rule{margin-top:26px}
.media-hero .studio-copy{max-width:390px;font-size:14px;line-height:1.72;margin-top:28px}
.media-art{min-height:300px;background:none;overflow:visible;position:relative}
.media-art::before{display:none}
.media-eq{position:absolute;inset:15% 4% 10% 3%;opacity:.36;background-image:radial-gradient(circle,rgba(255,75,14,.55) 1.8px,transparent 2px);background-size:12px 12px;-webkit-mask:radial-gradient(ellipse 63% 52% at 55% 48%,#000 0 54%,transparent 82%);mask:radial-gradient(ellipse 63% 52% at 55% 48%,#000 0 54%,transparent 82%)}
.media-hero-icon{position:absolute;width:50px;height:50px;fill:none;stroke:rgba(255,75,14,.55);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.media-hero-icon.ma-play{left:16%;top:49%;width:56px;height:56px}
.media-hero-icon.ma-mic{left:43%;top:35%;width:53px;height:53px}
.media-hero-icon.ma-cam{left:63%;top:52%;width:54px;height:54px}
.media-hero-icon.ma-video{right:9%;top:38%;width:56px;height:56px}
.media-hero-icon.ma-clap{left:53%;top:18%;width:36px;height:36px;opacity:.8}
.media-services{margin-bottom:34px}
.media-services article{min-height:265px;padding-right:34px;padding-bottom:30px}
.media-services article+article{padding-left:36px}
.media-services h2{font-size:20px;letter-spacing:.045em;margin-bottom:12px}
.media-services p{font-size:13px;line-height:1.65;max-width:330px}
.media-services .service-tags{font-size:11px;min-height:30px}
.media-services .action-link{font-size:12px}
.service-top .service-icon{width:48px;height:48px;display:block}
.service-top .service-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.media-player-card{grid-template-columns:1.08fr .92fr;gap:30px;padding:20px 22px 16px;border-radius:7px;margin-bottom:34px}
.media-player-left h2{font-size:19px;letter-spacing:.12em}
.media-player-left>p{font-size:11px;margin-bottom:14px}
.media-main-video{height:250px}
.media-playlist>div{min-height:56px}
.selected-visuals-head{margin-bottom:14px}
.selected-visuals-head h2{font-size:19px}
.visual-thumb{height:150px}
.studio-bottom-cta{margin-top:38px;padding:24px 30px}
.media-page-body .site-footer{margin-top:0}

@media(max-width:1100px){
 .media-hero{grid-template-columns:1fr;gap:18px}.media-art{min-height:190px}.media-hero .studio-copy{max-width:620px}
}
@media(max-width:720px){
 .media-subnav{font-size:18px!important}.media-art{min-height:160px}.media-services h2{font-size:18px}.visual-thumb{height:125px}
}

/* === MEDIA PRODUCTION PAGE === */
.media-production-hero .studio-kicker{font-size:clamp(58px,5vw,80px);white-space:nowrap}
.media-production-flow{min-height:300px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:35px 28px 10px;color:var(--color-orange)}
.media-flow-line{position:absolute;left:7%;right:7%;top:49%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,75,14,.22) 8%,rgba(255,75,14,.22) 92%,transparent)}
.media-flow-node{position:relative;z-index:1;width:112px;height:112px;border:1px solid rgba(255,75,14,.13);border-radius:50%;background:rgba(255,255,255,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;box-shadow:0 0 0 15px rgba(255,255,255,.75)}
.media-flow-node svg{width:42px;height:42px;fill:none;stroke:rgba(255,75,14,.65);stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.media-flow-node b{font-size:9px;letter-spacing:.20em;font-weight:400;color:rgba(255,75,14,.72)}
.media-flow-node--capture{transform:translateY(-40px)}
.media-flow-node--edit{transform:translateY(32px)}
.media-production-page-body .production-service-icon svg,.media-production-page-body .process-icon svg,.media-production-page-body .production-cta-icon svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.media-production-page-body .production-description{max-width:285px}
.media-production-cta-grid .production-cta--project p{max-width:500px}
@media(max-width:980px){.media-production-hero .studio-kicker{white-space:normal}.media-production-flow{min-height:210px;padding:15px 0}.media-flow-node{width:86px;height:86px}.media-flow-node svg{width:34px;height:34px}.media-flow-node--capture{transform:translateY(-22px)}.media-flow-node--edit{transform:translateY(18px)}}
@media(max-width:620px){.media-production-flow{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;min-height:0}.media-flow-line{display:none}.media-flow-node{justify-self:center;transform:none!important}}

/* Contact page — normalized footer spacing */
.contact-page-body .site-footer {
  margin-top: 8px;
  padding-top: 20px;
  padding-bottom: 32px;
}

/* Real links while preserving approved mockup players */
[data-external-url], [data-player-row] { cursor:pointer; }
.media-current-title{position:absolute;left:16px;bottom:38px;z-index:3;color:#fff;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.media-current-title strong{font-size:13px;font-weight:500}.media-current-title small{font-size:10px;opacity:.82}
.artist-card{text-decoration:none;color:inherit}
.project-list [data-row-play],.media-playlist [data-row-play]{color:var(--color-orange);font-style:normal;cursor:pointer;text-align:right}

/* v20 — real in-site playback while preserving the approved mockup geometry */
.release-player,.visual-card,.visual-gallery article,.selected-visuals article,.featured-release,.video-frame,.project-video,.media-main-video{position:relative}
.icone-live-embed{position:absolute;inset:0;z-index:30;overflow:hidden;border-radius:inherit;background:#111;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.icone-live-embed iframe{display:block;width:100%;height:100%;border:0;background:#111}
.icone-live-embed--youtube iframe{aspect-ratio:16/9}
.icone-live-embed--spotify{background:#121212}
.icone-live-embed--spotify iframe{min-height:100%;}
.icone-embed-close{position:absolute;top:8px;right:8px;z-index:31;width:27px;height:27px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(0,0,0,.68);color:#fff;font:300 20px/23px Arial,sans-serif;cursor:pointer;backdrop-filter:blur(4px)}
.icone-embed-close:hover{background:#000}
.featured-release--spotify>.icone-live-embed{inset:8px;border-radius:5px}
.featured-release--youtube .video-frame>.icone-live-embed,.project-video>.icone-live-embed,.media-main-video>.icone-live-embed{inset:0}
.release-player>.icone-live-embed{inset:0}
.visual-card>.icone-live-embed,.visual-gallery article>.icone-live-embed,.selected-visuals article>.icone-live-embed{inset:0}

/* === ICONE v21: faithful real media, original mockup preserved === */
#icone-spotify-engine{position:fixed!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important;opacity:.001!important;pointer-events:none!important;overflow:hidden!important}
#icone-spotify-engine iframe{width:1px!important;height:1px!important;border:0!important}
.release-cover,.mini-cover,.artist-photo,.project-thumb,.media-playlist i,.visual-thumb{background-repeat:no-repeat!important}
.release-cover,.mini-cover,.artist-photo,.project-thumb,.media-playlist i{background-size:cover!important;background-position:center!important}
.video-frame,.project-video,.media-main-video,.visual-card{background-size:cover!important;background-position:center!important}
.visual-card,.visual-gallery article,.selected-visuals article,.project-video,.media-main-video,.video-frame{position:relative;overflow:hidden}
.icone-youtube-embed{position:absolute;inset:0;z-index:40;background:#0b0b0b;border-radius:inherit;overflow:hidden}
.icone-youtube-embed iframe{display:block;width:100%;height:100%;border:0;background:#0b0b0b}
.icone-embed-close{position:absolute;right:10px;top:10px;z-index:45;width:30px;height:30px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(0,0,0,.66);color:#fff;font:300 20px/26px Arial,sans-serif;cursor:pointer}
.icone-local-notice{position:absolute;inset:0;z-index:42;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:26px;background:linear-gradient(135deg,rgba(10,10,10,.95),rgba(35,17,12,.94));color:#fff;border-radius:inherit}
.icone-local-notice strong{font-size:13px;letter-spacing:.18em;color:#ff4b23}
.icone-local-notice span{max-width:420px;font-size:12px;line-height:1.55;color:#d8d8d8}
.icone-local-notice code{color:#fff}
.icone-local-notice button{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;cursor:pointer}
.icone-is-playing{font-size:11px!important}
/* Keep text legible over real YouTube thumbnails without changing the card geometry. */
.visual-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 20%,rgba(0,0,0,.58) 100%);pointer-events:none}
.visual-card>*{position:relative;z-index:2}
.media-current-title{z-index:3}

/* Real-player live progress without changing approved mockup geometry */
.featured-progress b::after{left:var(--icone-progress,38%);}

/* v23 — interactive project controls while preserving the approved mockup look */
.project-controls{display:flex;align-items:center;gap:13px;margin-top:24px;font-size:18px;letter-spacing:.06em}
.project-control-btn{appearance:none;border:0;background:transparent;color:#fff;font:inherit;line-height:1;padding:0;cursor:pointer;opacity:.95}
.project-control-btn:hover{opacity:.7}
.project-control-main{font-size:20px}
.project-list-icon{font-size:17px;opacity:.95}


/* === ICONE v25: six requested refinements, faithful to the approved mockup === */
/* Artist official portrait and refresh note */
.artist-photo.ap1{background-color:#2c211d;background-position:center!important;background-size:cover!important}
.artist-refresh-note{margin:16px 0 0;color:#8d8d8d;font-size:10px;line-height:1.45;letter-spacing:.02em;max-width:290px}

/* Projects / media: visible but restrained scrollbars, maximum ten entries */
.project-list,.media-playlist{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8c8c8c transparent}
.project-list{max-height:352px}
.media-playlist{max-height:580px}
.project-list::-webkit-scrollbar,.media-playlist::-webkit-scrollbar{width:5px}
.project-list::-webkit-scrollbar-thumb,.media-playlist::-webkit-scrollbar-thumb{background:#909090;border-radius:8px}
.project-list::-webkit-scrollbar-track,.media-playlist::-webkit-scrollbar-track{background:transparent}
.project-list-note,.media-list-note{margin:8px 0 0;color:#aaa;font-size:9px;line-height:1.35;text-align:center}
.project-youtube{margin-top:8px}

/* Releases: equal featured-player geometry on both sides */
.featured-release--spotify,.featured-release--youtube{height:186px;min-height:186px;box-sizing:border-box}
.featured-release--youtube .video-frame{min-height:132px;height:132px}

/* Studio section platform marks */
.section-head>div{display:flex;align-items:flex-start;flex-wrap:wrap;column-gap:10px}
.section-head>div .section-rule{flex-basis:100%}
.section-platform-badge{width:19px;height:19px;display:inline-grid;place-items:center;margin-top:2px;flex:0 0 auto}
.section-platform-badge svg{width:100%;height:100%}
.section-platform-badge--spotify{color:#1ed760}
.section-platform-badge--spotify circle{fill:currentColor}
.section-platform-badge--spotify path{fill:none;stroke:#fff;stroke-width:1.35;stroke-linecap:round}
.section-platform-badge--youtube{color:#ff0000}
.section-platform-badge--youtube svg path:first-child{fill:currentColor}
.section-platform-badge--youtube svg path:last-child{fill:#fff}

/* Media Selected Visuals now represents ICONE YouTube playlists */
.playlist-visual-gallery{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.playlist-visual-card{display:block;color:inherit;text-decoration:none;min-width:0}
.playlist-visual-card .visual-thumb{height:130px;position:relative;overflow:hidden;background-size:cover!important;background-position:center!important;align-items:flex-end;justify-content:center}
.playlist-visual-card .visual-thumb:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.58) 100%)}
.playlist-cover-label{position:relative;z-index:2;padding:0 5px 2px;color:#fff;text-align:center;font-size:10px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 5px rgba(0,0,0,.7)}
.playlist-visual-card:hover .visual-thumb{transform:translateY(-1px)}
@media(max-width:1100px){.playlist-visual-gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.playlist-visual-gallery{grid-template-columns:repeat(2,1fr)}}

/* Admin-fed branch content: inherits ICONE visual language */
.admin-public-content{width:min(1180px,88vw);margin:0 auto 70px;display:grid;gap:1px;background:#e8e8e8;border:1px solid #e8e8e8}.admin-public-item{background:#fff;padding:28px 32px}.admin-public-item h2{font-weight:300;letter-spacing:.04em;margin:0 0 8px}.admin-public-item p{color:#777;max-width:760px}.admin-public-item a{font-size:10px;letter-spacing:.16em;color:#111;text-decoration:none}