.pingu-tagline { margin-top: 28px; color: var(--text-primary); font-size: clamp(1.1rem,1.45vw,1.4rem); line-height: 1.35; font-weight: 500; letter-spacing: -.02em; }
.pingu-hero-visual { overflow: hidden; background: #dfe9fb; }
.pingu-hero-visual img { aspect-ratio: 5280 / 3348; object-fit: contain; }

.pingu-statement-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(42px,7vw,110px); max-width: 1100px; }
.pingu-statement-copy p { color: var(--text-secondary); font-size: clamp(1rem,1.18vw,1.125rem); line-height: 1.7; }
.pingu-statement-copy .pingu-lead { grid-column: 1 / -1; color: var(--text-primary); font-size: clamp(1.65rem,2.7vw,2.85rem); line-height: 1.16; letter-spacing: -.042em; }
.pingu-goals { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(44px,8vw,128px); padding-top: 28px; border-top: 1px solid var(--divider); }
.pingu-audience > span,.sdg-list > p { color: var(--text-tertiary); font-size: .75rem; }
.pingu-audience strong { display: block; margin-top: 32px; font-size: clamp(5.5rem,10vw,10rem); line-height: .78; font-weight: 500; letter-spacing: -.08em; color: #ff871f; }
.pingu-audience p { max-width: 460px; margin-top: 34px; color: var(--text-secondary); line-height: 1.65; }
.sdg-list article { display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: center; padding-block: 24px; border-bottom: 1px solid var(--divider); }
.sdg-list article span { color: #ff871f; font-size: 1rem; }
.sdg-list h3 { margin: 0; font-size: clamp(1.35rem,2vw,2rem); line-height: 1.15; font-weight: 500; letter-spacing: -.035em; }

.pingu-process { position: relative; display: grid; grid-template-columns: repeat(7,minmax(150px,1fr)); min-width: 1120px; padding-top: 30px; }
.pingu-process::before { content: ""; position: absolute; top: 39px; left: 4%; right: 4%; height: 2px; background: linear-gradient(90deg,#dbe8ff,#69c2ff,#0077c8); }
.pingu-process article { position: relative; z-index: 1; padding-right: 24px; }
.pingu-process article::before { content: ""; display: block; width: 20px; height: 20px; margin-bottom: 30px; border: 5px solid var(--background); border-radius: 50%; background: #69c2ff; box-shadow: 0 0 0 1px #69c2ff; }
.pingu-process article:nth-child(n+5)::before { background: #0077c8; box-shadow: 0 0 0 1px #0077c8; }
.pingu-process span { color: var(--text-tertiary); font-size: .75rem; }
.pingu-process h3 { max-width: 150px; margin-top: 17px; font-size: .9rem; line-height: 1.45; font-weight: 500; }
#process { overflow-x: auto; }
.pingu-process-note { max-width: 670px; margin: clamp(64px,8vw,112px) 0 0 auto; color: var(--text-secondary); font-size: clamp(1.25rem,2vw,2rem); line-height: 1.35; letter-spacing: -.025em; }

.pingu-insights { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--divider); }
.pingu-insights article { min-height: 350px; padding: clamp(30px,4vw,56px); border-bottom: 1px solid var(--divider); }
.pingu-insights article:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--divider); }
.pingu-insights article span { color: #ff871f; font-size: .75rem; }
.pingu-insights h3 { max-width: 520px; margin: clamp(50px,6vw,84px) 0 24px; font-size: clamp(1.8rem,3vw,3.25rem); line-height: 1.02; font-weight: 500; letter-spacing: -.05em; }
.pingu-insights p { max-width: 560px; color: var(--text-secondary); font-size: clamp(1rem,1.15vw,1.125rem); line-height: 1.66; }

.ideation-gallery { width: 100%; max-width: 100%; margin-left: 0; overflow: hidden; }
.ideation-gallery-track { display: flex; width: max-content; will-change: transform; animation: pingu-ideation-loop 64s linear infinite; }
.ideation-gallery-set { display: flex; flex: none; gap: clamp(16px,2vw,32px); padding-right: clamp(16px,2vw,32px); }
.ideation-gallery figure { display: flex; flex: none; align-items: center; justify-content: center; width: clamp(720px,72vw,1180px); height: clamp(390px,48vw,680px); margin: 0; overflow: hidden; border: 1px solid var(--divider); background: #f7f8fa; }
.ideation-gallery img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ideation-gallery:hover .ideation-gallery-track,.ideation-gallery:focus-within .ideation-gallery-track { animation-play-state: paused; }
@keyframes pingu-ideation-loop { to { transform: translate3d(-50%,0,0); } }

.wireframe-chapter + .wireframe-chapter { margin-top: clamp(110px,14vw,200px); }
.wireframe-heading { display: grid; grid-template-columns: .42fr 1.58fr; gap: clamp(42px,8vw,130px); margin-bottom: clamp(54px,7vw,96px); }
.wireframe-heading span { color: var(--text-tertiary); font-size: .75rem; }
.wireframe-heading h3 { margin: 0; font-size: clamp(2.5rem,5vw,5.25rem); line-height: .95; font-weight: 500; letter-spacing: -.058em; }
.mobile-wireframes { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(18px,3vw,44px); align-items: end; }
.mobile-wireframes figure,.watch-wireframes figure { margin: 0; min-width: 0; }
.mobile-wireframes img { width: 100%; height: clamp(420px,49vw,680px); display: block; object-fit: contain; object-position: center bottom; }
.mobile-wireframes figcaption,.watch-wireframes figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--divider); color: var(--text-secondary); font-size: .78rem; }
.watch-wireframes { display: grid; grid-template-columns: repeat(9,minmax(110px,1fr)); gap: clamp(18px,2vw,30px); align-items: end; overflow-x: auto; padding-bottom: 18px; }
.watch-wireframes figure { min-width: 110px; }
.watch-wireframes img { width: 100%; height: 270px; display: block; object-fit: contain; object-position: center bottom; }

.ui-system-gallery { width: 100%; max-width: 100%; margin-left: 0; overflow: hidden; }
.ui-system-gallery-track { display: flex; width: max-content; will-change: transform; animation: pingu-ui-system-loop 58s linear infinite; }
.ui-system-gallery-set { display: flex; flex: none; gap: clamp(16px,2vw,32px); padding-right: clamp(16px,2vw,32px); }
.ui-system-card { flex: none; width: clamp(720px,72vw,1180px); }
.ui-system-card-title { min-height: clamp(72px,7vw,112px); padding-bottom: clamp(20px,2vw,32px); border-bottom: 1px solid var(--divider); }
.ui-system-card-title-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ui-system-card h3,.mascot-design h3 { margin: 0; font-size: clamp(1.7rem,3vw,3.25rem); line-height: 1; font-weight: 500; letter-spacing: -.048em; }
.ui-system-card figure { display: flex; align-items: center; justify-content: center; height: clamp(390px,48vw,680px); margin: 0; overflow: hidden; border: 1px solid var(--divider); border-top: 0; background: #f7f7ff; }
.ui-system-card img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ui-system-gallery:hover .ui-system-gallery-track,.ui-system-gallery:focus-within .ui-system-gallery-track { animation-play-state: paused; }
@keyframes pingu-ui-system-loop { to { transform: translate3d(-50%,0,0); } }
.mascot-design { margin-top: clamp(100px,12vw,180px); }
.mascot-design h3 { margin-bottom: clamp(36px,5vw,72px); }
.mascot-design figure { margin: 0; padding: clamp(18px,2.5vw,38px); border: 1px solid var(--divider); background: #fff; }
.mascot-design img { width: 100%; height: auto; display: block; }

/* Final UI Showcase: shared feature component, with sizing set per subsection. */
#final-ui { background: #fff; }
#final-ui .pingu-feature-group { --feature-stage-height: clamp(340px,44vw,600px); --feature-mockup-height: clamp(300px,39vw,540px); }
#final-ui .pingu-feature-group-watch { --feature-stage-height: 320px; --feature-mockup-height: auto; }
#final-ui .pingu-feature-group + .pingu-feature-group { margin-top: clamp(72px,10vw,144px); }
#final-ui .pingu-feature-group > h3 { margin: 0 0 clamp(36px,5vw,72px); font-size: clamp(1.7rem,3vw,3.25rem); line-height: 1.05; font-weight: 500; letter-spacing: -.048em; }
#final-ui .pingu-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(56px,7vw,100px) clamp(24px,4vw,64px); }
#final-ui .pingu-feature-group-mobile { --feature-stage-height: clamp(300px,30vw,440px); --feature-mockup-height: 100%; }
#final-ui .pingu-feature-group-mobile .pingu-feature-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
#final-ui .pingu-feature-group-watch .pingu-feature-grid { grid-template-columns: repeat(12,minmax(0,1fr)); }
#final-ui .pingu-feature-group-watch .pingu-feature { grid-column: span 4; }
#final-ui .pingu-feature-group-watch .pingu-feature:nth-child(n+4) { grid-column: span 3; }
#final-ui .pingu-feature { min-width: 0; }
#final-ui .pingu-feature-visual { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--feature-stage-height); overflow: hidden; background: #fff; }
#final-ui .pingu-feature-image { display: block; width: 100%; height: var(--feature-mockup-height); object-fit: contain; object-position: center; transform: translate(var(--mockup-x,0px),var(--mockup-y,0px)) scale(var(--mockup-scale,1)); transform-origin: center; }
#final-ui .pingu-feature-group-mobile .pingu-feature-image { width: 100%; max-width: 100%; }
#final-ui .pingu-feature-group-mobile .pingu-feature-visual,
#final-ui .pingu-feature-group-watch .pingu-feature-visual { align-items: flex-end; }
#final-ui .pingu-feature-group-watch .pingu-feature-image { width: min(100%,clamp(180px,16vw,220px)); }
#final-ui .pingu-feature-copy { margin-top: clamp(24px,3vw,40px); }
#final-ui .pingu-feature-copy h4 { margin: 0 0 16px; font-size: clamp(1.5rem,2.5vw,2.25rem); line-height: 1.1; font-weight: 500; letter-spacing: -.035em; }
#final-ui .pingu-feature-copy p { margin: 0; max-width: 560px; color: var(--text-secondary); font-size: clamp(1rem,1.15vw,1.125rem); line-height: 1.66; }
#final-ui .pingu-feature-group-mobile .pingu-feature-copy { margin-top: 0; padding-top: clamp(22px,2.4vw,34px); border-top: 1px solid var(--divider); }
#final-ui .pingu-feature-group-mobile .pingu-feature-heading { display: grid; grid-template-columns: clamp(38px,3vw,52px) minmax(0,1fr); gap: clamp(12px,1.5vw,22px); align-items: baseline; }
#final-ui .pingu-feature-group-mobile .pingu-feature-number { color: #0077c8; font-size: .78rem; line-height: 1; font-weight: 500; }
#final-ui .pingu-feature-group-mobile .pingu-feature-copy h4 { margin: 0; font-size: clamp(2rem,3.2vw,3.25rem); line-height: 1; }
#final-ui .pingu-feature-group-mobile .pingu-feature-copy p { margin-top: clamp(22px,2.5vw,34px); margin-left: clamp(50px,4.5vw,74px); }
@media (max-width: 1100px) {
  #final-ui .pingu-feature-group-mobile .pingu-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #final-ui .pingu-feature-group-mobile { --feature-stage-height: clamp(320px,44vw,500px); }
}
@media (max-width: 760px) {
  #final-ui .pingu-feature-group-mobile .pingu-feature-grid { grid-template-columns: 1fr; }
  #final-ui .pingu-feature-group-mobile { --feature-stage-height: 76vw; --feature-mockup-height: 76vw; }
}

#video { background: #dde8ff; box-shadow: 0 0 0 100vmax #dde8ff; clip-path: inset(0 -100vmax); }
.pingu-video-intro { position: relative; display: block; margin-bottom: clamp(44px,6vw,80px); text-align: center; }
.pingu-video-intro .section-number { position: absolute; top: .65em; left: 0; }
.pingu-video-intro .section-title h2 { max-width: none; text-align: center; }
.pingu-video-mark { display: flex; align-items: center; justify-content: center; }
.pingu-video-qr { display: block; width: clamp(180px,18vw,260px); padding: clamp(10px,1.2vw,16px); background: #fff; }
.pingu-video-qr img { display: block; width: 100%; height: auto; }
.pingu-video-qr:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 6px; }

@media (max-width: 1100px) {
  .watch-wireframes { grid-template-columns: repeat(9,130px); }
  #final-ui .pingu-feature-group-watch { --feature-stage-height: 500px; }
  #final-ui .pingu-feature-group-watch .pingu-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #final-ui .pingu-feature-group-watch .pingu-feature,
  #final-ui .pingu-feature-group-watch .pingu-feature:nth-child(n+4) { grid-column: auto; }
  #final-ui .pingu-feature-group-watch .pingu-feature-image { width: min(100%,clamp(220px,32vw,360px)); }
}

@media (max-width: 900px) {
  .pingu-goals { grid-template-columns: 1fr; }
  .pingu-audience { max-width: 560px; }
  .mobile-wireframes { grid-template-columns: repeat(2,1fr); row-gap: 70px; }
  .mobile-wireframes img { height: min(84vw,680px); }
}

@media (max-width: 640px) {
  .pingu-statement-copy,.pingu-goals,.pingu-insights,.mobile-wireframes { grid-template-columns: 1fr; }
  .pingu-statement-copy .pingu-lead { grid-column: auto; }
  .pingu-insights article { min-height: 0; padding: 38px 0 48px; border-right: 0 !important; }
  .pingu-insights h3 { margin-top: 40px; }
  .ideation-gallery figure { width: 88vw; height: max(260px,58vw); }
  .ui-system-card { width: 88vw; }
  .ui-system-card-title { min-height: 112px; }
  .ui-system-card-title-split { gap: 18px; }
  .ui-system-card figure { height: max(300px,76vw); }
  .mascot-design figure { width: calc(100% + var(--gutter) * 2); margin-left: calc(var(--gutter) * -1); padding: 20px; }
  .wireframe-heading { grid-template-columns: 1fr; gap: 18px; }
  .mobile-wireframes { row-gap: 64px; }
  .mobile-wireframes img { height: min(150vw,650px); }
  #final-ui .pingu-feature-group-watch { --feature-stage-height: min(125vw,450px); }
  #final-ui .pingu-feature-group-watch .pingu-feature-grid { grid-template-columns: 1fr; }
  #final-ui .pingu-feature-group-watch .pingu-feature-image { width: min(100%,320px); }
}

@media (prefers-reduced-motion: reduce) {
  .ideation-gallery { overflow-x: auto; }
  .ideation-gallery-track { animation: none; will-change: auto; }
  .ui-system-gallery { overflow-x: auto; }
  .ui-system-gallery-track { animation: none; will-change: auto; }
}

/* Shared portfolio typography roles */
.pingu-tagline,
.pingu-statement-copy p,
.pingu-insights p,
#final-ui .pingu-feature-copy p {
  font-size: var(--type-body);
  line-height: 1.65;
}

.pingu-statement-copy .pingu-lead,
.pingu-process-note {
  font-size: var(--type-lead);
  line-height: 1.25;
  font-weight: 400;
}

.pingu-audience strong {
  font-size: var(--type-page-h1);
  line-height: .9;
}

.sdg-list h3,
.pingu-insights h3,
.wireframe-heading h3,
.ui-system-card h3,
.mascot-design h3,
#final-ui .pingu-feature-copy h4,
#final-ui .pingu-feature-group-mobile .pingu-feature-copy h4 {
  font-size: var(--type-feature-heading);
  line-height: 1.08;
  font-weight: 500;
}

#final-ui .pingu-feature-group > h3 {
  font-size: var(--type-case-section);
  line-height: 1;
  font-weight: 500;
}

.mobile-wireframes figcaption,
.watch-wireframes figcaption,
.wireframe-heading span,
.pingu-insights article span,
.pingu-audience > span,
.sdg-list > p {
  font-size: var(--type-label);
  line-height: 1.5;
}