/* Yukiia case: TecnoPacific typography with the product's own assets. */
.yc-hero { background:#fff; padding:56px 56px 48px; overflow:hidden; }
.yc-hero-inner { max-width:1180px; margin:auto; display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.yc-hero-inner > div:first-child { min-width:0; animation:yc-copy-enter .7s ease-out both; }
.yc-label { color:#6651a6; font-weight:700; font-size:12px; letter-spacing:1px; margin-bottom:18px; }
.yc-hero h1 { font:800 clamp(32px,3.65vw,48px)/1.12 'Montserrat',sans-serif; letter-spacing:-1.3px; margin-bottom:24px; }
.yc-hero h1 .yukiia-wordmark { display:block; width:clamp(160px,16vw,200px); max-width:100%; height:auto; margin-bottom:26px; }
.yc-hero h1 span { display:block; max-width:490px; color:var(--text); text-wrap:balance; }
.yc-lede { font-size:17px; line-height:1.8; color:var(--muted); max-width:520px; }
.yc-actions { display:flex; align-items:center; gap:12px 24px; flex-wrap:wrap; margin-top:28px; }
.yc-back { color:var(--blue-mid); font-size:13px; font-weight:700; padding:12px 0; }
.yc-breadcrumb { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; margin-top:32px; color:var(--muted); }
.yc-hero .yc-visual { position:relative; display:flex; align-items:flex-start; justify-content:flex-end; width:100%; max-width:460px; aspect-ratio:4 / 5; padding:0; margin:0; justify-self:end; isolation:isolate; }
.yc-hero .yc-device { flex:none; width:56%; max-width:270px; margin-right:1%; z-index:1; animation:yc-phone-enter 1s cubic-bezier(.2,.75,.25,1) both; }
.yc-hero .yc-mascot { position:absolute; left:-15%; bottom:-1%; width:75%; max-width:none; height:auto; z-index:2; pointer-events:none; animation:yc-yuki-enter 1s cubic-bezier(.2,.75,.25,1) .16s both; }
@keyframes yc-copy-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes yc-phone-enter { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:none; } }
@keyframes yc-yuki-enter { from { opacity:0; transform:translate(-24px,12px); } to { opacity:1; transform:none; } }
.yc-heading { font:800 clamp(25px,3vw,38px)/1.2 'Montserrat',sans-serif; letter-spacing:-.8px; max-width:800px; margin-bottom:18px; }
.yc-intro { max-width:720px; color:var(--muted); font-size:16px; line-height:1.8; margin-bottom:38px; }
.yc-gallery { background:#e4e0ed; }
.yc-screens { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.yc-screens figcaption { padding-top:16px; font-size:13px; }
.yc-screens figcaption strong, .yc-screens figcaption span { display:block; }
.yc-screens figcaption span { color:var(--muted); margin-top:6px; }
.yc-work > div { display:grid; grid-template-columns:1fr 2fr; gap:40px; padding:24px 0; border-top:1px solid var(--border); }
.yc-work dt { font-weight:700; font-size:17px; }
.yc-feature-section { padding-bottom:0; }
.yc-feature { display:grid; grid-template-columns:.95fr 1.35fr; align-items:center; gap:48px; padding:56px 48px; background:var(--blue); color:#fff; border-radius:20px; overflow:hidden; isolation:isolate; }
.yc-feature-copy { min-width:0; }
.yc-feature h2 { margin:0 0 22px; }
.yc-feature .yc-feature-logo { display:block; width:190px; max-width:100%; height:auto; }
.yc-feature .yc-feature-title { font:800 clamp(26px,2.7vw,36px)/1.15 'Montserrat',sans-serif; letter-spacing:-.8px; text-wrap:balance; color:#fff; margin-bottom:22px; }
.yc-feature .yc-feature-summary { color:#e0e4f4; font-size:16px; line-height:1.8; max-width:440px; }
.yc-feature-link { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:48px; margin-top:30px; padding:12px 20px; background:#fff; color:var(--blue); border-radius:7px; font-size:14px; font-weight:700; }
.yc-feature-link svg { flex:none; transition:transform .25s ease; }
.yc-feature-stage { min-width:0; width:100%; }
.yc-project-browser { position:relative; width:100%; overflow:hidden; background:#fff; border:5px solid #fff; border-radius:12px; box-shadow:0 20px 40px #050b3633; transition:transform .45s ease; }
.yc-project-address { padding:5px 10px 9px; color:#545468; font-size:11px; line-height:1.2; background:#fff; }
.yc-project-browser img { display:block; width:100%; height:auto; border-radius:5px; }
.yc-feature:focus-visible, .yc-back:focus-visible, .yc-breadcrumb a:focus-visible { outline:3px solid var(--orange); outline-offset:5px; }
@media(hover:hover) and (pointer:fine) {
  .yc-feature:hover .yc-project-browser { transform:translateY(-5px); }
  .yc-feature:hover .yc-feature-link svg { transform:translateX(4px); }
}
.proj-grid:has(.proj-yukiia) { grid-template-areas:"p1 p1 p2" "p1 p1 p3" "yuki yuki yuki"; grid-template-rows:250px 250px auto; }
.proj-yukiia { grid-area:yuki; }
@media(max-width:1050px) {
  .yc-feature { gap:32px; padding:40px 32px; grid-template-columns:1fr 1.15fr; }
}
@media(max-width:760px) {
  .yc-feature { grid-template-columns:1fr; gap:36px; padding:32px 24px 24px; }
  .yc-feature .yc-feature-logo { width:160px; }
  .yc-feature .yc-feature-title { font-size:28px; max-width:440px; }
  .yc-feature .yc-feature-summary { max-width:560px; }
  .yc-feature-stage { max-width:500px; justify-self:center; }
}
@media(max-width:600px) {
  .proj-grid:has(.proj-yukiia) { grid-template-areas:none; grid-template-rows:none; }
  .proj-yukiia { grid-area:auto; }
}
@media(prefers-reduced-motion:reduce) {
  .yc-project-browser, .yc-feature-link svg { transition:none; }
  .yc-feature:hover .yc-project-browser, .yc-feature:hover .yc-feature-link svg { transform:none; }
}
@media(max-width:900px) {
  .yc-hero-inner { gap:28px; }

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

}
@media(min-width:601px) and (max-width:900px) {
  .proj-grid:has(.proj-yukiia) { grid-template-areas:"p1 p1" "p2 p3" "yuki yuki"; grid-template-rows:230px 230px auto; }
}
@media(max-width:640px) {
  .yc-hero { padding:44px 20px 32px; }
  .yc-hero-inner, .yc-work > div { grid-template-columns:1fr; }
  .yc-hero h1 { letter-spacing:-.8px; }
  .yc-visual { max-width:360px; width:100%; margin:12px auto 0; }

  .yc-work > div { gap:10px; }
  .yc-screens { gap:24px 14px; }
}

.yc-chapters { margin-top:36px; }
.yc-chapter { display:grid; grid-template-columns:1fr 1.7fr; gap:56px; padding:32px 0; border-top:1px solid var(--border); }
.yc-chapter h3 { font:700 21px/1.4 'Montserrat',sans-serif; max-width:320px; }
.yc-chapter p, .yc-work dd { color:var(--muted); font-size:16px; line-height:1.85; }
.yc-chapter p + p { margin-top:16px; }
@media(max-width:640px) {
  .yc-chapter { grid-template-columns:1fr; gap:18px; }
  .yc-chapter h3 { max-width:none; }

}

/* Same bezel and screen treatment as yukiia-web's phone-frame/phone-screen.
   The iPhone status bar and Dynamic Island are already in each screenshot. */
.yc-device {
  position:relative; width:270px; max-width:100%; container-type:inline-size;
  filter:drop-shadow(0 22px 28px rgba(25,15,74,.18));
}
.yc-device-frame {
  padding:8px; background:linear-gradient(145deg,#3a3452,#0b0818);
  border:1px solid rgba(255,255,255,.55); border-radius:46px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.14), inset 0 0 0 5px rgba(0,0,0,.5);
}
.yc-device-display {
  position:relative; overflow:hidden; background:#f7f5fc; border-radius:39px;
}
.yc-device-display img {
  display:block; width:100%; height:auto; max-height:none; border-radius:0;
}
.yc-screen.yc-device { width:100%; }
.yc-screen .yc-device-frame { padding:6px; border-radius:38px; }
.yc-screen .yc-device-display { border-radius:31px; }
@supports (width:1cqw) {
  .yc-device-frame { padding:3cqw; border-radius:17cqw; }
  .yc-device-display { border-radius:14.4cqw; }
  .yc-screen .yc-device-frame { padding:3cqw; border-radius:17cqw; }
  .yc-screen .yc-device-display { border-radius:14.4cqw; }
}
@media(min-width:641px) and (max-width:900px) { .yc-device { width:230px; } }
@media(max-width:640px) { .yc-device { width:250px; } }
/* Keep the product composition together rather than shrinking two columns. */
@media(max-width:960px) {
  .yc-hero-inner { grid-template-columns:1fr; gap:40px; }
  .yc-hero h1 span { max-width:650px; }
  .yc-hero .yc-visual { max-width:400px; justify-self:center; }
}
@media(max-width:640px) {
  .yc-hero { padding:36px 20px 32px; }
  .yc-hero-inner { gap:28px; }
  .yc-hero h1 { font-size:32px; }
  .yc-hero h1 .yukiia-wordmark { width:150px; margin-bottom:22px; }
  .yc-lede { font-size:16px; line-height:1.75; }
  .yc-hero .yc-visual { max-width:330px; }
}
@media(prefers-reduced-motion:reduce) {
  .yc-hero-inner > div:first-child, .yc-hero .yc-device, .yc-hero .yc-mascot { animation:none; }
}