/* ============================================================
   AETHILM — company detail pages (/copewallet, /nuho-dev, /about)
   Extends styles.css; same tokens, radii and card treatments.
   ============================================================ */

/* .section (styles.css) zeroes horizontal padding on phones; keep the gutter here */
.cp .wrap { padding-left: 24px; padding-right: 24px; }

/* ---- Hero: copy left, framed image right ---- */
.cp-hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 56px; padding-top: 140px; padding-bottom: 80px; position: relative; z-index: 1; }
.cp-hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cp-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-alt); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); margin-bottom: 26px; transition: color var(--dur-fast); }
.cp-back:hover { color: var(--fg1); }
.cp-back .ic { width: 14px; height: 14px; }
.cp-hero-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-brand { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.cp-brand-logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
.cp-nuho-dev .cp-brand-logo { height: 36px; }
.cp-brand-name { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; color: var(--fg1); }
.cp-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.035em; color: var(--fg1); margin-top: 24px; max-width: 14ch; }
.cp-about .cp-title { margin-top: 30px; }
.cp-lede { color: var(--fg2); font-size: clamp(16px, 1.45vw, 18px); line-height: 1.6; max-width: 500px; margin-top: 26px; }
.cp-hero .hero-ctas { margin-top: 36px; }
.cp-hero-media { position: relative; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg), var(--ring-hi); background: var(--surface-1); aspect-ratio: 1 / 1; }
.cp-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%); }

/* ---- Facts ---- */
.cp-facts { position: relative; z-index: 1; }

/* ---- Story rows: alternating image / copy ---- */
.cp-story { position: relative; z-index: 1; }
.cp-row { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 64px; margin-bottom: 96px; }
.cp-row:last-of-type { margin-bottom: 0; }
.cp-row.flip .cp-row-media { order: 2; }
.cp-row-media { border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md), var(--ring-hi); background: var(--surface-1); aspect-ratio: 16 / 10; }
.cp-row-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.cp-row-media:hover img { transform: scale(1.03); }
.cp-row-copy { min-width: 0; }
.cp-row-idx { font-family: var(--font-alt); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.cp-row-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.025em; color: var(--fg1); margin: 16px 0 18px; }
.cp-row-copy p { color: var(--fg2); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.65; max-width: 46ch; }

/* ---- Network chips ---- */
.cp-chips { margin-top: 88px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.cp-chips-label { font-family: var(--font-alt); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); }
.cp-chips-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.cp-chip { font-family: var(--font-body); font-size: 14px; color: var(--cream); padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--fill-1); }
.cp-chip.dim { color: var(--fg3); border-style: dashed; }

/* ---- Features ---- */
.cp-features { position: relative; z-index: 1; padding-bottom: var(--space-4); }
.cp-features .principle { min-height: 220px; }

/* ---- Product screenshot in a browser frame ---- */
.cp-screen { position: relative; z-index: 1; }
.cp-browser { border-radius: 28px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-2); box-shadow: 0 40px 100px rgba(0,0,0,0.55), var(--ring-hi); max-width: 1040px; margin: 0 auto; }
.cp-browser-bar { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cp-dots { display: inline-flex; gap: 7px; }
.cp-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-4); display: block; }
.cp-browser-url { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-body); font-size: 13px; color: var(--fg3); background: var(--fill-1); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 14px; max-width: 360px; margin: 0 auto; }
.cp-browser-url .ic { width: 12px; height: 12px; }
.cp-browser img { display: block; width: 100%; height: auto; }

.cp-legal { position: relative; display: inline-block; margin-top: 22px; font-size: 13px; color: var(--fg3); border-bottom: 1px solid var(--line-strong); }
.cp-legal:hover { color: var(--fg1); }

/* ---- Portfolio cards ---- */
.cp-portfolio { position: relative; z-index: 1; }
.cp-port-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.cp-port-card { color: inherit; text-decoration: none; gap: 0; }
.cp-port-card:hover { color: inherit; }
.cp-port-logo { height: 42px; width: auto; max-width: 160px; object-fit: contain; object-position: left; margin: 26px 0 18px; }
.cp-port-logo[src*="futz"] { height: 56px; }
.cp-port-card h3 { margin-bottom: 10px; }
.cp-port-more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 22px; font-family: var(--font-body); font-size: 14px; color: var(--fg1); }
.cp-port-more .ic { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-out); }
.cp-port-card:hover .cp-port-more .ic { transform: translateX(4px); }


/* ---- Side banners (game-ad skyscrapers in the empty gutters) ---- */
.cp-side { position: fixed; top: 50%; z-index: 2; width: min(240px, calc((100vw - 1180px) / 2 - 36px)); aspect-ratio: 9 / 19;
  border-radius: 28px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), var(--ring-hi);
  transform: translateY(-50%); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); display: none; }
.cp-side img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp-side.left { left: 18px; } .cp-side.right { right: 18px; }
.cp-side.off { opacity: 0; pointer-events: none; }
.cp-side.left.off { transform: translate(-30px, -50%); } .cp-side.right.off { transform: translate(30px, -50%); }
@media (min-width: 1440px) { .cp-side { display: block; } }
@media (min-width: 1700px) { .cp-side.left { left: 32px; } .cp-side.right { right: 32px; } }

/* ---- Showcase layout (Futz Games): full-bleed illustrated scenes ---- */
.cp-show-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; z-index: 1; }
.cp-show-bg, .cp-show-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-show-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.62) 32%, rgba(0,0,0,0.1) 62%, transparent 100%),
              linear-gradient(0deg, #000 0%, rgba(0,0,0,0.0) 30%); }
.cp-show-copy { position: relative; width: 100%; padding-top: 140px; padding-bottom: 110px; display: flex; flex-direction: column; align-items: flex-start; }
.cp-show-logo { height: 92px; width: auto; margin: 6px 0 22px; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)); }
.cp-show-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 5.4vw, 80px); line-height: 1.0; letter-spacing: -0.035em; color: #fff; max-width: 12ch; text-shadow: 0 4px 30px rgba(0,0,0,0.4); }
.cp-show-lede { color: rgba(255,255,255,0.86); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; max-width: 470px; margin-top: 22px; font-weight: 500; }
.cp-show-copy .hero-ctas { margin-top: 32px; }

.cp-show-story { position: relative; z-index: 1; padding-bottom: 0; }
.cp-show-panel { position: relative; max-width: 1180px; margin: 28px auto 0; height: min(72vh, 640px); min-height: 440px; overflow: hidden; display: flex; align-items: center;
  border-radius: 40px; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0,0,0,0.5), var(--ring-hi); }
.cp-show-panel-copy { position: relative; width: 100%; padding: 0 56px; }
.cp-show-panel-copy h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -0.03em; color: #fff; max-width: 12ch; margin: 14px 0 16px; text-shadow: 0 4px 24px rgba(0,0,0,0.45); }
.cp-show-panel-copy p { color: rgba(255,255,255,0.86); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.6; max-width: 440px; font-weight: 500; }
.cp-show-panel .cp-row-idx { color: #ffd36e; }
.cp-show-story .cp-chips { margin-top: 72px; }
.cp-theme-game .cp-features { margin-top: 64px; }
.cp-theme-game .principle-ic { color: #ffd36e; }

@media (max-width: 860px) {
  .cp-show-fade { background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.05) 75%); }
  .cp-show-panel { align-items: flex-end; height: 72vh; margin-left: 24px; margin-right: 24px; border-radius: 28px; }
  .cp-show-panel-copy { padding: 0 28px 36px; }
}
@media (max-width: 600px) {
  .cp-show-hero { min-height: 92vh; }
  .cp-show-copy { padding: 120px 18px 56px; }
  .cp-show-logo { height: 68px; }
  .cp-show-copy .hero-ctas { width: 100%; }
  .cp-show-copy .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .cp-show-panel { margin-left: 18px; margin-right: 18px; border-radius: 22px; }
  .cp-show-panel-copy { padding: 0 20px 28px; }
}

/* ---- responsive ---- */
@media (max-width: 920px) {
  .cp-hero { grid-template-columns: 1fr; min-height: auto; gap: 44px; padding-top: 128px; }
  .cp-hero-media { aspect-ratio: 16 / 11; }
  .cp-row, .cp-row.flip { grid-template-columns: 1fr; gap: 28px; margin-bottom: 72px; }
  .cp-row.flip .cp-row-media { order: 0; }
}
@media (max-width: 600px) {
  .cp .wrap { padding-left: 18px; padding-right: 18px; }
  .cp-hero { padding-top: 112px; padding-bottom: 48px; gap: 32px; }
  .cp-hero-copy { align-items: center; text-align: center; }
  .cp-title { font-size: clamp(34px, 10vw, 46px); max-width: none; }
  .cp-lede { font-size: 16px; }
  .cp-hero .hero-ctas { width: 100%; }
  .cp-hero .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .cp-hero-media, .cp-row-media { border-radius: 24px; }
  .cp-row { margin-bottom: 56px; }
  .cp-row-copy { text-align: center; }
  .cp-row-copy p { margin: 0 auto; }
  .cp-chips { margin-top: 56px; }
  .cp-chip { font-size: 13px; padding: 8px 14px; }
  .cp-browser { border-radius: 18px; }
  .cp-browser-bar { padding: 10px 12px; }
  .cp-port-card { text-align: left; }
}