/* ==========================================================
   PiTSTOP Design Lab — site stylesheet
   Design reference: Figma "PitStop Design web site" (1728px frames)
   Scale model: 1rem = 16 design-px at 1728 viewport (fluid)
   ========================================================== */

/* ---------- Fonts ----------
   Drop real font files into /assets/fonts and the @font-face
   blocks below pick them up. Until then the Google fallbacks
   (Urbanist ≈ Nohemi, Plus Jakarta Sans ≈ Galano Grotesque) apply. */
@font-face { font-family: "Nohemi"; src: url("../assets/fonts/Nohemi-Thin.woff2") format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("../assets/fonts/Nohemi-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("../assets/fonts/Nohemi-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("../assets/fonts/Nohemi-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("../assets/fonts/Nohemi-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Galano Grotesque"; src: url("../assets/fonts/GalanoGrotesque-ExtraLight.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Galano Grotesque"; src: url("../assets/fonts/GalanoGrotesque-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Galano Grotesque"; src: url("../assets/fonts/GalanoGrotesque-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Galano Grotesque"; src: url("../assets/fonts/GalanoGrotesque-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Galano Grotesque"; src: url("../assets/fonts/GalanoGrotesque-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Galano Grotesque"; src: url("../assets/fonts/GalanoGrotesque-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Galano Grotesque"; src: url("../assets/fonts/GalanoGrotesque-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --font-display: "Nohemi", "Urbanist", system-ui, sans-serif;
  --font-body: "Galano Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;

  --c-orange: #ff7700;
  --c-orange-title: #ff9100;
  --c-orange-btn: #ff8400;
  --c-blue-btn: #7fcafb;
  --c-tan-btn: #cab9a7;
  --c-gray: #5b5b5b;
  --c-black: #000;
  --c-white: #fff;
  --c-footer: #d9d9d9;
  --c-card: #f5f5f5;

  --gutter: 2.5rem;           /* 40px */
  --shadow-btn: 0 4px 4px rgba(0,0,0,.25);
}

/* Fluid root size: 16px @ 1728 (the Figma frame width). Above 1728 the layout stops
   growing and is centered, so images are never shown larger than their native pixels. */
html { font-size: min(calc(100vw / 108), 16px); scroll-behavior: smooth; }
@media (max-width: 900px) { html { font-size: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0 auto;
  max-width: 108rem;             /* 1728px — same as the Figma frame */
  font-family: var(--font-body);
  color: var(--c-black);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }   /* the buy demo toggles sections with the hidden attribute; must beat display:flex */
a { color: inherit; text-decoration: none; }
p { margin: 0; }
.container { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Logo ---------- */
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; width: 15.0625rem; line-height: 1; }
.logo__word { display: flex; align-items: center; height: 3.75rem; }          /* 60px tall box */
.logo__svg { height: 2.5rem; width: auto; display: block; }
.logo__word-text { font-family: var(--font-display); font-weight: 900; font-size: 3.125rem; letter-spacing: -.02em; line-height: 1.2; }
.logo__sub { font-family: var(--font-display); font-weight: 300; font-size: 1.25rem; letter-spacing: .9375rem; white-space: nowrap; }
.logo--light { color: rgba(255,255,255,.8); }
.logo--dark  { color: rgba(0,0,0,.7); }

/* ---------- Header / nav ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem var(--gutter) 0;
}
.site-header--static { position: relative; }
.site-header__left { display: flex; align-items: center; gap: 18.75rem; }
.with-bpc { font-family: var(--font-body); white-space: nowrap; }
.with-bpc small { font-weight: 300; font-size: 1.25rem; }
.with-bpc b { font-weight: 900; font-size: 1.625rem; }
.nav { display: flex; gap: 6.25rem; font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; }
.nav a { transition: opacity .2s; }
.nav a:hover { opacity: .6; }
.nav--light, .with-bpc--light { color: rgba(255,255,255,.9); }
.nav--dark,  .with-bpc--dark  { color: rgba(0,0,0,.85); }
.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22.5625rem; height: 5.9375rem; border-radius: 3.4375rem;
  font-family: var(--font-display); font-weight: 600; font-size: 3.125rem; letter-spacing: -.02em;
  color: #fff; background: var(--c-orange-btn); box-shadow: var(--shadow-btn);
  transition: transform .2s, filter .2s; cursor: pointer; border: 0;
}
.btn-pill:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-pill--blue { background: var(--c-blue-btn); }
.btn-pill--tan  { background: var(--c-tan-btn); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-footer); min-height: 22.1875rem;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2rem var(--gutter);
}
.site-footer__left { display: flex; align-items: center; gap: 3rem; }
.site-footer__contact { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.5; text-align: right; }
.site-footer--plain { background: transparent; min-height: 0; padding: 4rem var(--gutter); }

/* ==========================================================
   HOME — 3-panel hero (Pet / Robots / Design)
   Panels widen and the photos SLIDE (not scale) — reproduces the
   Figma Smart Animate between Main page #1 / Home Page Main / Home Page Main 2.
   1cqw = 1% of hero width, so every value below is a Figma px ÷ 17.28.
   ========================================================== */
.hero { position: relative; width: 100%; aspect-ratio: 1728 / 1117; min-height: 30rem; overflow: hidden; background: #d9d9d9; display: flex; container-type: inline-size; }
.panel {
  position: relative; overflow: hidden; height: 100%;
  flex: 0 0 auto; transition: flex-basis .8s cubic-bezier(.77,0,.18,1);
  cursor: pointer;
}
.panel__img { position: absolute; max-width: none; height: auto; transition: left .8s cubic-bezier(.77,0,.18,1), top .8s cubic-bezier(.77,0,.18,1); }
.panel--pet    .panel__img { width: 125.75cqw; top: -7.23cqw; }
.panel--robots .panel__img { width: 147.40cqw; top: -12.5cqw; }
.panel--design .panel__img { width: 121.01cqw; top: 0; }
/* visible widths per state (Figma: 1460/180/88, 137/1503/88, 76/169/1483) */
.hero[data-active="pet"]    .panel--pet    { flex-basis: 84.49%; }
.hero[data-active="pet"]    .panel--robots { flex-basis: 10.42%; }
.hero[data-active="pet"]    .panel--design { flex-basis: 5.09%; }
.hero[data-active="robots"] .panel--pet    { flex-basis: 7.93%; }
.hero[data-active="robots"] .panel--robots { flex-basis: 86.98%; }
.hero[data-active="robots"] .panel--design { flex-basis: 5.09%; }
.hero[data-active="design"] .panel--pet    { flex-basis: 4.40%; }
.hero[data-active="design"] .panel--robots { flex-basis: 9.78%; }
.hero[data-active="design"] .panel--design { flex-basis: 85.82%; }
/* photo offsets per state (panel-relative, from Figma) */
.hero[data-active="pet"]    .panel--pet    .panel__img { left: -29.22cqw; }
.hero[data-active="robots"] .panel--pet    .panel__img { left: -72.40cqw; }
.hero[data-active="design"] .panel--pet    .panel__img { left: -75.20cqw; }
.hero[data-active="pet"]    .panel--robots .panel__img { left: -58.28cqw; }
.hero[data-active="robots"] .panel--robots .panel__img { left: -21.59cqw; }
.hero[data-active="design"] .panel--robots .panel__img { left: -57.70cqw; }
.hero[data-active="pet"]    .panel--design .panel__img { left: -37.04cqw; }
.hero[data-active="robots"] .panel--design .panel__img { left: -37.04cqw; }
.hero[data-active="design"] .panel--design .panel__img { left: -6.25cqw; }
.panel__label {
  position: absolute; right: 1.125rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 500; font-size: 2.5rem; color: #fff; opacity: .8;
  writing-mode: vertical-rl; letter-spacing: .35em; text-transform: uppercase;
  transition: opacity .4s;
}
.panel--active .panel__label { opacity: 0; }
.panel__cta {
  position: absolute; left: 50%; bottom: 7rem; transform: translateX(-50%);
  opacity: 0; pointer-events: none; transition: opacity .4s .3s;
}
.panel--active .panel__cta { opacity: 1; pointer-events: auto; }
.panel__cta:hover { transform: translateX(-50%) translateY(-2px); }
/* pet button: hover → white "Go to Pets" (Figma Main page #2) */
.panel__cta[data-hover] { transition: opacity .4s .3s, background .25s, color .25s, transform .2s; }
.panel__cta[data-hover]:hover { background: #fff; color: var(--c-gray); width: 24.5rem; height: 6.5rem; }
.panel__cta[data-hover]:hover span { display: none; }
.panel__cta[data-hover]:hover::after { content: attr(data-hover); }

/* ---------- Home: video section (Home Page Video #1 / #2) ---------- */
.video-hero { position: relative; width: 100%; aspect-ratio: 1728 / 1117; min-height: 30rem; overflow: hidden; background: #cfcfcf; }
/* round "Ai" button that expands to "Custom to Ai" on hover (Figma Video #1 → #2) */
.ai-btn { display: inline-flex; align-items: center; justify-content: center; height: 6.25rem; min-width: 6.25rem; padding: 0 1.5rem; border-radius: 3.125rem;
  background: #f90; color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 3.125rem; box-shadow: var(--shadow-btn); transition: min-width .35s, padding .35s; }
.ai-btn__long { display: none; white-space: nowrap; }
.video-hero:hover .ai-btn__short, .ai-btn:focus .ai-btn__short { display: none; }
.video-hero:hover .ai-btn__long, .ai-btn:focus .ai-btn__long { display: inline; }
.video-hero:hover .ai-btn { min-width: 22.625rem; }
.video-hero__title { opacity: 0; transition: opacity .4s; }
.video-hero:hover .video-hero__title { opacity: 1; }
@media (hover: none) { .video-hero__title { opacity: 1; } .ai-btn__short { display: none; } .ai-btn__long { display: inline; } .ai-btn { min-width: 22.625rem; } }
.video-hero video, .video-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-hero__content { position: absolute; left: 0; right: 0; bottom: 8.5rem; text-align: center; }
.video-hero__title { font-family: var(--font-display); font-weight: 400; font-size: 3.75rem; color: #fff; margin-bottom: 3.5rem; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.video-hero__title span { opacity: .7; }

/* ==========================================================
   WORK — grid
   ========================================================== */
.work-head { text-align: center; padding-top: 6.25rem; }
.work-head h1 { font-family: var(--font-display); font-weight: 500; font-size: 5rem; color: var(--c-orange-title); margin: 0 0 1.5rem; }
.work-head p { font-family: var(--font-display); font-weight: 400; font-size: 2.5rem; color: var(--c-gray); }
.work-nav { display: flex; justify-content: space-between; align-items: center; padding: 2.5rem var(--gutter) 0; font-family: var(--font-display); font-size: 2.5rem; color: var(--c-gray); }
.work-nav .home { font-weight: 600; }
.work-nav .links { display: flex; gap: 5rem; font-weight: 300; }
.work-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem;
  padding: 5.5rem 1.5rem 0;
}
.work-card { display: block; }
.work-card__img { width: 100%; aspect-ratio: 827 / 510; border-radius: .625rem; overflow: hidden; background: var(--c-card); }
.work-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.work-card:hover .work-card__img img { transform: scale(1.03); }
.work-card__client { margin-top: .3125rem; font-family: var(--font-display); font-weight: 400; font-size: 1.875rem; color: var(--c-orange); }
.work-card__title { font-family: var(--font-display); font-weight: 400; font-size: 3.75rem; color: var(--c-gray); line-height: 1.1; }
.work-card--empty .work-card__img { background: var(--c-card); }
.work-tagline { font-family: var(--font-body); font-weight: 200; font-size: 3.75rem; padding: 12rem 0 22rem 32.75rem; }

/* ==========================================================
   ABOUT (Info page)
   ========================================================== */
.about-intro { padding-top: 10rem; }
.statement { font-family: var(--font-display); font-weight: 500; font-size: 5rem; line-height: 1.15; opacity: .85; }
.statement .brand { display: inline-block; vertical-align: -.02em; }
.statement .brand .logo__svg { height: .8em; width: auto; }
.statement .brand-sub { font-weight: 400; font-size: 3.75rem; }
.about-strip { display: flex; gap: 1.5rem; margin: 4.75rem 0 0; overflow-x: auto; scrollbar-width: none; padding: .625rem; cursor: grab; user-select: none; -webkit-overflow-scrolling: touch; }
.drag-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.drag-scroll img { pointer-events: none; }
.about-strip::-webkit-scrollbar { display: none; }
.about-strip img { height: 36.6875rem; width: auto; flex: 0 0 auto; object-fit: cover; }
.why { display: grid; grid-template-columns: 36.375rem 1fr 1fr; gap: 0 2rem; padding-top: 8rem; }
.why h2 { font-family: var(--font-display); font-weight: 400; font-size: 3.75rem; line-height: 1.1; margin: 0; }
.why__item h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.875rem; margin: 0 0 1.25rem; }
.why__item p { font-family: var(--font-body); font-weight: 500; font-size: 1.25rem; line-height: 1.4; max-width: 27rem; }
.why__item + .why__item, .why__col > .why__item + .why__item { margin-top: 3.5rem; }
.designers { padding-top: 6rem; padding-bottom: 8rem; }
.designers h2 { font-family: var(--font-display); font-weight: 400; font-size: 3.75rem; margin: 0 0 3rem; }
.designers__row { display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 1rem; cursor: grab; user-select: none; -webkit-overflow-scrolling: touch; }
.scroll-hint { font-family: var(--font-body); font-size: .875rem; color: #999; margin-top: .75rem; }
.scroll-hint::before { content: "←  "; } .scroll-hint::after { content: "  →"; }
.designers__row::-webkit-scrollbar { display: none; }
.designer { flex: 0 0 29.6875rem; }
.designer__photo { width: 29.6875rem; height: 39.375rem; overflow: hidden; background: #eee; }
.designer__photo img { width: 100%; height: 100%; object-fit: cover; }
.designer__role { margin-top: .875rem; font-family: var(--font-body); font-weight: 900; font-size: 1.5rem; }
.designer__name { margin-top: .5rem; font-family: var(--font-body); font-weight: 300; font-size: 1.875rem; }

/* ==========================================================
   CONTACT
   ========================================================== */
.contact { position: relative; height: 100vh; min-height: 44rem; overflow: hidden; }
.contact__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.contact__statement { position: absolute; left: var(--gutter); top: 25.375rem; }
.contact__card {
  position: absolute; left: 49.375rem; top: 21.8125rem; width: 56.125rem; min-height: 28.625rem;
  border-radius: 1.25rem; background: rgba(255,255,255,.3); mix-blend-mode: color-burn;
}
.contact__info { position: absolute; left: 50.5625rem; top: 22.6875rem; font-family: var(--font-body); color: rgba(0,0,0,.85); }
.contact__info dt { font-weight: 500; font-size: 2.5rem; margin-top: 1.75rem; }
.contact__info dt:first-child { margin-top: 0; }
.contact__info dd { margin: .25rem 0 0; font-weight: 400; font-size: 3.125rem; }

/* ==========================================================
   PROJECT DETAIL
   ========================================================== */
.detail { }
.detail__hero { width: 100%; height: 73.5rem; object-fit: cover; margin-top: 7.5rem; }
.detail__hero--tall { height: 82rem; }
.detail__title { padding: 6.5rem 0 0 24.375rem; }
.detail__eyebrow { font-family: var(--font-display); font-size: 1.875rem; color: var(--c-orange); }
.detail__title h1 { margin: .5rem 0 0; font-family: var(--font-display); font-weight: 500; font-size: 5rem; color: var(--c-gray); line-height: 1.05; }
.detail__title h1 span { display: block; font-weight: 400; font-size: 5.625rem; }
.detail__lead { padding: 4.5rem 0 0 24.1875rem; max-width: 82rem; font-family: var(--font-body); font-weight: 500; font-size: 1.875rem; line-height: 1.35; letter-spacing: -.02em; }
.detail__lead strong { font-weight: 600; }
.detail__block { width: 100%; object-fit: cover; }
.detail__section-title { padding: 6.25rem 0 3rem 21.5rem; max-width: 86.5rem; }
.detail__section-title h2 { margin: 0 0 .5rem; font-family: var(--font-body); font-weight: 700; font-size: 2.5rem; }
.detail__section-title p { font-family: var(--font-body); font-weight: 500; font-size: 1.25rem; letter-spacing: .09em; line-height: 1.4; }
.detail__pair { display: grid; grid-template-columns: 887fr 841fr; gap: 0; align-items: start; }
.detail__pair img { width: 100%; height: auto; object-fit: cover; }
.detail__pair img:first-child { aspect-ratio: 887 / 1160; object-position: left center; }   /* Figma: left 887px of the wide render */
.detail__pair img:last-child  { aspect-ratio: 841 / 1160; object-position: center; }
.detail__size { display: flex; justify-content: center; padding: 6rem 0; }
.detail__size img { width: 41.625rem; }
/* gallery: [534 | 558 | 558] columns, matches "Last Shot" layout in Figma */
.detail__gallery { display: grid; grid-template-columns: 534fr 558fr 558fr; gap: 1rem; padding: 3rem 1.375rem 0; align-items: start; }
.detail__gallery-col { display: flex; flex-direction: column; gap: 1rem; }
.detail__gallery img { width: 100%; object-fit: cover; display: block; }
.detail__gallery .g-sm { aspect-ratio: 534 / 288; }
.detail__gallery .g-sq { aspect-ratio: 1 / 1; }
.detail__gallery .g-tall { aspect-ratio: 558 / 838; }
.detail__gallery .g-md { aspect-ratio: 558 / 410; }
.detail__nav { display: flex; gap: 2.5rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--c-gray); }
.detail__nav a:hover { color: var(--c-orange); }
.nav a.is-current { opacity: .5; }
.size-diagram text { font-family: "Galano Grotesque", "Plus Jakarta Sans", sans-serif; }
.detail__credits { display: flex; justify-content: flex-end; gap: 10rem; padding: 6rem var(--gutter) 0 0; font-family: var(--font-body); }
.detail__credits dt { font-weight: 500; font-size: 1.25rem; }
.detail__credits dd { margin: .5rem 0 0; font-weight: 500; font-size: 1.875rem; line-height: 1.3; }
.detail__footer { display: flex; justify-content: space-between; align-items: flex-end; padding: 4rem var(--gutter) 5rem; }

/* ==========================================================
   BUY DEMO (Ruler → analyze → purchase)
   ========================================================== */
.buy { min-height: 100vh; position: relative; }
.buy__top { display: flex; align-items: center; justify-content: center; padding-top: 1.5rem; position: relative; }
.buy__back { position: absolute; left: 3rem; top: 2rem; font-size: 2.5rem; color: #999; }
.buy__center { text-align: center; }
.ruler { display: flex; align-items: center; justify-content: center; gap: 8rem; padding-top: 12rem; }
.ruler h2 { font-family: var(--font-body); font-weight: 700; font-size: 2.5rem; margin: 0; }
.ruler p { font-family: var(--font-body); font-weight: 500; font-size: 1.75rem; }
.ruler__cube { width: 20rem; }
.ruler__add { font-family: var(--font-body); font-weight: 700; font-size: 1.75rem; cursor: pointer; background: none; border: 0; padding: .5rem 1rem; border-radius: .75rem; transition: background .2s, transform .2s; }
.ruler__add.is-pressed { background: #efefef; transform: scale(.96); }
.analyze { text-align: center; padding-top: 8rem; }
.analyze__stack { position: relative; height: 26rem; }
.analyze__ball { position: absolute; top: 50%; left: 50%; border-radius: 45%; overflow: hidden; transform: translate(-50%,-50%); transition: all .8s cubic-bezier(.77,0,.18,1); }
.analyze__ball img { width: 100%; height: 100%; object-fit: cover; }
.analyze__bar { width: 21.75rem; height: .1875rem; background: #ddd; margin: 3.5rem auto 0; position: relative; overflow: hidden; }
.analyze__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #5b5b5b; transition: width .8s; }
.analyze__pct { margin-top: 2rem; font-family: var(--font-body); font-weight: 200; font-size: 1.5rem; }
.analyze__pct b { font-weight: 700; }
.analyze__msg { font-family: var(--font-body); font-weight: 700; font-size: 1.5rem; }
.analyze__wait { font-family: var(--font-body); font-weight: 300; font-size: .875rem; color: #999; margin-top: .5rem; }

.purchase { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.purchase__left { background: #f5f5f5; padding: 3rem 9.75rem; }
.purchase__right { padding: 5rem 6.75rem; }
.purchase__product { margin-top: 4rem; font-family: var(--font-body); }
.purchase__product small { display: block; font-weight: 400; font-size: 1.25rem; color: #555; }
.purchase__product .price { font-weight: 700; font-size: 2.75rem; }
.purchase__product .price span { font-weight: 400; font-size: 1.25rem; color: #555; margin-left: .5rem; }
.purchase__lines { margin-top: 4rem; font-family: var(--font-body); font-size: 1.125rem; }
.purchase__lines .row { display: flex; justify-content: space-between; padding: .5rem 0; }
.purchase__lines .row.sep { border-top: 1px solid #ccc; margin-top: .5rem; }
.purchase__lines .muted { color: #777; font-size: .875rem; }
.purchase__lines .total { font-weight: 700; }
.pay-wallets { display: flex; gap: .625rem; }
.pay-wallets button { flex: 1; height: 2.5rem; border-radius: .375rem; border: 0; background: #1a1a1a; color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; cursor: pointer; }
.pay-divider { border-top: 1px solid #ddd; margin: 1.5rem 0 4.5rem; }
.pay-list { border: 1px solid #ddd; border-radius: .375rem; overflow: hidden; }
.pay-list label { display: flex; align-items: center; gap: 1rem; padding: 1.125rem 1.5rem; border-top: 1px solid #ddd; font-family: var(--font-body); font-size: 1rem; cursor: pointer; }
.pay-list label:first-child { border-top: 0; }
.pay-list input { width: 1.125rem; height: 1.125rem; accent-color: #1a1a1a; }
.pay-list .tag { font-size: .625rem; font-weight: 700; padding: .125rem .375rem; border-radius: .25rem; background: #fee500; }
.pay-list .tag.naver { background: #03c75a; color: #fff; }
.pay-btn { width: 100%; margin-top: 1.5rem; height: 2.375rem; border-radius: .375rem; border: 0; background: #1a1a1a; color: #fff; font-family: var(--font-body); font-size: 1rem; text-decoration: underline; cursor: pointer; }
.demo-badge { position: fixed; right: 1rem; bottom: 1rem; z-index: 99; background: rgba(0,0,0,.75); color: #fff; font-family: var(--font-body); font-size: .8rem; padding: .4rem .8rem; border-radius: 999px; }

/* ==========================================================
   Responsive (tablet / mobile)
   ========================================================== */
@media (max-width: 900px) {
  :root { --gutter: 1.25rem; }
  .site-header { padding-top: .875rem; }
  .site-header__left { gap: 1rem; }
  .with-bpc { display: none; }
  .logo { width: auto; }
  .logo__word { height: 2.25rem; }
  .logo__svg { height: 1.5rem; }
  .logo__sub { font-size: .75rem; letter-spacing: .5em; }
  .nav { gap: 1.5rem; font-size: 1.25rem; }

  .hero { flex-direction: column; aspect-ratio: auto; height: auto; min-height: 0; }
  .panel__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; object-fit: cover; }
  .panel { height: 36vh; min-height: 14rem; flex-basis: auto !important; transition: height .8s cubic-bezier(.77,0,.18,1); }
  .panel--active { height: 70vh; }
  .panel__label { writing-mode: horizontal-tb; right: auto; left: 1.25rem; top: auto; bottom: 1rem; transform: none; font-size: 1.25rem; letter-spacing: .3em; }
  .panel__cta { bottom: 2rem; }
  .btn-pill { width: 12rem; height: 3.25rem; font-size: 1.5rem; }
  .video-hero { aspect-ratio: auto; height: 70vh; min-height: 0; }
  .video-hero__title { font-size: 1.5rem; margin-bottom: 1.5rem; }
  .video-hero__content { bottom: 3rem; }

  .work-nav { font-size: 1.25rem; padding-top: 1.25rem; }
  .work-nav .links { gap: 1.5rem; }
  .work-head { padding-top: 3rem; }
  .work-head h1 { font-size: 2.5rem; }
  .work-head p { font-size: 1.125rem; padding: 0 1.25rem; }
  .work-grid { grid-template-columns: 1fr; padding: 2.5rem 1.25rem 0; gap: 2rem; }
  .work-card__client { font-size: 1rem; }
  .work-card__title { font-size: 1.75rem; }
  .work-card--empty { display: none; }
  .work-tagline { font-size: 1.5rem; padding: 5rem 1.25rem 6rem; }

  .about-intro { padding-top: 5.5rem; }
  .statement { font-size: 2.5rem; }
  .statement .brand-sub { font-size: 1.75rem; }
  .about-strip img { height: 16rem; }
  .why { grid-template-columns: 1fr; gap: 2rem; padding-top: 4rem; }
  .why h2 { font-size: 2rem; }
  .why__item h3 { font-size: 1.25rem; }
  .why__item p { font-size: 1rem; }
  .designers h2 { font-size: 2rem; }
  .designer { flex: 0 0 14rem; }
  .designer__photo { width: 14rem; height: 18.5rem; }
  .designer__role { font-size: .875rem; }
  .designer__name { font-size: 1.125rem; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 1.5rem; min-height: 0; padding: 2rem 1.25rem; }
  .site-footer__contact { text-align: left; font-size: .875rem; }

  .contact { height: auto; min-height: 100vh; padding: 6rem 1.25rem 3rem; }
  .contact__statement { position: static; margin-bottom: 2rem; }
  .contact__card { display: none; }
  .contact__info { position: static; background: rgba(255,255,255,.55); padding: 1.25rem; border-radius: 1rem; }
  .contact__info dt { font-size: 1.25rem; }
  .contact__info dd { font-size: 1.5rem; word-break: break-all; }

  .detail__hero, .detail__hero--tall { height: 60vw; margin-top: 4.5rem; }
  .detail__title { padding: 2.5rem 1.25rem 0; }
  .detail__title h1 { font-size: 2rem; }
  .detail__title h1 span { font-size: 2.25rem; }
  .detail__eyebrow { font-size: 1rem; }
  .detail__lead { padding: 1.5rem 1.25rem 0; font-size: 1.0625rem; }
  .detail__section-title { padding: 3rem 1.25rem 1.5rem; }
  .detail__section-title h2 { font-size: 1.375rem; }
  .detail__section-title p { font-size: .9375rem; }
  .detail__pair { grid-template-columns: 1fr; }
  .detail__size { padding: 3rem 1.25rem; }
  .detail__size img { width: 100%; }
  .detail__gallery { grid-template-columns: 1fr 1fr; padding: 1.5rem 1.25rem 0; gap: .75rem; }
  .detail__credits { justify-content: flex-start; gap: 2.5rem; padding: 3rem 1.25rem 0; }
  .detail__credits dd { font-size: 1.125rem; }
  .detail__footer { padding: 2.5rem 1.25rem 3rem; }

  .ruler { flex-direction: column; gap: 2rem; padding-top: 6rem; }
  .ruler__cube { width: 12rem; }
  .purchase { grid-template-columns: 1fr; }
  .purchase__left, .purchase__right { padding: 2rem 1.25rem; }
}