/* ==========================================================
   artless.co.jp/alog/ TOP page skeleton
   ========================================================== */

:root {
  --color-text: #222222;
  --color-bg: #ffffff;
  --color-border: #dddddd;
  --color-muted: #999999;
  --header-height: 90px;
  --gutter: 60px;
  --max-width: 1440px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  padding: 16px var(--gutter);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 100;
}

.site-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.site-logo__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.site-logo__role {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__list a {
  font-size: 13px;
  letter-spacing: 0.05em;
}

.site-nav__list a:hover {
  color: var(--color-muted);
}

/* ---------------------------------------------------------
   Page intro — large thin title, short copy beside it
   (same voice as the About hero)
--------------------------------------------------------- */
.page-intro {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(72px, 9vw, 140px);
}

.page-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px clamp(40px, 6vw, 120px);
  align-items: end;
}

.page-intro__title {
  margin: 0;
  font-size: clamp(48px, 7.2vw, 112px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.page-intro__catch {
  margin: 0 0 20px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.8;
  letter-spacing: 0.1em;
}

.page-intro__lead {
  max-width: 440px;
  margin: 0;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #666666;
}

/* ---------------------------------------------------------
   Works heading + filter
--------------------------------------------------------- */
.works-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin: 0 max(var(--gutter), calc((100% - var(--max-width)) / 2 + var(--gutter)));
  padding-top: 20px;
  border-top: 1px solid var(--color-text);
  scroll-margin-top: var(--header-height);
}

.works-head__title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.filter-nav__list {
  display: flex;
  gap: 8px;
}

.filter-nav__list li a {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.filter-nav__list li a:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

.filter-nav__list li.is-active a {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* ---------------------------------------------------------
   Portfolio grid — two even columns, one thumbnail ratio
--------------------------------------------------------- */
.portfolio-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(40px, 4vw, 64px) var(--gutter) clamp(96px, 10vw, 160px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 6vw, 96px) clamp(24px, 3vw, 48px);
}

.portfolio-item {
  min-width: 0;
}

/* ---------- Fade up on appearance ---------- */
.portfolio-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-item__link {
  display: block;
}

.portfolio-item__link:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 8px;
}

.portfolio-item__thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #f2f1ef;
  margin-bottom: 20px;
  overflow: hidden;
}

.portfolio-item__thumb img,
.portfolio-item__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  display: block;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Posters sit whole on the neutral ground instead of being cropped */
.portfolio-item[data-shape="portrait"] .portfolio-item__thumb {
  padding: 6% 0;
}

.portfolio-item[data-shape="portrait"] .portfolio-item__thumb img {
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .portfolio-item__link:hover .portfolio-item__thumb img,
  .portfolio-item__link:hover .portfolio-item__thumb video {
    transform: scale(1.03);
  }
}

.portfolio-item__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.portfolio-item__title {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.portfolio-item__cats {
  flex-shrink: 0;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Closing contact prompt — reuses the About page's .ab-contact */
.top-contact {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 8vw, 120px);
}

@media (max-width: 1024px) {
  .page-intro__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .page-intro__catch br {
    display: none;
  }

  .works-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .portfolio-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-item__meta {
    flex-direction: column;
    gap: 6px;
  }
}

/* ---------------------------------------------------------
   Case study detail page
--------------------------------------------------------- */
.case-study {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px var(--gutter) 100px;
}

.case-hero {
  margin-bottom: 50px;
}

.case-hero__back {
  margin: 0 0 24px;
}

.case-hero__back a {
  font-size: 13px;
  color: var(--color-muted);
}

.case-hero__back a:hover {
  color: var(--color-text);
}

.case-hero__title {
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.case-hero__tagline {
  font-size: 15px;
  color: var(--color-muted);
  margin: 0 0 32px;
}

.case-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.case-hero__meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-hero__meta dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.case-hero__meta dd {
  font-size: 13px;
  margin: 0;
}

.case-figure {
  margin: 0 0 60px;
}

.case-figure img {
  width: 100%;
  display: block;
}

.case-section {
  margin-bottom: 80px;
}

/* Category-level breathing room — used between major bodies of work
   (Social → Promotional → Seasonal → Shop Tools) so a scroll past one
   reads as leaving one gallery room and entering the next. */
.case-section--gap-xl {
  margin-bottom: clamp(140px, 15vw, 260px);
}

/* A lighter version of the category gap — for late-page transitions that
   still need a clear break, but not a full "new gallery room" pause. */
.case-section--gap-l {
  margin-bottom: clamp(90px, 10vw, 165px);
}

.case-section__title {
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 16px;
}

.case-section__text {
  max-width: 640px;
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 32px;
}

.case-section .case-figure {
  margin-bottom: 0;
}

.case-section__link {
  display: inline-block;
  margin-top: 32px;
  font-size: 13px;
  color: var(--color-muted);
}

.case-section__link:hover {
  color: var(--color-text);
}

/* Editorial grid — asymmetric pairing for secondary works within a section */
.case-editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px var(--gutter);
  margin-top: 40px;
}

.case-editorial-grid > * {
  min-width: 0;
}

.case-editorial-grid img {
  width: 100%;
  display: block;
}

.case-editorial-grid__item--large {
  grid-column: 1 / -1;
  max-width: 720px;
  margin: 8px auto 0;
}

/* SNS grid — compact 3-column grid for social media crops */
.case-sns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.case-sns-grid > * {
  min-width: 0;
}

.case-sns-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Shop tools — large main image with smaller detail shots alongside */
.case-shoptools {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px var(--gutter);
  margin-top: 40px;
  align-items: start;
}

.case-shoptools > * {
  min-width: 0;
  margin: 0;
}

.case-shoptools__main img,
.case-shoptools__detail img {
  width: 100%;
  display: block;
}

.case-shoptools__detail {
  display: grid;
  gap: 16px;
}

.case-shoptools__detail > * {
  min-width: 0;
  margin: 0;
}

.case-shoptools__caption {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.case-section__eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin: 0 0 12px;
}

/* SNS editorial — real creative shown at generous scale, 2-up / 2-row */
.case-sns-editorial {
  margin-top: 48px;
}

.case-sns-editorial__row {
  display: grid;
}

.case-sns-editorial__row > * {
  min-width: 0;
  margin: 0;
}

.case-sns-editorial__row--trio {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px var(--gutter);
}

.case-sns-editorial img {
  width: 100%;
  height: auto;
  display: block;
}

.case-sns-editorial__caption {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

/* Promo intro — asymmetric editorial spread that opens the section: a tall
   storefront shot on the left, two stacked pieces on the right. Widths are
   ~48/48 (not a rigid 50/50) so it reads as a considered spread. Heights
   are never forced to match — only the column proportions are tuned so the
   two sides feel balanced as one visual block. */
.case-promo-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 32px var(--gutter);
  margin-top: 40px;
  margin-bottom: 64px;
}

.case-promo-intro__left {
  flex: 1 1 420px;
  min-width: 0;
}

.case-promo-intro__right {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.case-promo-intro .case-media-missing {
  width: 100%;
  height: 100%;
  display: block;
}

.case-promo-intro img {
  width: 100%;
  height: auto;
  display: block;
}

.case-promo-intro__left .case-media-missing {
  aspect-ratio: 3 / 4;
}

.case-promo-intro__right > figure:first-child .case-media-missing {
  aspect-ratio: 4 / 3;
}

.case-promo-intro__caption,
.case-promo-asym-row__caption {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

/* Promo asymmetric rows — main + sub piece sized independently (they do not
   sum to 100%), left-aligned so unused width becomes deliberate whitespace
   rather than being stretched to fill. */
.case-promo-asym-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 32px var(--gutter);
  margin-top: 64px;
}

.case-promo-asym-row > * {
  min-width: 0;
  margin: 0;
}

.case-promo-asym-row--kiwami .case-promo-asym-row__main {
  flex: 0 1 40%;
}

.case-promo-asym-row--kiwami .case-promo-asym-row__sub {
  flex: 0 1 27%;
}

.case-promo-asym-row--kiwami img,
.case-promo-asym-row--kiwami .case-media-missing {
  max-height: 50vh;
}

.case-promo-asym-row--secondary .case-promo-asym-row__main,
.case-promo-asym-row--secondary .case-promo-asym-row__sub {
  flex: 1 1 0;
}

.case-promo-asym-row img,
.case-promo-asym-row .case-media-missing {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

/* Seasonal asymmetric — a left column of smaller, grouped posters against a
   right column of one or two larger ones. Columns align to the top only;
   their bottoms are free to land wherever the content naturally ends. */
.case-seasonal-asym {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px var(--gutter);
  margin-top: 40px;
  align-items: start;
}

.case-seasonal-asym__left,
.case-seasonal-asym__right {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.case-seasonal-asym__left > *,
.case-seasonal-asym__right > * {
  margin: 0;
}

.case-seasonal-asym__right {
  gap: 40px;
}

.case-seasonal-asym__left-row {
  display: flex;
  gap: 24px;
}

.case-seasonal-asym__left-row > * {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

/* Trio variant — three equal-width posters in one row, replacing the
   main+pair grouping when the section calls for uniform sizing instead */
.case-seasonal-asym__left--trio {
  flex-direction: row;
  gap: 24px;
}

.case-seasonal-asym__left--trio > * {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.case-seasonal-asym img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  display: block;
}

.case-seasonal-asym .case-media-missing {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

.case-seasonal-asym__caption {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

/* Shop Tools — a single, generously inset piece when only one work is shown */
.case-shoptools-single {
  max-width: 55%;
  margin: 40px auto 0;
}

.case-shoptools-single img {
  width: 100%;
  display: block;
}

.case-shoptools-single__caption {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

/* Placeholder for a work that has not been supplied yet — a visible note,
   never a stand-in image, so it's obvious what still needs to be added */
.case-media-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--color-border);
  padding: 20px;
  text-align: center;
}

.case-media-missing--square {
  aspect-ratio: 1 / 1;
}

.case-media-missing--portrait {
  aspect-ratio: 3 / 4;
}

.case-media-missing--tall {
  aspect-ratio: 2 / 3;
}

.case-media-missing--landscape {
  aspect-ratio: 4 / 3;
}

/* Solid gray fill — used when a piece hasn't been supplied yet but the
   surrounding layout calls for a plain block rather than a dashed outline */
.case-media-missing--gray {
  background: #ececec;
  border: none;
}

.case-media-missing__label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin: 0 0 8px;
}

.case-media-missing__note {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0;
}

.case-nav {
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

/* ---------- Fade up on appearance (shared with WORKS grid) ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.case-nav__link {
  font-size: 13px;
  color: var(--color-muted);
}

.case-nav__link:hover {
  color: var(--color-text);
}

/* ---------------------------------------------------------
   Case study shared parts — caption + view-website link
--------------------------------------------------------- */
.cs-caption {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

/* View Website — quiet text link, used both near the project info
   and as the closing CTA. No fill, no button chrome — underline and
   arrow are the only affordances. */
.cs-view-website {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  position: relative;
  padding-bottom: 2px;
}

.cs-view-website::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.3s ease;
}

.cs-view-website:hover {
  color: var(--color-text);
}

.cs-view-website:hover::after {
  right: 0;
}

.cs-view-website__arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.cs-view-website:hover .cs-view-website__arrow {
  transform: translate(3px, -3px);
}

.cs-view-website--large {
  margin-top: 0;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--color-text);
}

/* Two sites in one project — links sit side by side */
.cs-view-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
}

.cs-view-links--large {
  justify-content: center;
  gap: 16px 56px;
}

/* ---------------------------------------------------------
   Case study layout (U24 / LUEUR) — numbered sections,
   work shown large with its notes placed directly beside it.
   Reuses .cs-caption / .cs-view-website from above.
--------------------------------------------------------- */
.cs-case {
  --cs-section-gap: clamp(96px, 10vw, 160px);
  --cs-head-gap: 40px;
  padding-top: 40px;
  padding-bottom: 72px;
}

.cs-label {
  display: block;
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.cs-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #666666;
}

.cs-text--small {
  font-size: 13px;
  line-height: 1.8;
}

/* ---------- 01. Hero ---------- */
.cs-hero .case-hero__back {
  margin-bottom: 40px;
}

.cs-hero__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px var(--gutter);
  align-items: end;
  margin-bottom: 40px;
}

.cs-hero__title {
  margin: 0;
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.cs-hero__lead {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: var(--color-text);
}

.cs-hero__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2.4fr;
  gap: 20px var(--gutter);
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--color-border);
}

.cs-hero__meta dt,
.cs-build__meta dt {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.cs-hero__meta dd,
.cs-build__meta dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.cs-hero__visual {
  margin: 48px 0 var(--cs-section-gap);
}

.cs-hero__visual img {
  width: 100%;
  height: auto;
}

/* ---------- Section frame ---------- */
.cs-section {
  margin-bottom: var(--cs-section-gap);
}

.cs-section__head {
  display: grid;
  grid-template-columns: 56px auto 1fr;
  align-items: baseline;
  gap: 0 24px;
  padding-top: 20px;
  margin-bottom: var(--cs-head-gap);
  border-top: 1px solid var(--color-text);
}

.cs-section__num {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.cs-section__title {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.cs-section__lead {
  justify-self: end;
  max-width: 480px;
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: #666666;
}

/* ---------- 02. Overview ---------- */
.cs-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 32px;
  margin: 0;
}

.cs-overview-grid > div {
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.cs-overview-grid dt {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.cs-overview-grid dt span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-muted);
}

.cs-overview-grid dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: #666666;
}

/* ---------- 03. Design Concept ---------- */
.cs-concept {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px clamp(48px, 7vw, 120px);
  align-items: start;
}

.cs-concept__copy {
  margin: 0 0 28px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.cs-concept__specs {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.cs-spec {
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.cs-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.cs-swatches li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-swatch {
  display: block;
  aspect-ratio: 5 / 2;
  margin-bottom: 8px;
}

.cs-swatch--light {
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.cs-swatch__name {
  font-size: 12px;
}

.cs-swatch__hex {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.cs-type {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.cs-type__sample {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
}

.cs-type__sample--jp {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  letter-spacing: 0.06em;
}

.cs-type__sample--en {
  font-family: "Didot", "Bodoni 72", "Times New Roman", serif;
  letter-spacing: 0.08em;
}

.cs-intent li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  padding: 12px 0;
  font-size: 13px;
  line-height: 1.7;
  color: #666666;
}

.cs-intent li + li {
  border-top: 1px solid #eeeeee;
}

.cs-intent span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  padding-top: 2px;
}

/* ---------- 04. Web Design ---------- */
.cs-firstview {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.cs-firstview figure {
  margin: 0;
  min-width: 0;
}

.cs-firstview__pc {
  flex: 1 1 auto;
}

.cs-firstview__sp {
  flex: 0 0 22%;
}

.cs-firstview img,
.cs-build img,
.cs-detail img,
.cs-compare img,
.cs-series img,
.cs-next img {
  width: 100%;
  height: auto;
  display: block;
}

/* Full page (left ~34%) + build info (right ~58%) */
.cs-build {
  display: grid;
  grid-template-columns: 34% 58%;
  justify-content: space-between;
  align-items: start;
  margin-top: 72px;
}

.cs-build--slim {
  grid-template-columns: 26% 64%;
}

.cs-build__full {
  margin: 0;
  min-width: 0;
}

.cs-build__note {
  font-size: 11px;
  color: var(--color-muted);
}

.cs-build__info {
  align-self: stretch;
}

.cs-build__full img {
  box-shadow: 0 0 0 1px #eeeeee;
}

.cs-build__sticky {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cs-build__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 32px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.cs-build__block {
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.cs-structure-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-structure-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.cs-structure-list__num {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--color-muted);
}

.cs-structure-list__line {
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: var(--color-border);
}

.cs-structure-list__name {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.cs-points {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cs-point;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cs-points li {
  counter-increment: cs-point;
  position: relative;
  padding-left: 44px;
}

.cs-points li::before {
  content: counter(cs-point, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 12px;
  color: var(--color-muted);
}

.cs-points h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 500;
}

.cs-points p {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: #666666;
}

/* ---------- 05. Design Details — alternating 70% work + side note ---------- */
.cs-details {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 7vw, 104px);
}

.cs-detail {
  display: grid;
  gap: 0 40px;
  align-items: end;
}

.cs-detail--left {
  grid-template-columns: var(--cs-w, 70%) 1fr;
  grid-template-areas: "img note";
}

.cs-detail--right {
  grid-template-columns: 1fr var(--cs-w, 70%);
  grid-template-areas: "note img";
}

.cs-detail__img {
  grid-area: img;
  margin: 0;
  min-width: 0;
}

.cs-detail__note {
  grid-area: note;
  max-width: 300px;
}

.cs-detail--right .cs-detail__note {
  justify-self: end;
}

.cs-detail__num {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--color-muted);
}

.cs-detail__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* ---------- 06. Responsive — PC / SP pairs, 2 × 2 ---------- */
.cs-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px var(--gutter);
}

.cs-compare__row {
  display: grid;
  grid-template-columns: 1fr 30%;
  grid-template-rows: auto auto;
  gap: 12px 16px;
  align-items: end;
}

.cs-compare__label {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.cs-compare figure {
  margin: 0;
  min-width: 0;
}

.cs-compare .cs-caption {
  margin-top: 8px;
}

/* Detail width is tunable per item (--cs-w) so sizes can vary down the page */
.cs-detail--wide { --cs-w: 78%; }
.cs-detail--mid { --cs-w: 66%; }
.cs-detail--narrow { --cs-w: 60%; }

.cs-compare__note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--color-muted);
}

/* ---------- Hero variants ---------- */
.cs-hero__tagline {
  margin: 14px 0 0;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.cs-hero__meta--5 {
  grid-template-columns: 1.2fr 0.6fr 1fr 1.6fr 1.6fr;
}

/* ---------- Overview — short text + project facts ---------- */
.cs-overview-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px clamp(48px, 7vw, 120px);
  align-items: start;
}

.cs-purpose {
  margin: 0 0 24px;
  padding-left: 20px;
  border-left: 1px solid var(--color-text);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.cs-facts {
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.cs-facts > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #eeeeee;
}

.cs-facts dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  padding-top: 2px;
}

.cs-facts dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

/* ---------- Concept keywords — sit directly under the first view ---------- */
.cs-keywords {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px 28px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.cs-keywords li {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.cs-keywords h3 {
  margin: 0 0 2px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.cs-keywords span {
  display: block;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.cs-keywords p {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: #666666;
}

/* ---------- Design details list (beside the full page) ---------- */
.cs-spec-list {
  margin: 0;
}

.cs-spec-list > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}

.cs-spec-list > div:last-child {
  border-bottom: 1px solid var(--color-border);
}

.cs-spec-list dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 3px;
}

.cs-spec-list dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: #666666;
}

.cs-spec-list strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 500;
  color: var(--color-text);
}

.cs-subhead {
  margin: 88px 0 32px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.cs-subhead h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ---------- Information design ---------- */
.cs-info-map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0 0 64px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-text);
}

.cs-info-map li {
  padding: 16px 20px 0 0;
}

.cs-info-map li + li {
  padding-left: 20px;
  border-left: 1px solid #eeeeee;
}

.cs-info-map b {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}

.cs-info-map small {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.cs-info-map p {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: #666666;
}

/* ---------- Visual direction — a small design system ---------- */
.cs-vd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px clamp(48px, 6vw, 96px);
}

.cs-vd .cs-spec {
  min-width: 0;
}

.cs-type--display {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.6;
  letter-spacing: 0.1em;
  margin: 0 0 6px;
}

.cs-type--italic {
  font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #896d33;
  margin: 0 0 16px;
}

.cs-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.cs-photos img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.cs-mood {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.cs-mood li {
  font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.cs-mood li:nth-child(even) {
  font-style: italic;
  color: var(--color-muted);
}

@media (max-width: 1024px) {
  .cs-hero__meta--5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-hero__meta--5 > div:last-child {
    grid-column: auto;
  }

  .cs-overview-split,
  .cs-vd {
    grid-template-columns: 1fr;
  }

  .cs-keywords {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-info-map {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 24px;
  }

  .cs-info-map li:nth-child(3n + 1) {
    padding-left: 0;
    border-left: none;
  }
}

@media (max-width: 600px) {
  .cs-hero__meta--5 {
    grid-template-columns: 1fr 1fr;
  }

  .cs-facts > div,
  .cs-spec-list > div {
    grid-template-columns: 96px 1fr;
  }

  .cs-keywords {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
  }

  .cs-subhead {
    margin-top: 56px;
  }

  .cs-info-map {
    grid-template-columns: 1fr;
    row-gap: 0;
    margin-bottom: 40px;
  }

  .cs-info-map li,
  .cs-info-map li + li {
    padding: 14px 0;
    border-left: none;
    border-bottom: 1px solid #eeeeee;
  }
}

/* ---------- Device visual — flat browser + phone, no photo mockup ---------- */
.cs-devices {
  position: relative;
  margin: 48px 0 var(--cs-section-gap);
  padding: clamp(40px, 6vw, 88px) clamp(24px, 9vw, 140px) clamp(56px, 7vw, 104px);
  background: #f4f5f3;
}

.cs-devices__browser {
  width: 86%;
  background: #ffffff;
  border: 1px solid #e2e3e0;
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.25);
}

.cs-devices__bar {
  display: block;
  height: 22px;
  border-bottom: 1px solid #e2e3e0;
}

.cs-devices__phone {
  position: absolute;
  right: clamp(24px, 7vw, 110px);
  bottom: clamp(32px, 4vw, 64px);
  width: 21%;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e2e3e0;
  border-radius: 24px;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.3);
}

.cs-devices__phone img {
  border-radius: 18px;
}

.cs-devices img,
.cs-rwd img,
.cs-final img,
.cs-brand__logo {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Brand block — logo as one quiet element beside the concept ---------- */
.cs-brand {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px clamp(40px, 6vw, 96px);
  align-items: center;
  margin-bottom: 64px;
}

.cs-brand__logo {
  border: 1px solid #eeeeee;
}

.cs-brand__text .cs-text {
  max-width: 620px;
}

.cs-swatches--5 {
  grid-template-columns: repeat(5, 1fr);
}

.cs-type--noto {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: 0.06em;
}

.cs-type--serif {
  margin: 0 0 16px;
  font-family: "Noto Serif JP", "Times New Roman", serif;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: #666666;
}

.cs-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.cs-flow li {
  font-size: 12px;
  letter-spacing: 0.06em;
}

.cs-flow li + li::before {
  content: "→";
  margin: 0 10px;
  color: var(--color-muted);
}

/* nested inside the numbered .cs-points list — drop its counter styling */
.cs-points .cs-flow li {
  padding-left: 0;
  counter-increment: none;
}

.cs-points .cs-flow li::before {
  content: none;
}

.cs-points .cs-flow li + li::before {
  content: "→";
  position: static;
  font-size: inherit;
}

/* Full-width detail — the visual centre-piece, note sits beneath it */
.cs-detail--center {
  grid-template-columns: 1fr;
  grid-template-areas: "img" "note";
  justify-items: center;
}

.cs-detail--center .cs-detail__img {
  width: 88%;
}

.cs-detail--center .cs-detail__note {
  width: 88%;
  max-width: none;
  display: grid;
  grid-template-columns: 56px 200px 1fr;
  align-items: baseline;
  gap: 0 24px;
  margin-top: 24px;
}

.cs-detail--center .cs-detail__note .cs-text {
  max-width: 520px;
}

/* ---------- Responsive — full pages in scrollable frames, not matched in height ---------- */
.cs-rwd {
  display: grid;
  grid-template-columns: 58% 22%;
  justify-content: center;
  gap: 0 6%;
  align-items: start;
}

.cs-rwd figure {
  margin: 0;
  min-width: 0;
}

.cs-rwd__frame {
  overflow-y: auto;
  border: 1px solid #e6e6e6;
  scrollbar-width: thin;
}

.cs-rwd__pc .cs-rwd__frame {
  height: min(78vh, 760px);
}

.cs-rwd__sp .cs-rwd__frame {
  height: min(88vh, 860px);
  border-radius: 20px;
}

.cs-final {
  margin: 0 0 88px;
}

@media (max-width: 1024px) {
  .cs-devices {
    padding-bottom: 72px;
  }

  .cs-brand {
    grid-template-columns: 140px 1fr;
  }

  .cs-swatches--5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-detail--center .cs-detail__img,
  .cs-detail--center .cs-detail__note {
    width: 100%;
  }

  .cs-rwd {
    grid-template-columns: 62% 30%;
    gap: 0 8%;
  }
}

@media (max-width: 600px) {
  .cs-devices {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 32px 16px 48px;
  }

  .cs-devices__browser {
    width: 100%;
  }

  .cs-devices__bar {
    height: 12px;
  }

  .cs-devices__phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: 38%;
    margin: -28% 12px 0 auto;
    padding: 4px;
    border-radius: 16px;
  }

  .cs-devices__phone img {
    border-radius: 12px;
  }

  /* PC on top, SP overlapping its lower-right corner */
  .cs-firstview--overlap {
    flex-direction: column;
    align-items: stretch;
  }

  .cs-firstview--overlap .cs-firstview__sp {
    flex-basis: auto;
    width: 40%;
    margin: -22% 8px 0 auto;
    position: relative;
  }

  .cs-firstview--overlap .cs-firstview__sp img {
    box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.4);
  }

  .cs-brand {
    grid-template-columns: 96px 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 40px;
  }

  .cs-swatches--5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-detail--center .cs-detail__img {
    width: calc(100% + var(--gutter) * 2);
    margin: 0 calc(var(--gutter) * -1);
  }

  .cs-detail--center .cs-detail__note {
    grid-template-columns: 1fr;
  }

  .cs-rwd {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cs-rwd__pc .cs-rwd__frame {
    height: 60vh;
  }

  .cs-rwd__sp {
    width: 72%;
    margin: 0 auto !important;
  }

  .cs-rwd__sp .cs-rwd__frame {
    height: 72vh;
  }

  .cs-final {
    margin: 0 calc(var(--gutter) * -1) 56px;
  }
}

/* ==========================================================
   Editorial (print) case study — BIOTOP Flower Catalogue.
   Same frame as the web case studies; spreads vary in width
   and alignment down the page instead of repeating one size.
   ========================================================== */
.cs-spread {
  margin: 0;
  min-width: 0;
}

.cs-spread img {
  width: 100%;
  height: auto;
  display: block;
}

/* Trim the white margin baked into the spread exports (CSS only, file untouched) */
.cs-trim {
  overflow: hidden;
  aspect-ratio: 1766 / 1260;
}

.cs-trim img {
  width: 113.25%;
  max-width: none;
  margin: -4.53% 0 0 -6.57%;
}

.cs-spread--center {
  width: 85%;
  margin: 0 auto;
}

.cs-spread--feature {
  width: 80%;
  margin: 0 auto;
}

.cs-spread--full {
  width: 100%;
}

/* Statement + typographic keywords (Design Approach) */
.cs-statement {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 40px clamp(48px, 7vw, 120px);
  align-items: end;
}

.cs-statement__copy {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.cs-terms {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cs-term;
}

.cs-terms li {
  counter-increment: cs-term;
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  letter-spacing: 0.14em;
}

.cs-terms li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.cs-terms li::before {
  content: counter(cs-term, decimal-leading-zero);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* Annotation rows that sit directly under a spread */
.cs-annot {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.cs-annot li {
  padding-top: 12px;
  border-top: 1px solid var(--color-text);
}

.cs-annot b {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cs-annot p {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: #666666;
}

.cs-spread--center + .cs-annot {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}

/* Two-half annotation that lines up with the left / right page */
.cs-annot--pages {
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--gutter);
}

.cs-annot--pages p {
  max-width: 420px;
}

.cs-caption-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px var(--gutter);
  margin-top: 24px;
}

.cs-caption-line .cs-text {
  max-width: 460px;
}

/* Design details — crops of the print file, shown at reading size */
.cs-crops {
  display: grid;
  grid-template-columns: 3fr 5fr 4fr;
  gap: 40px 28px;
  align-items: start;
}

.cs-crops__stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.cs-crop {
  margin: 0;
  min-width: 0;
}

.cs-crop__frame {
  overflow: hidden;
  background: #f4f4f2;
}

.cs-crop__frame img {
  display: block;
  max-width: none;
  height: auto;
}

.cs-crop figcaption {
  margin-top: 14px;
}

.cs-crop h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.cs-crop h3 span {
  margin-right: 12px;
  font-weight: 400;
  color: var(--color-muted);
}

.cs-crop p {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: #666666;
}

/* Final — title block left, mockup right */
.cs-closing {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 40px clamp(40px, 5vw, 80px);
  align-items: end;
  margin-bottom: 88px;
}

.cs-closing__title {
  margin: 0 0 12px;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.cs-closing figure {
  margin: 0;
}

.cs-closing img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1024px) {
  .cs-statement,
  .cs-closing {
    grid-template-columns: 1fr;
  }

  .cs-spread--center,
  .cs-spread--feature,
  .cs-spread--center + .cs-annot {
    width: 100%;
  }

  .cs-annot {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
  }

  .cs-annot--pages {
    grid-template-columns: 1fr 1fr;
  }

  .cs-crops {
    grid-template-columns: 1fr 1fr;
  }

  .cs-crops__stack {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 600px) {
  /* spreads run edge to edge so product text stays legible */
  .cs-spread--bleed {
    width: auto;
    justify-self: stretch;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }

  .cs-statement__copy br {
    display: none;
  }

  .cs-annot,
  .cs-annot--pages,
  .cs-caption-line {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .cs-crops {
    grid-template-columns: 1fr 1fr;
    gap: 28px 12px;
  }

  .cs-crops__stack {
    grid-template-columns: 1fr;
  }

  .cs-closing {
    margin-bottom: 56px;
  }
}

/* ==========================================================
   FABRIC Recruiting — two sites, one brand. The page itself
   switches from white → black (STAFF) → ivory (CAST) → split.
   ========================================================== */
.cs-body-clip {
  overflow-x: clip;
}

.cs-gold {
  color: #b4915c;
}

/* Full-bleed colour band; content keeps the normal column width */
.cs-band {
  margin: 0 calc(50% - 50vw);
  padding: var(--cs-section-gap) calc(50vw - 50%);
}

.cs-band > :last-child {
  margin-bottom: 0;
}

.cs-band--dark {
  --color-text: #eeeeee;
  --color-muted: #8a8a8a;
  --color-border: #2c2c2c;
  background: #0d0d0d;
  color: var(--color-text);
}

.cs-band--dark .cs-text,
.cs-band--dark .cs-section__lead {
  color: #a6a6a6;
}

.cs-band--ivory {
  background: #f8f7f4;
}

.cs-band + .cs-band {
  margin-top: 0;
}

/* Big Japanese headline copy used to open STAFF / CAST */
.cs-copy {
  margin: 0 0 24px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.cs-intro {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 32px clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: 64px;
}

.cs-intro .cs-text {
  max-width: 440px;
}

/* Strategy — two FVs, keywords set as type under each */
.cs-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 24px;
}

.cs-duo figure {
  margin: 0;
  min-width: 0;
}

.cs-duo img,
.cs-fv img,
.cs-rsp img,
.cs-pd img,
.cs-split img,
.cs-fullpair img,
.cs-overview-logo {
  width: 100%;
  height: auto;
  display: block;
}

.cs-words {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-family: "Didot", "Bodoni 72", "Times New Roman", serif;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.cs-words li:nth-child(even) {
  font-style: italic;
  color: var(--color-muted);
}

.cs-big-title {
  margin: 0 0 48px;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.cs-overview-logo {
  width: 180px;
  margin-top: 32px;
}

/* First view — centred large (STAFF) or pushed right with a side label (CAST) */
.cs-fv {
  margin: 0 auto;
  width: 90%;
}

.cs-fv--aside {
  display: grid;
  grid-template-columns: 1fr 78%;
  gap: 32px;
  align-items: end;
  width: 100%;
}

.cs-fv figure {
  margin: 0;
  min-width: 0;
}

.cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}

.cs-fv--aside .cs-tags {
  flex-direction: column;
  gap: 6px;
}

/* Responsive — PC large + SP tall, never stretched to the same height */
.cs-rsp {
  display: grid;
  grid-template-columns: 76% 20%;
  justify-content: space-between;
  align-items: start;
  margin-top: var(--cs-section-gap);
}

.cs-rsp--flip {
  grid-template-columns: 20% 76%;
}

.cs-rsp figure {
  margin: 0;
  min-width: 0;
}

/* Page design — thin full-page rail (scrollable) + large section crops */
.cs-pd {
  display: grid;
  grid-template-columns: 18% 74%;
  justify-content: space-between;
  align-items: stretch;
  margin-top: var(--cs-section-gap);
}

.cs-pd--flip {
  grid-template-columns: 74% 18%;
}

.cs-pd__rail {
  position: relative;
  min-height: 480px;
  margin: 0;
}

.cs-pd__rail .cs-rail-frame {
  position: absolute;
  inset: 0 0 32px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  scrollbar-width: thin;
}

.cs-pd__rail figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
}

.cs-pd__main {
  display: flex;
  flex-direction: column;
  gap: 56px;
  min-width: 0;
}

.cs-pd__main figure {
  margin: 0;
}

.cs-pd__main figure:nth-child(2) {
  width: 82%;
  margin-left: auto;
}

.cs-pd--flip .cs-pd__main figure:nth-child(2) {
  margin-left: 0;
}

/* Transition label between the black and ivory bands */
.cs-turn {
  margin: 0 0 var(--cs-section-gap);
  text-align: center;
}

.cs-turn .cs-label {
  margin: 0;
}

/* Comparison — the page itself splits black / white */
.cs-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 calc(50% - 50vw) var(--cs-section-gap);
}

.cs-split__side {
  padding: clamp(56px, 7vw, 112px) clamp(24px, 5vw, 80px);
}

.cs-split__side--dark {
  --color-text: #eeeeee;
  --color-muted: #8a8a8a;
  background: #0d0d0d;
  color: var(--color-text);
}

.cs-split__side--light {
  background: #ffffff;
}

.cs-split figure {
  margin: 0 0 32px;
}

.cs-split__head {
  text-align: center;
  padding: 0 var(--gutter);
  margin: 0 calc(50% - 50vw);
  padding-bottom: 48px;
}

.cs-split .cs-words {
  font-size: clamp(20px, 2vw, 30px);
}

/* Design system — text, thin rules, no cards */
.cs-system {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-system > li {
  padding-top: 16px;
  border-top: 1px solid var(--color-text);
}

.cs-system h3 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.cs-system h3 span {
  margin-right: 12px;
  font-weight: 400;
  color: var(--color-muted);
}

.cs-system p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.85;
  color: #666666;
}

.cs-system b {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--color-text);
}

.cs-dots {
  display: flex;
  gap: 6px;
  margin: 6px 0 12px;
}

.cs-dots span {
  width: 28px;
  height: 28px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Full page pair — clipped, scrollable frames */
.cs-fullpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px var(--gutter);
}

.cs-fullpair figure {
  margin: 0;
  min-width: 0;
}

.cs-fullpair .cs-rail-frame {
  height: min(80vh, 820px);
  overflow-y: auto;
  border: 1px solid #e6e6e6;
  scrollbar-width: thin;
}

.cs-endline {
  margin-bottom: 40px;
}

.cs-endline .cs-closing__title {
  margin-bottom: 4px;
}

@media (max-width: 1024px) {
  .cs-intro,
  .cs-fv--aside {
    grid-template-columns: 1fr;
  }

  .cs-fv {
    width: 100%;
  }

  .cs-fv--aside .cs-tags {
    flex-direction: row;
    order: 2;
  }

  .cs-system {
    grid-template-columns: 1fr 1fr;
  }

  .cs-pd,
  .cs-pd--flip {
    grid-template-columns: 26% 68%;
  }

  .cs-pd--flip {
    grid-template-columns: 68% 26%;
  }
}

@media (max-width: 600px) {
  .cs-duo,
  .cs-split,
  .cs-fullpair,
  .cs-system {
    grid-template-columns: 1fr;
  }

  /* SP: PC on top, SP beneath at a readable width */
  .cs-rsp,
  .cs-rsp--flip {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cs-rsp__sp {
    width: 56%;
    justify-self: center;
  }

  .cs-rsp--flip .cs-rsp__sp {
    order: 2;
  }

  .cs-pd,
  .cs-pd--flip {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cs-pd__rail {
    order: 2;
    width: 56%;
    height: 70vh;
    justify-self: center;
  }

  .cs-pd__main {
    gap: 32px;
  }

  .cs-pd__main figure:nth-child(2) {
    width: 100%;
  }

  .cs-fv--aside figure,
  .cs-fv,
  .cs-duo figure > img,
  .cs-rsp__pc {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }

  .cs-fv--aside figure {
    order: 1;
  }

  .cs-fv {
    width: auto;
  }

  .cs-fv--aside {
    margin-left: 0;
    margin-right: 0;
  }

  .cs-duo figure > img {
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
  }

  .cs-split__side {
    padding: 56px var(--gutter);
  }

  .cs-fullpair .cs-rail-frame {
    height: 64vh;
  }
}

/* ==========================================================
   Poster case study — a quiet gallery wall around a loud piece
   ========================================================== */
.cs-poster {
  width: min(50vw, 820px);
  margin: 72px auto var(--cs-section-gap);
}

.cs-poster img,
.cs-context img,
.cs-closing--poster img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-keywords-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

/* In context — the black mockup against the white page, cropped to 4:3 */
.cs-context {
  margin: 0;
}

.cs-context img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 48%;
}

.cs-system--3 {
  grid-template-columns: repeat(3, 1fr);
}

.cs-closing--poster {
  grid-template-columns: 5fr 7fr;
  align-items: center;
}

.cs-closing--poster figure {
  width: min(100%, 480px);
  justify-self: center;
}

@media (max-width: 1024px) {
  .cs-poster {
    width: min(72vw, 640px);
  }

  .cs-closing--poster {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .cs-poster {
    width: 90%;
    margin-top: 40px;
  }

  .cs-context {
    margin: 0 calc(var(--gutter) * -1);
  }

  .cs-context img {
    aspect-ratio: 3 / 4;
  }

  .cs-system--3 {
    grid-template-columns: 1fr;
  }

  .cs-closing--poster figure {
    width: 90%;
  }
}

/* ==========================================================
   Corporate site case study (NEXORA) — every screenshot keeps its
   own ratio; layout is built around the images, never crops them.
   ========================================================== */
.cs-shot {
  margin: 0;
  min-width: 0;
}

.cs-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-shot--frame img {
  box-shadow: 0 0 0 1px #e8e8e8;
}

/* Hero image wider than the text column (≈92vw, capped) */
.cs-wide {
  width: min(92vw, 1600px);
  margin: 48px 0 var(--cs-section-gap) calc(50% - min(46vw, 800px));
}

/* Small numbered label on the left, image on the right */
.cs-aside-grid {
  display: grid;
  grid-template-columns: 2fr 10fr;
  gap: 32px;
  align-items: start;
}

.cs-aside-grid__label .cs-section__num {
  margin-bottom: 8px;
}

.cs-aside-grid__label h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* Two images of different sizes, never forced to the same height */
.cs-duo2 {
  display: grid;
  grid-template-columns: var(--a, 76fr) var(--b, 20fr);
  justify-content: space-between;
  column-gap: 4%;
  align-items: start;
}

.cs-duo2 > :nth-child(2) {
  margin-top: var(--drop, 0);
}

.cs-duo2--end {
  align-items: end;
}

/* One screenshot pushed left or right, leaving open space */
.cs-offset {
  width: var(--w, 76%);
}

.cs-offset--right {
  margin-left: auto;
}

.cs-offset + .cs-offset {
  margin-top: clamp(96px, 10vw, 160px);
}

.cs-offset figcaption,
.cs-trio figcaption,
.cs-duo2 figcaption {
  margin-top: 20px;
}

/* Other pages — three columns, heights left to each screenshot */
.cs-trio {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 48px 40px;
  align-items: start;
}

.cs-trio > :nth-child(2) {
  margin-top: 96px;
}

.cs-trio > :nth-child(3) {
  margin-top: 40px;
}

/* Full experience — a narrow PC long-screen and a thin SP one, lots of air */
.cs-longview {
  display: grid;
  grid-template-columns: 1fr 34% 8% 12% 1fr;
  align-items: start;
}

.cs-longview > :first-child {
  grid-column: 2;
}

.cs-longview > :last-child {
  grid-column: 4;
  margin-top: 200px;
}

@media (max-width: 1024px) {
  .cs-aside-grid {
    grid-template-columns: 1fr;
  }

  .cs-trio {
    grid-template-columns: 1fr 1fr;
  }

  .cs-trio > :nth-child(3) {
    margin-top: 0;
  }

  .cs-longview {
    grid-template-columns: 1fr 50% 8% 18% 1fr;
  }
}

@media (max-width: 600px) {
  .cs-wide {
    width: auto;
    margin: 32px calc(var(--gutter) * -1) var(--cs-section-gap);
  }

  .cs-duo2 {
    grid-template-columns: 1fr;
    row-gap: 56px;
  }

  .cs-duo2 > :nth-child(2) {
    margin-top: 0;
  }

  /* phone-sized shots stay narrow and sit to the right */
  .cs-shot--sp {
    width: 50%;
    margin-left: auto;
  }

  .cs-duo2--sp-first > .cs-shot--sp {
    order: -1;
    margin-left: 0;
  }

  .cs-offset {
    width: 100%;
  }

  .cs-trio {
    grid-template-columns: 1fr;
  }

  .cs-trio > * {
    margin-top: 0 !important;
  }

  .cs-trio > :nth-child(1),
  .cs-trio > :nth-child(3) {
    width: 82%;
  }

  .cs-trio > :nth-child(3) {
    margin-left: auto;
  }

  .cs-longview {
    grid-template-columns: 1fr;
    row-gap: 56px;
  }

  .cs-longview > :first-child {
    grid-column: 1;
    width: 72%;
  }

  .cs-longview > :last-child {
    grid-column: 1;
    margin-top: 0;
    width: 36%;
    margin-left: auto;
  }
}

/* ---------- Series Development ---------- */
.cs-series {
  display: grid;
  grid-template-columns: 1fr 220px 220px;
  gap: 24px 32px;
  align-items: end;
  margin-bottom: 88px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.cs-series__text .cs-text {
  max-width: 440px;
}

.cs-series figure {
  margin: 0;
}

/* ---------- Ending + 08. Next Project ---------- */
.cs-ending {
  margin-bottom: 72px;
  text-align: center;
}

.cs-next {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-text);
}

.cs-next__back {
  font-size: 13px;
  color: var(--color-muted);
}

.cs-next__back:hover {
  color: var(--color-text);
}

.cs-next__link {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  text-align: right;
}

.cs-next__text {
  display: flex;
  flex-direction: column;
}

.cs-next__title {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.cs-next__arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.cs-next__cat {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-muted);
}

.cs-next__thumb {
  display: block;
  width: 280px;
  overflow: hidden;
}

.cs-next__thumb img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .cs-next__link:hover .cs-next__arrow {
    transform: translateX(6px);
  }

  .cs-next__link:hover .cs-next__thumb img {
    transform: scale(1.04);
  }
}

/* ---------- U24 responsive ---------- */
@media (max-width: 1024px) {
  .cs-hero__head,
  .cs-concept {
    grid-template-columns: 1fr;
  }

  .cs-hero__meta {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-hero__meta > div:last-child {
    grid-column: 1 / -1;
  }

  .cs-section__head {
    grid-template-columns: 40px 1fr;
  }

  .cs-section__lead {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 16px;
  }


  .cs-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-build {
    grid-template-columns: 38% 56%;
  }

  .cs-build__meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-detail--left,
  .cs-detail--right {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "note";
  }

  .cs-detail__img {
    width: 88%;
  }

  .cs-detail--right .cs-detail__img {
    justify-self: end;
  }

  .cs-detail__note {
    max-width: 480px;
    margin-top: 20px;
  }

  .cs-detail--right .cs-detail__note {
    justify-self: end;
  }

  .cs-compare {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .cs-case {
    --cs-section-gap: 80px;
    --cs-head-gap: 28px;
    padding-top: 24px;
  }

  .cs-hero__meta {
    grid-template-columns: 1fr 1fr;
  }

  .cs-hero__visual {
    margin-top: 32px;
  }

  .cs-section__title {
    font-size: 20px;
  }


  .cs-overview-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cs-swatches {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-firstview {
    gap: 12px;
  }

  .cs-firstview__sp {
    flex-basis: 30%;
  }

  .cs-build {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 48px;
  }

  .cs-build__full {
    width: 64%;
    margin: 0 auto;
  }

  .cs-build__sticky {
    position: static;
    gap: 36px;
  }

  .cs-detail__img {
    width: 100%;
  }

  .cs-detail--right .cs-detail__note {
    justify-self: start;
  }



  .cs-series {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 56px;
  }

  .cs-series__text {
    grid-column: 1 / -1;
  }

  .cs-next {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .cs-next__link {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 16px;
  }

  .cs-next__thumb {
    width: 100%;
  }
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 30px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--color-muted);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 1024px) {
  .case-sns-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-sns-editorial__row--trio {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-promo-intro__left,
  .case-promo-intro__right,
  .case-promo-asym-row--kiwami .case-promo-asym-row__main,
  .case-promo-asym-row--kiwami .case-promo-asym-row__sub,
  .case-promo-asym-row--secondary .case-promo-asym-row__main,
  .case-promo-asym-row--secondary .case-promo-asym-row__sub {
    flex-basis: 100%;
  }

  .case-seasonal-asym {
    grid-template-columns: 1fr;
  }


















}

@media (max-width: 600px) {
  :root {
    --gutter: 24px;
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .site-nav__list {
    gap: 20px;
  }

  .filter-nav {
    justify-content: flex-start;
  }

  .filter-nav__list {
    justify-content: flex-start;
  }

  .case-hero__title {
    font-size: 28px;
  }

  .case-hero__meta {
    gap: 20px;
  }

  .case-figure {
    margin-bottom: 40px;
  }

  .case-section {
    margin-bottom: 60px;
  }

  .case-editorial-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .case-editorial-grid__item--large {
    max-width: none;
    margin-top: 0;
  }

  .case-sns-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .case-shoptools {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .case-shoptools__detail {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-sns-editorial__row--trio {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .case-promo-intro,
  .case-promo-asym-row {
    gap: 24px;
  }

  .case-seasonal-asym__left-row,
  .case-seasonal-asym__left--trio {
    flex-direction: column;
  }

  .case-promo-intro img,
  .case-promo-intro .case-media-missing,
  .case-promo-asym-row img,
  .case-promo-asym-row .case-media-missing,
  .case-seasonal-asym img,
  .case-seasonal-asym .case-media-missing {
    max-height: 50vh;
  }

  .case-shoptools-single {
    max-width: none;
  }










  .portfolio-item {
    transform: translateY(10px);
  }

  .fade-up {
    transform: translateY(10px);
  }
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .portfolio-item,
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================
   Cleansing Serum — mobile LP case study
   Portfolio side stays white / ivory / beige with a restrained
   gold; the LP's own orange & gold appear only inside the work.
   ========================================================== */
.cl-case {
  --cl-ivory: #faf7f1;
  --cl-beige: #f1ebe0;
  --cl-line: #e6dfd2;
  --cl-gold: #b09a6c;
  --cl-serif: "Didot", "Bodoni 72", "Times New Roman", serif;
  --cl-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
}

/* ---------- Phone frame (flat, no photo mockup) ---------- */
.cl-phone {
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--cl-line);
  border-radius: 28px;
  box-shadow: 0 30px 60px -36px rgba(80, 60, 30, 0.35);
}

.cl-phone__screen {
  aspect-ratio: 9 / 19;
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
}

.cl-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ---------- 01. Hero — title left, editorial phone stage right ---------- */
.cl-hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px clamp(32px, 5vw, 80px);
  align-items: stretch;
  margin-bottom: var(--cs-section-gap);
}

.cl-hero__text {
  display: flex;
  flex-direction: column;
}

.cl-hero__text .case-hero__back {
  margin-bottom: auto;
  padding-bottom: 64px;
}

.cl-hero__title {
  font-size: clamp(44px, 5.4vw, 80px);
  line-height: 1.04;
}

.cl-hero__title span {
  display: block;
  margin-top: 10px;
  font-family: var(--cl-serif);
  font-style: italic;
  font-size: 0.62em;
  color: var(--cl-gold);
  letter-spacing: 0.03em;
}

.cl-hero__sub {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.cl-hero__sub li {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.06em;
}

.cl-hero__lead {
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 2;
  color: #666666;
}

.cl-stage {
  position: relative;
  aspect-ratio: 7 / 6.4;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 55% 45%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, var(--cl-ivory) 0%, #ffffff 55%, var(--cl-beige) 100%);
}

/* very faint droplets — never louder than the work */
.cl-drop {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.2) 38%, rgba(214, 198, 166, 0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(176, 154, 108, 0.14);
  pointer-events: none;
}

.cl-drop--a { width: 18%; aspect-ratio: 1; top: 8%; left: 6%; }
.cl-drop--b { width: 7%; aspect-ratio: 1; top: 30%; left: 22%; }
.cl-drop--c { width: 11%; aspect-ratio: 1; bottom: 9%; right: 7%; }

.cl-stage .cl-phone {
  position: absolute;
}

.cl-stage__main {
  width: 31%;
  left: 36%;
  top: 7%;
  z-index: 3;
}

.cl-stage__sub {
  width: 24%;
  z-index: 2;
}

.cl-stage__sub--l {
  left: 12%;
  top: 22%;
}

.cl-stage__sub--r {
  right: 9%;
  top: 15%;
}

.cl-stage__note {
  position: absolute;
  right: 20px;
  bottom: 14px;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cl-gold);
}

/* ---------- 02. Overview ---------- */
.cl-overview__text {
  max-width: 520px;
}

.cl-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  margin: 0;
}

.cl-info > div {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.cl-info dt {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.cl-info dd {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* ---------- 03. Design Concept ---------- */
.cl-concept {
  padding: clamp(56px, 7vw, 104px) 24px;
  margin-bottom: 64px;
  text-align: center;
  background: var(--cl-ivory);
}

.cl-concept__en {
  margin: 0;
  font-family: var(--cl-serif);
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.cl-concept__en span {
  display: inline-block;
  margin: 0 0.18em;
  font-size: 0.6em;
  vertical-align: 0.14em;
  color: var(--cl-gold);
}

.cl-concept__jp {
  margin: 28px 0 0;
  font-family: var(--cl-mincho);
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 2;
  letter-spacing: 0.08em;
}

.cl-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px clamp(32px, 4vw, 64px);
  margin: 0 0 80px;
  padding: 0;
  list-style: none;
}

.cl-pillars li {
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.cl-pillars__num {
  display: block;
  margin-bottom: 20px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cl-gold);
}

.cl-pillars h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.cl-pillars__jp {
  margin: 6px 0 16px;
  font-family: var(--cl-mincho);
  font-size: 14px;
  letter-spacing: 0.06em;
}

.cl-palette .cs-swatch {
  aspect-ratio: 3 / 2;
}

.cl-palette .cs-text {
  max-width: 640px;
}

/* ---------- 04. First View — large FV left, note right ---------- */
.cl-fv {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px clamp(48px, 7vw, 120px);
  align-items: center;
}

.cl-fv__visual {
  position: relative;
  margin: 0;
  padding: clamp(32px, 5vw, 72px) 27% clamp(32px, 5vw, 72px) clamp(24px, 4vw, 56px);
  background: var(--cl-ivory);
}

.cl-fv__visual > img {
  width: 100%;
  height: auto;
  box-shadow: 0 30px 60px -40px rgba(80, 60, 30, 0.4);
}

.cl-fv__phone {
  position: absolute;
  right: 4%;
  bottom: clamp(32px, 5vw, 72px);
  width: 19%;
}

.cl-fv__copy {
  margin: 0 0 28px;
  padding-left: 20px;
  border-left: 1px solid var(--cl-gold);
  font-family: var(--cl-mincho);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.cl-anatomy {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.cl-anatomy li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid #eeeeee;
  font-size: 13px;
  line-height: 1.7;
  color: #666666;
}

.cl-anatomy span {
  padding-top: 2px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ---------- 05. User Journey — three steps on a connecting line ---------- */
.cl-journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(32px, 5vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the thread that ties the three sections together */
.cl-journey::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cl-line);
}

.cl-journey__step:nth-child(2) { margin-top: clamp(40px, 5vw, 80px); }
.cl-journey__step:nth-child(3) { margin-top: clamp(80px, 10vw, 160px); }

.cl-journey__tag {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding-left: 24px;
  font-size: 12px;
  letter-spacing: 0.16em;
}

.cl-journey__tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  border: 1px solid var(--cl-gold);
  border-radius: 50%;
  background: #ffffff;
}

.cl-journey__step:nth-child(n + 2) .cl-journey__tag::before {
  background: var(--cl-gold);
}

.cl-journey__tag span {
  font-size: 11px;
  color: var(--cl-gold);
}

.cl-journey__img {
  margin: 0 0 24px;
  aspect-ratio: 589 / 869;
  overflow: hidden;
  background: var(--cl-ivory);
  box-shadow: 0 24px 50px -36px rgba(80, 60, 30, 0.45);
}

.cl-journey__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cl-journey__title {
  margin: 0 0 8px;
  font-family: var(--cl-mincho);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.cl-journey__quote {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--cl-gold);
}

.cl-journey__end {
  margin: 56px 0 0;
  text-align: right;
  font-size: 13px;
  color: #666666;
}

.cl-journey__end span {
  margin-right: 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-text);
}

/* ---------- 06. Design Details — full section (sticky) + crops ---------- */
.cl-details {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 48px clamp(48px, 7vw, 120px);
  align-items: start;
}

.cl-details__full {
  margin: 0;
  height: 100%;
}

.cl-details__sticky {
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.cl-details__full img {
  width: 100%;
  height: auto;
  border: 1px solid var(--cl-line);
}

.cl-details__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 8vw, 120px);
}

.cl-point {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 24px 40px;
  align-items: end;
}

.cl-point__img {
  margin: 0;
  overflow: hidden;
  background: var(--cl-ivory);
}

/* bold crop — the section is enlarged so type and texture read at detail size */
.cl-point__img img {
  width: 100%;
  height: auto;
  transform: scale(1.06);
  transform-origin: 30% 40%;
}

.cl-point--rev .cl-point__img img {
  transform-origin: 70% 40%;
}

.cl-point__num {
  margin: 0 0 6px;
  font-family: var(--cl-serif);
  font-size: 40px;
  line-height: 1;
  color: var(--cl-gold);
}

.cl-point__title {
  margin: 0 0 12px;
  font-family: var(--cl-mincho);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* ---------- 07. Conversion — annotated price box + priority ---------- */
.cl-cv {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px clamp(48px, 7vw, 120px);
  align-items: center;
}

.cl-cv__visual {
  margin: 0;
  padding: clamp(32px, 5vw, 72px) clamp(40px, 6vw, 88px);
  background: var(--cl-beige);
}

.cl-cv__img {
  position: relative;
}

.cl-cv__img img {
  width: 100%;
  height: auto;
}

.cl-cv__pin {
  position: absolute;
  left: -14px;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--cl-gold);
  font-size: 11px;
  line-height: 24px;
  text-align: center;
  color: var(--cl-gold);
}

.cl-priority {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.cl-priority__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #eeeeee;
}

.cl-priority__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--cl-gold);
  font-size: 11px;
  line-height: 24px;
  text-align: center;
  color: var(--cl-gold);
}

.cl-priority__key {
  margin: 0 0 4px;
  font-family: var(--cl-mincho);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* type size grows with priority — the ladder itself shows the hierarchy */
.cl-priority__item--1 .cl-priority__key { font-size: 14px; color: var(--color-muted); }
.cl-priority__item--2 .cl-priority__key { font-size: 22px; }
.cl-priority__item--3 .cl-priority__key { font-size: 17px; display: flex; align-items: center; gap: 10px; }

.cl-priority__key em {
  margin-left: 6px;
  font-style: normal;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cl-gold);
}

.cl-priority__key i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #20bd04;
}

.cl-priority__desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: #888888;
}

.cl-cta-map {
  display: grid;
  grid-template-columns: auto minmax(0, 520px);
  justify-content: center;
  gap: 0 clamp(40px, 6vw, 96px);
  align-items: center;
  margin-top: clamp(80px, 9vw, 140px);
}

.cl-cta-map__lp {
  position: relative;
  width: 64px;
}

.cl-cta-map__lp img {
  width: 100%;
  height: auto;
  border: 1px solid var(--cl-line);
}

.cl-cta-map__lp span {
  position: absolute;
  left: -16px;
  right: -16px;
  height: 1px;
  background: var(--cl-gold);
}

.cl-cta-map__lp span::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cl-gold);
}

.cl-cta-map__num {
  margin: 0 0 20px;
  font-family: var(--cl-serif);
  font-size: 56px;
  line-height: 1;
}

.cl-cta-map__list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.cl-cta-map__list li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid #eeeeee;
  font-size: 13px;
  line-height: 1.7;
  color: #666666;
}

.cl-cta-map__list span {
  padding-top: 2px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

/* ---------- 08. Full page — LP centred, accents stay beside it ---------- */
.cl-full {
  display: grid;
  grid-template-columns: 1fr minmax(0, 440px) 1fr;
  gap: 0 clamp(32px, 5vw, 80px);
  align-items: start;
  padding: clamp(48px, 6vw, 96px) 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--cl-ivory) 12%, var(--cl-ivory) 88%, #ffffff 100%);
}

.cl-full__side {
  height: 100%;
}

.cl-full__sticky {
  position: sticky;
  top: calc(var(--header-height) + 40px);
}

.cl-full__side--l .cl-full__sticky {
  width: min(200px, 100%);
  margin-left: auto;
  margin-top: 18vh;
}

.cl-full__side--r .cl-full__sticky {
  width: min(260px, 100%);
  margin-top: 40vh;
}

.cl-full__page {
  margin: 0;
}

.cl-full__page img {
  width: 100%;
  height: auto;
  box-shadow: 0 40px 80px -50px rgba(80, 60, 30, 0.45);
}

.cl-full__zoom {
  margin: 0;
  overflow: hidden;
  background: #ffffff;
}

.cl-full__zoom img {
  width: 100%;
  height: auto;
}

.cl-full__zoom + .cs-caption {
  margin-bottom: 32px;
}

/* ---------- Cleansing responsive ---------- */
@media (max-width: 1024px) {
  .cl-hero {
    grid-template-columns: 1fr;
  }

  .cl-hero__text .case-hero__back {
    padding-bottom: 32px;
  }

  .cl-overview,
  .cl-fv,
  .cl-cv {
    grid-template-columns: 1fr;
  }

  .cl-fv__visual,
  .cl-cv__visual {
    max-width: 640px;
  }

  .cl-details {
    grid-template-columns: 34% 1fr;
    gap: 40px;
  }

  .cl-point,
  .cl-point--rev {
    grid-template-columns: 1fr;
  }

  .cl-full {
    grid-template-columns: 1fr minmax(0, 400px) 1fr;
    gap: 0 24px;
  }
}

@media (max-width: 600px) {
  .cl-hero__title {
    font-size: 40px;
  }

  .cl-hero__sub {
    margin-top: 28px;
  }

  .cl-stage {
    aspect-ratio: 4 / 4.6;
    margin: 0 calc(var(--gutter) * -1);
  }

  .cl-stage__main { width: 42%; left: 30%; top: 6%; }
  .cl-stage__sub { width: 32%; }
  .cl-stage__sub--l { left: 4%; top: 20%; }
  .cl-stage__sub--r { right: 4%; top: 14%; }
  .cl-stage__note { right: 16px; bottom: 10px; }

  .cl-phone { padding: 4px; border-radius: 18px; }
  .cl-phone__screen { border-radius: 14px; }

  .cl-info {
    gap: 24px 24px;
  }

  .cl-concept {
    margin: 0 calc(var(--gutter) * -1) 48px;
  }

  .cl-pillars {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 56px;
  }

  .cl-fv__visual {
    margin: 0 calc(var(--gutter) * -1);
    padding: 24px 30% 24px var(--gutter);
  }

  .cl-fv__phone {
    width: 24%;
    right: 3%;
    bottom: 24px;
  }

  .cl-fv__note {
    margin-top: 16px;
  }

  .cl-anatomy li,
  .cl-cta-map__list li {
    grid-template-columns: 80px 1fr;
  }

  /* journey becomes a vertical timeline — the thread runs down the left */
  .cl-journey {
    grid-template-columns: 1fr;
    row-gap: 64px;
    padding-left: 28px;
  }

  .cl-journey::before {
    top: 0;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .cl-journey__step:nth-child(n) {
    margin-top: 0;
  }

  .cl-journey__tag {
    margin-left: -28px;
    padding-left: 28px;
  }

  .cl-journey__img {
    width: 86%;
  }

  .cl-journey__end {
    margin-top: 40px;
    text-align: left;
  }

  .cl-details {
    grid-template-columns: 1fr;
  }

  .cl-details__full {
    width: 64%;
    margin: 0 auto;
    height: auto;
  }

  .cl-details__sticky {
    position: static;
  }

  .cl-point__img {
    margin: 0 calc(var(--gutter) * -1);
  }

  .cl-cv__visual {
    margin: 0 calc(var(--gutter) * -1);
    padding: 32px 32px 32px 40px;
  }

  .cl-cta-map {
    grid-template-columns: 56px 1fr;
    gap: 0 32px;
    align-items: start;
  }

  .cl-cta-map__lp {
    width: 56px;
  }

  .cl-cta-map__num {
    font-size: 44px;
  }

  /* LP takes most of the screen width; accents move under it as a pair */
  .cl-full {
    grid-template-columns: 1fr 1fr;
    gap: 40px 16px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 40px var(--gutter);
  }

  .cl-full__page {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 88%;
    margin: 0 auto;
  }

  .cl-full__side {
    height: auto;
  }

  .cl-full__side--l .cl-full__sticky,
  .cl-full__side--r .cl-full__sticky {
    position: static;
    width: 100%;
    margin: 0;
  }

  .cl-full__side--l .cl-full__sticky {
    width: 78%;
    margin: 0 auto;
  }

  .cl-full__side--r .cl-full__zoom:last-of-type,
  .cl-full__side--r .cs-caption:last-child {
    display: none;
  }
}

/* ==========================================================
   Sansan Osteopathic Clinic — website renewal case study
   White / pale gray base; the clinic's orange is used only as a
   small accent (numbers, pins, the AFTER label).
   ========================================================== */
.ss-case {
  --ss-orange: #ff7a1a;
  --ss-gray: #f5f5f3;
  --ss-line: #e4e4e1;
}

.ss-hero__title {
  font-size: clamp(44px, 6vw, 88px);
}

.ss-hero__tagline::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--ss-orange);
  vertical-align: 0.15em;
}

.ss-hero .cs-view-website {
  margin-top: 0;
}

.ss-hero__copy {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.9;
  letter-spacing: 0.06em;
}

.ss-devices {
  background: var(--ss-gray);
}

/* browser chrome — three quiet dots */
.ss-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  border-bottom: 1px solid #e2e3e0;
  background: #ffffff;
}

.ss-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dadad6;
}

.ss-browser {
  background: #ffffff;
  border: 1px solid #e2e3e0;
  box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.25);
}

.ss-browser img {
  width: 100%;
  height: auto;
  display: block;
}

.ss-browser__scroll {
  height: min(78vh, 760px);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Large statement copy that opens Challenge / Solution / Responsive */
.ss-statement {
  margin: 0 0 clamp(48px, 6vw, 88px);
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.ss-sp-br {
  display: none;
}

.ss-num {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ss-orange);
}

/* ---------- 03. Challenge ---------- */
.ss-challenge {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 48px clamp(48px, 7vw, 120px);
  align-items: start;
}

.ss-challenge__shot {
  margin: 0;
}

.ss-pins {
  position: relative;
}

.ss-pin {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--ss-orange);
  color: #ffffff;
  font-size: 10px;
  line-height: 30px;
  text-align: center;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 6px rgba(255, 122, 26, 0.18);
}

.ss-issues {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-issues li {
  padding: 24px 0 28px;
  border-top: 1px solid var(--color-border);
}

.ss-issues h3,
.ss-solution h3,
.ss-strategy__note h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* ---------- 04. Solution — three principles on one line ---------- */
.ss-solution {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px clamp(32px, 4vw, 64px);
  margin: 0 0 clamp(64px, 8vw, 112px);
  padding: 0;
  list-style: none;
}

.ss-solution li {
  padding-top: 28px;
  border-top: 1px solid var(--color-text);
}

.ss-solution__num {
  display: block;
  margin-bottom: 24px;
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 300;
  line-height: 1;
  color: var(--ss-orange);
}

.ss-flow {
  padding: clamp(32px, 4vw, 56px);
  background: var(--ss-gray);
}

.ss-flow__list {
  display: flex;
  align-items: stretch;
  margin: 8px 0 24px;
  padding: 0;
  list-style: none;
}

.ss-flow__list li {
  position: relative;
  flex: 1;
  padding: 18px 12px;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--ss-line);
}

.ss-flow__list li + li {
  margin-left: 28px;
}

.ss-flow__list li + li::before {
  content: "→";
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--color-muted);
}

.ss-flow__list span {
  display: block;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.ss-flow__list small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ss-flow__list .is-goal {
  border-color: var(--ss-orange);
  background: var(--ss-orange);
  color: #ffffff;
}

.ss-flow__list .is-goal small {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- 05. Before / After — the main comparison, full width ---------- */
.ss-lead-en {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.ss-ba {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  gap: 0 clamp(20px, 2.4vw, 40px);
  align-items: start;
  width: min(92vw, 1600px);
  margin-left: calc(50% - min(46vw, 800px));
}

.ss-ba__col {
  margin: 0;
  min-width: 0;
}

.ss-ba__label {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-muted);
}

.ss-ba__label--after {
  color: var(--ss-orange);
}

.ss-ba__frame {
  height: min(82vh, 900px);
}

.ss-ba__mid {
  align-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.ss-ba__mid li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.ss-ba__mid li + li {
  border-top: 1px solid var(--color-border);
}

.ss-ba__mid span {
  color: var(--color-muted);
}

.ss-ba__mid b {
  font-weight: 400;
  color: var(--color-muted);
}

.ss-ba__mid em {
  font-style: normal;
  color: var(--ss-orange);
}

.ss-ba__note {
  text-align: center;
  margin-top: 20px;
}

/* ---------- 06. Strategy — work large, note beside ---------- */
.ss-strategy {
  display: flex;
  flex-direction: column;
  gap: clamp(88px, 10vw, 150px);
}

.ss-strategy__row {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 32px clamp(40px, 5vw, 80px);
  align-items: end;
}

.ss-strategy__row--rev {
  grid-template-columns: 4fr 8fr;
}

.ss-strategy__row--rev .ss-strategy__img {
  order: 2;
}

.ss-strategy__img {
  position: relative;
  margin: 0;
}

.ss-strategy__img--pair {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
  align-items: start;
}

.ss-strategy__img--pair img {
  width: 100%;
  height: auto;
  border: 1px solid var(--ss-line);
}

.ss-strategy__img--pair img + img {
  margin-top: 56px;
}

.ss-strategy__phone {
  position: absolute;
  right: -2%;
  bottom: -18%;
  width: 22%;
}

/* ---------- Phone frame (flat) ---------- */
.ss-phone,
.ss-strategy__phone {
  padding: 5px;
  background: #ffffff;
  border: 1px solid #e2e3e0;
  border-radius: 22px;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.3);
}

.ss-phone img,
.ss-strategy__phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 17px;
}

/* ---------- 07. Visual System ---------- */
.ss-system {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.ss-tokens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px clamp(32px, 4vw, 64px);
}

.ss-type {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ss-type__jp {
  margin: 6px 0 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #666666;
}

.ss-radius {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-radius li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.ss-radius i {
  width: 64px;
  height: 40px;
  border: 1px solid var(--ss-orange);
  background: #fff8f2;
}

.ss-ui {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ss-ui__tile {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px 24px 28px;
  background: var(--ss-gray);
}

.ss-ui__tile--wide {
  grid-column: span 2;
}

.ss-ui__tile--full {
  grid-column: 1 / -1;
}

.ss-ui__tile img {
  width: 100%;
  height: auto;
  margin: auto 0;
}

.ss-ui__pair {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 24px;
  align-items: center;
  margin: auto 0;
}

.ss-ui__card {
  max-width: 260px;
  align-self: center;
}

/* card tile runs down beside Check Item / Accordion; step tile spans the row */
.ss-ui__tile--tall {
  grid-row: span 2;
}

.ss-ui__tile--full img {
  max-width: 820px;
  margin: auto;
}

/* ---------- 08. Responsive ---------- */
.ss-rwd {
  margin-bottom: clamp(72px, 8vw, 120px);
}

.ss-phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 240px));
  justify-content: center;
  gap: 40px clamp(32px, 6vw, 96px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-phones li:nth-child(2) {
  margin-top: 64px;
}

.ss-phones__title {
  margin: 24px 0 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
}

/* ---------- 09. Design Details — two columns, right one dropped ---------- */
.ss-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(56px, 6vw, 96px) clamp(32px, 4vw, 64px);
}

.ss-detail {
  margin: 0;
}

.ss-detail:nth-child(even) {
  margin-top: clamp(80px, 10vw, 160px);
}

.ss-detail img {
  width: 100%;
  height: auto;
  border: 1px solid var(--ss-line);
}

.ss-detail figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  font-size: 15px;
  letter-spacing: 0.14em;
}

.ss-detail figcaption span {
  font-size: 11px;
  color: var(--ss-orange);
}

.ss-detail figcaption small {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* ---------- 10. Full page — PC page centred, accents stay beside it ---------- */
.ss-full {
  display: grid;
  grid-template-columns: 1fr minmax(0, 640px) 1fr;
  gap: 0 clamp(32px, 5vw, 80px);
  align-items: start;
  padding: clamp(48px, 6vw, 96px) 0;
  background: var(--ss-gray);
}

.ss-full__side {
  height: 100%;
}

.ss-full__sticky {
  position: sticky;
  top: calc(var(--header-height) + 40px);
}

/* both sides start level with the page top and stay level while scrolling */
.ss-full__side--l .ss-full__sticky {
  width: min(210px, 100%);
  margin-left: auto;
}

.ss-full__side--r .ss-full__sticky {
  width: min(260px, 100%);
}

.ss-full__page {
  margin: 0;
}

.ss-full__page .ss-browser {
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.35);
}

.ss-full__zoom {
  margin: 0;
  background: #ffffff;
  border: 1px solid var(--ss-line);
}

.ss-full__zoom img {
  width: 100%;
  height: auto;
}

.ss-full__zoom + .cs-caption {
  margin-bottom: 32px;
}

/* ---------- Sansan responsive ---------- */
@media (max-width: 1024px) {
  .ss-challenge {
    grid-template-columns: 1fr;
  }

  .ss-challenge__shot {
    max-width: 560px;
  }

  .ss-ba {
    grid-template-columns: 1fr 120px 1fr;
  }

  .ss-strategy__row,
  .ss-strategy__row--rev {
    grid-template-columns: 1fr;
  }

  .ss-strategy__row--rev .ss-strategy__img {
    order: 0;
  }

  .ss-strategy__note {
    max-width: 520px;
  }

  .ss-strategy__row--rev .ss-strategy__img {
    margin-bottom: 40px;
  }

  .ss-ui {
    grid-template-columns: 1fr 1fr;
  }

  .ss-full {
    grid-template-columns: 1fr minmax(0, 480px) 1fr;
    gap: 0 24px;
  }

  .ss-full__side--r .ss-full__sticky {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .ss-hero__title {
    font-size: 40px;
  }

  .ss-statement {
    font-size: 24px;
  }

  .ss-sp-br {
    display: inline;
  }

  .ss-browser__scroll {
    height: 70vh;
  }

  .ss-solution {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ss-solution__num {
    margin-bottom: 16px;
  }

  /* flow turns vertical */
  .ss-flow {
    margin: 0 calc(var(--gutter) * -1);
    padding: 32px var(--gutter);
  }

  .ss-flow__list {
    flex-direction: column;
  }

  .ss-flow__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 18px;
    text-align: left;
  }

  .ss-flow__list li + li {
    margin: 22px 0 0;
  }

  .ss-flow__list li + li::before {
    content: "↓";
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
  }

  /* Before / After — stacked, each at full width so neither gets thin */
  .ss-ba {
    grid-template-columns: 1fr;
    width: auto;
    margin-left: 0;
    row-gap: 32px;
  }

  .ss-ba__frame {
    height: 64vh;
  }

  .ss-ba__mid {
    order: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .ss-ba__mid li {
    padding: 8px 0;
    font-size: 9px;
  }

  .ss-ba__mid li + li {
    border-top: none;
    border-left: 1px solid var(--color-border);
  }

  .ss-strategy__img--pair {
    grid-template-columns: 1fr;
  }

  .ss-strategy__img--pair img + img {
    width: 80%;
    margin: 0 0 0 auto;
  }

  .ss-strategy__phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: 42%;
    margin: -24px 12px 0 auto;
  }

  .ss-tokens {
    grid-template-columns: 1fr;
  }

  .ss-radius {
    gap: 14px;
  }

  .ss-radius i {
    width: 52px;
  }

  .ss-ui {
    grid-template-columns: 1fr;
  }

  .ss-ui__tile--wide,
  .ss-ui__tile--tall {
    grid-column: auto;
    grid-row: auto;
  }

  .ss-phones {
    grid-template-columns: 1fr 1fr;
    gap: 40px 16px;
  }

  .ss-phones li:nth-child(2) {
    margin-top: 40px;
  }

  .ss-phones li:nth-child(3) {
    grid-column: 1 / -1;
    width: 50%;
    margin: 0 auto;
  }

  .ss-details {
    grid-template-columns: 1fr;
  }

  .ss-detail:nth-child(even) {
    margin-top: 0;
    width: 88%;
    margin-left: auto;
  }

  .ss-detail {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }

  .ss-detail figcaption {
    padding: 0 var(--gutter);
  }

  .ss-detail:nth-child(even) {
    margin-right: calc(var(--gutter) * -1);
  }

  /* full page at ~90% width; accents move underneath as a pair */
  .ss-full {
    grid-template-columns: 1fr 1fr;
    gap: 40px 16px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 40px var(--gutter);
  }

  .ss-full__page {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .ss-full__side {
    height: auto;
  }

  .ss-full__side--l .ss-full__sticky,
  .ss-full__side--r .ss-full__sticky {
    position: static;
    width: 100%;
    margin: 0;
  }

  .ss-full__side--l .ss-full__sticky {
    width: 80%;
    margin: 0 auto;
  }
}

/* ==========================================================
   Original Champagne — label collection (editorial gallery)
   Neutral frame only: off-white / light gray / dark text.
   The works carry all the colour.
   ========================================================== */
.cg-case {
  --cg-off: #f5f4f1;
  --cg-gray: #ecebe8;
  --cg-serif: "Didot", "Bodoni 72", "Times New Roman", serif;
}

.cg-num {
  display: inline-block;
  margin-right: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

/* slow text reveal — rides on the shared .fade-up observer */
.cg-reveal {
  clip-path: inset(0 0 100% 0);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cg-reveal.is-visible {
  clip-path: inset(0 0 -10% 0);
}

/* ---------- 01. Hero ---------- */
.cg-hero__title {
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 1.02;
}

.cg-hero__title span {
  display: block;
  margin-top: 8px;
  font-family: var(--cg-serif);
  font-style: italic;
  font-size: 0.62em;
  color: var(--color-muted);
}

.cg-hero__jp {
  margin: 0 0 16px;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.9;
  letter-spacing: 0.08em;
}

.cg-hero__en {
  margin: 0;
  font-family: var(--cg-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-muted);
}

/* Editorial collage — prints at different sizes / depths, never a grid */
.cg-collage {
  position: relative;
  width: min(92vw, 1600px);
  margin: 56px 0 var(--cs-section-gap) calc(50% - min(46vw, 800px));
  aspect-ratio: 16 / 8.6;
  background: var(--cg-off);
  overflow: hidden;
}

.cg-collage__item {
  position: absolute;
  margin: 0;
}

.cg-collage__item img {
  width: 100%;
  height: auto;
}

/* front */
.cg-collage__item--a {
  width: 34%;
  left: 13%;
  top: 11%;
  z-index: 4;
  rotate: -3deg;
  box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.45);
}

.cg-collage__item--c {
  width: 29%;
  left: 54%;
  top: 22%;
  z-index: 3;
  rotate: 2.5deg;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.4);
}

/* set back — smaller, softer shadow */
.cg-collage__item--b {
  width: 19%;
  left: 40%;
  top: 6%;
  z-index: 1;
  rotate: 4deg;
  box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.3);
}

.cg-collage__item--d {
  width: 18%;
  left: 78%;
  top: 5%;
  z-index: 2;
  rotate: -5deg;
  box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.3);
}

/* tilt uses the independent `rotate` property so the shared fade-up transform keeps working */

/* ---------- 03. Approach ---------- */
.cg-statement {
  margin-bottom: clamp(56px, 7vw, 104px);
}

.cg-statement__en {
  margin: 0;
  font-family: var(--cg-serif);
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.cg-statement__jp {
  margin: 24px 0 0;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #666666;
}

.cg-approach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px clamp(32px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cg-approach li {
  padding-top: 18px;
  border-top: 1px solid var(--color-text);
}

.cg-approach .cg-num {
  display: block;
  margin-bottom: 28px;
}

.cg-approach h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.16em;
}

/* ---------- 04. Label Collection — each work set differently ---------- */
.cg-lead-en {
  font-family: var(--cg-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

.cg-collection {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: clamp(112px, 13vw, 200px);
  column-gap: 24px;
}

.cg-work {
  margin: 0;
  display: grid;
  gap: 18px;
}

.cg-work__img {
  overflow: hidden;
}

.cg-work__img img {
  width: 100%;
  height: auto;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .cg-work:hover .cg-work__img img,
  .cg-artwork figure:hover img,
  .cg-detail:hover .cg-detail__img img {
    transform: scale(1.025);
  }
}

.cg-work__cap {
  font-size: 12px;
  letter-spacing: 0.18em;
}

/* 01 — large, left, caption tucked at right */
.cg-work--01 {
  grid-column: 1 / span 8;
}

.cg-work--01 .cg-work__cap {
  justify-self: end;
}

/* 02 — mirrored, smaller, caption up top-left */
.cg-work--02 {
  grid-column: 6 / span 7;
}

.cg-work--02 .cg-work__img { order: 2; }

/* 03 — wide, the whole row */
.cg-work--03 {
  grid-column: 1 / -1;
}

.cg-work--03 .cg-work__cap {
  justify-self: end;
}

/* 04 — lighter: small piece inside a broad off-white field */
.cg-work--04 {
  grid-column: 1 / -1;
  padding: clamp(56px, 8vw, 128px) 0;
  background: var(--cg-off);
  justify-items: center;
}

.cg-work--04 .cg-work__img {
  width: min(40%, 560px);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.35);
}

.cg-work--04 .cg-work__cap {
  width: min(40%, 560px);
}

/* ---------- 05. Design Range — same medium, four expressions ---------- */
.cg-range__title {
  margin-bottom: clamp(56px, 6vw, 88px);
}

.cg-range {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cg-range li {
  padding-top: 14px;
  border-top: 1px solid var(--color-text);
}

.cg-range__label {
  margin: 0 0 20px;
  font-size: 14px;
  letter-spacing: 0.24em;
}

.cg-range img {
  width: 100%;
  height: auto;
}

.cg-range__note {
  margin-top: 24px;
}

/* ---------- 06. Label Artwork — big crop + small piece ---------- */
.cg-artwork {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 400px);
  justify-content: space-between;
  gap: 32px clamp(40px, 6vw, 104px);
  align-items: end;
}

.cg-artwork figure {
  margin: 0;
  display: grid;
  gap: 18px;
}

.cg-artwork__crop {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* enlarge the floral graphic so the brush texture reads */
.cg-artwork__crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 45%;
  transform: scale(1.1);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .cg-artwork__main:hover .cg-artwork__crop img {
    transform: scale(1.14);
  }
}

.cg-artwork__sub {
  margin-bottom: clamp(-120px, -8vw, -48px) !important;
}

.cg-artwork__sub img {
  width: 100%;
  height: auto;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 07. Design Details — enlarged crops ---------- */
.cg-details {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(64px, 7vw, 104px) 24px;
}

.cg-detail {
  margin: 0;
}

.cg-detail__img {
  overflow: hidden;
  background: var(--cg-gray);
}

.cg-detail__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.cg-detail--typo { grid-column: 1 / span 6; }
.cg-detail--typo .cg-detail__img { aspect-ratio: 49 / 34; }

.cg-detail--orn { grid-column: 8 / span 4; margin-top: clamp(64px, 9vw, 140px); }
.cg-detail--orn .cg-detail__img { aspect-ratio: 4 / 5; }
.cg-detail--orn .cg-detail__img img { object-position: 30% 50%; }

.cg-detail--photo { grid-column: 2 / span 4; }
.cg-detail--photo .cg-detail__img { aspect-ratio: 44 / 54; }

.cg-detail--color { grid-column: 7 / span 5; margin-top: clamp(48px, 6vw, 96px); }
.cg-detail--color .cg-detail__img { aspect-ratio: 1; }

.cg-detail figcaption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-muted);
}

.cg-detail figcaption span {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-text);
}

/* ---------- 08. Selected Works — slow horizontal gallery ---------- */
.cg-marquee {
  width: min(100vw, 100vw);
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.cg-marquee__track {
  display: flex;
  gap: 20px;
  width: max-content;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  animation: cg-marquee 60s linear infinite;
}

.cg-marquee:hover .cg-marquee__track {
  animation-play-state: paused;
}

.cg-marquee__track li {
  position: relative;
  width: clamp(200px, 20vw, 300px);
  flex: none;
}

.cg-marquee__track img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.cg-marquee__track span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-text);
  background: linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cg-marquee__track b {
  font-weight: 400;
  color: var(--color-muted);
}

.cg-marquee__track li:hover span {
  opacity: 1;
}

@keyframes cg-marquee {
  to { transform: translateX(calc(-50% - 10px)); }
}

/* ---------- Champagne responsive ---------- */
@media (max-width: 1024px) {
  .cg-collage {
    aspect-ratio: 4 / 3;
  }

  .cg-collage__item--a { width: 44%; left: 6%; top: 12%; }
  .cg-collage__item--c { width: 38%; left: 54%; top: 28%; }
  .cg-collage__item--b { width: 26%; left: 38%; top: 4%; }
  .cg-collage__item--d { width: 22%; left: 74%; top: 4%; }

  .cg-work--01 { grid-column: 1 / span 10; }
  .cg-work--02 { grid-column: 4 / span 9; }
  .cg-work--04 .cg-work__img,
  .cg-work--04 .cg-work__cap { width: 56%; }

  .cg-range {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}

@media (max-width: 600px) {
  .cg-hero__title {
    font-size: 38px;
  }

  .cg-collage {
    width: auto;
    margin: 32px calc(var(--gutter) * -1) var(--cs-section-gap);
    aspect-ratio: 1 / 1.15;
  }

  .cg-collage__item--a { width: 62%; left: 4%; top: 30%; }
  .cg-collage__item--c { width: 52%; left: 44%; top: 50%; }
  .cg-collage__item--b { width: 40%; left: 10%; top: 4%; }
  .cg-collage__item--d { width: 38%; left: 54%; top: 8%; }

  .cg-statement__en {
    font-size: 40px;
  }

  .cg-approach {
    grid-template-columns: 1fr;
  }

  .cg-approach .cg-num {
    margin-bottom: 14px;
  }

  /* one work at a time, full width: image → number → category */
  .cg-collection {
    grid-template-columns: 1fr;
    row-gap: 80px;
  }

  .cg-work--01,
  .cg-work--02,
  .cg-work--03,
  .cg-work--04 {
    grid-column: 1;
    margin: 0 calc(var(--gutter) * -1);
  }

  .cg-work .cg-work__cap {
    justify-self: start;
    padding: 0 var(--gutter);
  }

  .cg-work--02 .cg-work__img { order: 0; }

  .cg-work--04 {
    padding: 40px 0;
    justify-items: stretch;
  }

  .cg-work--04 .cg-work__img {
    width: auto;
    margin: 0 var(--gutter);
  }

  .cg-work--04 .cg-work__cap {
    width: auto;
  }

  /* range — swipe sideways */
  .cg-range {
    display: flex;
    gap: 16px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .cg-range li {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .cg-artwork {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .cg-artwork__main {
    margin: 0 calc(var(--gutter) * -1) !important;
  }

  .cg-artwork__main .cg-work__cap {
    padding: 0 var(--gutter);
  }

  .cg-artwork__crop {
    aspect-ratio: 1;
  }

  .cg-artwork__sub {
    width: 78%;
    margin: 0 0 0 auto !important;
  }

  .cg-details {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .cg-detail--typo,
  .cg-detail--orn,
  .cg-detail--photo,
  .cg-detail--color {
    grid-column: 1;
    margin-top: 0;
  }

  .cg-detail--typo,
  .cg-detail--color {
    margin: 0 calc(var(--gutter) * -1);
  }

  .cg-detail--typo figcaption,
  .cg-detail--color figcaption {
    padding: 0 var(--gutter);
  }

  .cg-detail--orn,
  .cg-detail--photo {
    width: 82%;
  }

  .cg-detail--orn {
    margin-left: auto;
  }

  .cg-marquee__track li {
    width: 58vw;
  }

  .cg-marquee__track span {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-reveal {
    clip-path: none;
  }

  .cg-marquee {
    overflow-x: auto;
  }

  .cg-marquee__track {
    animation: none;
  }
}

/* ==========================================================
   Entertainment Graphics — multi-media graphic case study
   Minimal white frame; the works carry every colour.
   Images keep their own ratio (width:100%, height:auto).
   ========================================================== */
.eg-case {
  --cs-section-gap: clamp(120px, 13vw, 200px);
}

.eg-fig {
  margin: 0;
  min-width: 0;
}

.eg-fig img,
.eg-g img,
.eg-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.eg-cap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.eg-cap span {
  color: var(--color-text);
}

/* Section heading — large English title, small subtitle */
.eg-head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: baseline;
  gap: 0 24px;
  padding-top: 20px;
  margin-bottom: clamp(40px, 4.5vw, 64px);
  border-top: 1px solid var(--color-text);
}

.eg-head__title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.eg-head__sub {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

/* ---------- 01. Hero ---------- */
.eg-hero {
  width: min(88vw, 1500px);
  margin: 48px 0 var(--cs-section-gap) calc(50% - min(44vw, 750px));
}

/* ---------- 03. Champagne — 75% / pair (big + small) / 75% right ---------- */
.eg-champ {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 7vw, 112px);
}

.eg-champ__lead {
  width: 58%;
}

.eg-champ__pair {
  display: grid;
  grid-template-columns: 5fr 3.4fr;
  width: 88%;
  margin-left: auto;
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
}

.eg-champ__end {
  width: 52%;
  margin-left: auto;
}

/* ---------- 05. Event — portrait poster left, landscape stack right ---------- */
.eg-event {
  display: grid;
  grid-template-columns: 5fr 6.4fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.eg-event {
  align-items: center;
}

.eg-event__side {
  display: flex;
  flex-direction: column;
}

/* ---------- 06. Kurage — lead + three menus at stepped sizes ---------- */
.eg-kurage__lead {
  width: 82%;
  margin: 0 auto clamp(72px, 8vw, 128px);
}

.eg-kurage {
  display: grid;
  grid-template-columns: 5fr 4fr 3.2fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.eg-kurage > :nth-child(2) { margin-top: clamp(64px, 8vw, 128px); }
.eg-kurage > :nth-child(3) { margin-top: clamp(24px, 3vw, 48px); }

/* ---------- 07. Menu — two concepts side by side ---------- */
/* single menu shown large; capped at the file's native width (620px) */
.eg-menu {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 280px);
  justify-content: center;
  gap: 32px clamp(40px, 5vw, 80px);
  align-items: end;
}

.eg-menu__cap {
  margin-top: 18px;
  font-size: 13px;
  color: #666666;
}

.eg-menu__cap b {
  display: block;
  margin-bottom: 4px;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-text);
}

/* ---------- 08. Promotional tools — mockup 60 / details 40 ---------- */
.eg-promo {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.eg-promo__details {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.eg-promo__details .eg-fig:last-child {
  width: 86%;
  margin-left: auto;
}

/* ---------- 03. Champagne promotion — flyer 58% / text 32% ---------- */
.eg-flyer {
  display: grid;
  grid-template-columns: 54fr 32fr;
  gap: 48px clamp(48px, 8vw, 140px);
  align-items: end;
  width: min(92vw, 1600px);
  margin-left: calc(50% - min(46vw, 800px));
  padding: clamp(64px, 7vw, 112px) clamp(32px, 7vw, 120px);
  background: #f5f5f3;
}

.eg-flyer__img {
  max-width: 680px;
}

/* ---------- 07. Shop graphic — the closing visual ---------- */
.eg-shop {
  width: min(92vw, 1600px);
  margin-left: calc(50% - min(46vw, 800px));
}

.eg-shop-section {
  margin-bottom: clamp(160px, 16vw, 240px);
}

.eg-flyer__title {
  margin: 0 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-text);
  font-size: 13px;
  letter-spacing: 0.2em;
}

/* ---------- Entertainment responsive ---------- */
@media (max-width: 1024px) {
  .eg-kurage {
    grid-template-columns: 1fr 1fr;
  }

  .eg-kurage > :nth-child(3) {
    grid-column: 1 / -1;
    width: 50%;
    margin: 0 auto;
  }

  .eg-promo {
    grid-template-columns: 1fr;
  }

  .eg-promo__details {
    flex-direction: row;
  }

  .eg-promo__details .eg-fig:last-child {
    width: auto;
    margin: 40px 0 0;
  }

}

@media (max-width: 600px) {
  .eg-case {
    --cs-section-gap: 96px;
  }

  .eg-head {
    grid-template-columns: 32px 1fr;
  }

  .eg-head__title {
    font-size: 26px;
  }

  .eg-head__sub {
    grid-column: 2;
    margin-top: 8px;
  }

  .eg-hero {
    width: auto;
    margin: 32px calc(var(--gutter) * -1) var(--cs-section-gap);
  }

  /* champagne: big → small → big, never all identical */
  .eg-champ__lead,
  .eg-champ__end {
    width: auto;
    margin: 0 calc(var(--gutter) * -1);
  }

  .eg-champ__lead .eg-cap,
  .eg-champ__end .eg-cap {
    padding: 0 var(--gutter);
  }

  .eg-champ__pair {
    grid-template-columns: 1fr;
    width: auto;
    gap: 56px;
  }

  .eg-champ__pair > :last-child {
    width: 78%;
    margin-left: auto;
  }

  .eg-event {
    grid-template-columns: 1fr;
  }

  .eg-event__poster {
    width: 78%;
  }

  .eg-event__side {
    padding-top: 0;
  }

  .eg-kurage__lead {
    width: auto;
    margin: 0 calc(var(--gutter) * -1) 64px;
  }

  .eg-kurage__lead .eg-cap {
    padding: 0 var(--gutter);
  }

  /* tall menus: capped width so they don't run screens long */
  .eg-kurage {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .eg-kurage > :nth-child(n) {
    grid-column: 1;
    margin-top: 0;
    width: 82%;
  }

  .eg-kurage > :nth-child(2) {
    margin-left: auto;
  }

  .eg-menu {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .eg-promo__main {
    margin: 0 calc(var(--gutter) * -1);
  }

  .eg-promo__main .eg-cap {
    padding: 0 var(--gutter);
  }

  .eg-promo__details {
    flex-direction: column;
  }

  .eg-promo__details .eg-fig:last-child {
    width: 86%;
    margin: 0 0 0 auto;
  }

  .eg-flyer {
    grid-template-columns: 1fr;
    width: auto;
    margin: 0 calc(var(--gutter) * -1);
    padding: 40px var(--gutter);
  }

  .eg-flyer__img {
    width: 88%;
    margin: 0 auto;
  }

  .eg-shop {
    width: auto;
    margin: 0 calc(var(--gutter) * -1);
  }

  .eg-shop .eg-cap {
    padding: 0 var(--gutter);
  }
}

/* ==========================================================
   GRIT+ — first view case study (reuses the .eg-* system)
   ========================================================== */
.gr-concept {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 32px clamp(48px, 7vw, 120px);
  align-items: end;
  margin-bottom: clamp(64px, 7vw, 104px);
}

.gr-concept__copy {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.8;
  letter-spacing: 0.06em;
}

/* editorial pair — tall training left, landscape ideal right and lower */
.gr-duo {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.gr-duo__a { margin-top: 0; }
.gr-duo__b { margin-bottom: clamp(40px, 8vw, 140px); }

.gr-label {
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-muted);
}

.gr-label b {
  display: block;
  margin-bottom: 4px;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--color-text);
}

/* ---------- Visual making ---------- */
.gr-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 clamp(48px, 5vw, 72px);
  padding: 0;
  list-style: none;
}

.gr-steps li {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.gr-steps li + li {
  padding-left: 20px;
}

.gr-steps span {
  margin-right: 10px;
  color: var(--color-muted);
}

.gr-making {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 6vw, 96px);
}

.gr-making__row {
  display: grid;
  grid-template-columns: 6fr auto 4fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}

.gr-arrow {
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--color-muted);
}

.gr-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-process li {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  line-height: 1.8;
  color: #666666;
}

.gr-process b {
  display: block;
  margin-bottom: 6px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--color-text);
}

.gr-making__final {
  width: 72%;
  margin-left: auto;
}

/* ---------- First view — annotated ---------- */
.gr-fv__img {
  position: relative;
}

.gr-pin {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  font-size: 10px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85);
}

.gr-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px clamp(32px, 4vw, 64px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.gr-points li {
  padding-top: 16px;
  border-top: 1px solid var(--color-text);
}

.gr-points__head {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.2em;
}

.gr-points__head span {
  margin-right: 12px;
  font-size: 11px;
  color: var(--color-muted);
}

/* ---------- Responsive — PC 70 / SP 30 ---------- */
.gr-rwd {
  display: grid;
  grid-template-columns: 70fr 22fr;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.gr-rwd__note {
  display: grid;
  grid-template-columns: auto minmax(0, 520px);
  gap: 24px clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(48px, 5vw, 72px);
}

.gr-order {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.gr-order li + li::before {
  content: "→";
  margin-right: 8px;
  color: var(--color-muted);
}

.gr-order span {
  margin-right: 6px;
  color: var(--color-muted);
}

@media (max-width: 1024px) {
  .gr-concept,
  .gr-rwd__note {
    grid-template-columns: 1fr;
  }

  .gr-process {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .gr-duo {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .gr-duo__a {
    width: 72%;
  }

  .gr-duo__b {
    margin: 0 calc(var(--gutter) * -1);
  }

  .gr-duo__b .gr-label {
    padding: 0 var(--gutter);
  }

  .gr-steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .gr-steps li + li {
    padding-left: 0;
  }

  .gr-making__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .gr-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .gr-making__after {
    width: 72%;
    margin-left: auto;
  }

  .gr-process {
    grid-template-columns: 1fr;
  }

  .gr-making__final {
    width: auto;
    margin: 0 calc(var(--gutter) * -1);
  }

  .gr-making__final .eg-cap {
    padding: 0 var(--gutter);
  }

  .gr-fv {
    margin: 0 calc(var(--gutter) * -1);
  }

  .gr-pin {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    line-height: 22px;
    font-size: 9px;
  }

  .gr-points {
    grid-template-columns: 1fr;
  }

  .gr-rwd {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .gr-rwd__sp {
    width: 64%;
    margin: 0 auto;
  }

  .gr-order {
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------
   About page
   Hero: photo left, profile right. Career reuses the case-study
   frame (.eg-head / .cs-overview-split).
--------------------------------------------------------- */
.site-nav__list a[aria-current="page"] {
  color: var(--color-muted);
}

.ab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px clamp(40px, 5vw, 80px);
  align-items: center;
  margin-bottom: var(--cs-section-gap);
}

.ab-hero__photo {
  margin: 0;
}

.ab-hero__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4.1;
  object-fit: cover;
  object-position: 50% 30%;
}

.ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 0 36px;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.ab-eyebrow::after {
  content: "";
  width: 60px;
  height: 1px;
  background: currentColor;
}

.ab-hero__name {
  margin: 0;
  font-size: clamp(40px, 4.6vw, 80px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
  white-space: nowrap;
}

.ab-hero__role {
  margin: 20px 0 0;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.ab-hero__catch {
  margin: clamp(40px, 4vw, 64px) 0 0;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.12em;
}

.ab-hero__text {
  margin-top: clamp(24px, 2.6vw, 40px);
}

.ab-hero__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.06em;
}

.ab-hero__text p + p {
  margin-top: 1.9em;
}

/* ---------- Skills — three columns split by hairlines ---------- */
.ab-skills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  margin-top: clamp(40px, 4vw, 64px);
}

.ab-skills__col {
  padding: 0 clamp(20px, 2.4vw, 40px);
  border-left: 1px solid var(--color-border);
}

.ab-skills__col:first-child {
  padding-left: 0;
  border-left: none;
}

.ab-skills__col:last-child {
  padding-right: 0;
}

.ab-skills__title {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ab-skills__title::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin-top: 16px;
  background: currentColor;
}

.ab-skills li {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.03em;
}

/* ---------- Career ---------- */
.ab-facts {
  margin: 0;
}

.ab-facts > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.ab-facts > div:first-child {
  border-top: 1px solid var(--color-border);
}

.ab-facts dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ab-facts dd {
  margin: 0;
  font-size: 14px;
}

.ab-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-timeline > li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.ab-timeline > li:first-child {
  border-top: 1px solid var(--color-border);
}

.ab-timeline__year {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.ab-timeline__role {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.ab-timeline__org {
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.ab-timeline__points {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ab-timeline__points li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.85;
  color: #666666;
}

.ab-timeline__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 6px;
  height: 1px;
  background: currentColor;
}

/* ---------- Strengths ---------- */
.ab-strengths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-strengths > li {
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.ab-strengths__num {
  margin: 0 0 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.ab-strengths__title {
  margin: 0 0 16px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

/* ---------- Closing contact (About + top page) ---------- */
.ab-contact {
  padding: clamp(72px, 9vw, 140px) 0 24px;
  border-top: 1px solid var(--color-text);
  text-align: center;
}

.ab-contact__title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 80px);
  font-weight: 300;
  line-height: 1.1;
}

.ab-contact__lead {
  margin: 24px 0 40px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: #666666;
}

.ab-contact__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 56px;
  border: 1px solid var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 14px;
  letter-spacing: 0.2em;
  transition: background 0.3s ease, color 0.3s ease;
}

.ab-contact__btn:hover {
  background: transparent;
  color: var(--color-text);
}

.ab-contact__btn:hover .cs-view-website__arrow {
  transform: translateX(4px);
}

@media (max-width: 1280px) {
  .ab-hero {
    grid-template-columns: 1fr;
  }

  .ab-hero__photo {
    max-width: 520px;
  }
}

@media (max-width: 1024px) {
  .ab-strengths {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .ab-hero__name {
    white-space: normal;
  }

  .ab-hero__text br {
    display: none;
  }

  .ab-skills {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ab-skills__col,
  .ab-skills__col:first-child {
    padding: 0;
    border-left: none;
  }

  .ab-timeline > li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---------------------------------------------------------
   Contact page — single centred form
--------------------------------------------------------- */
.ct-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 64px) 0 clamp(40px, 6vw, 96px);
}

.ct-title {
  margin: 0;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.1;
}

.ct-lead {
  margin: 20px 0 clamp(40px, 5vw, 64px);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #666666;
}

.ct-field {
  margin: 0 0 32px;
}

.ct-field label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.ct-optional {
  margin-left: 10px;
  font-size: 11px;
  color: var(--color-muted);
}

.ct-field input,
.ct-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  transition: border-color 0.3s ease;
}

.ct-field textarea {
  resize: vertical;
}

.ct-field input:focus,
.ct-field textarea:focus {
  outline: none;
  border-color: var(--color-text);
}

.ct-honeypot {
  position: absolute;
  left: -9999px;
}

.ct-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  padding: 18px 48px;
  border: 1px solid var(--color-text);
  border-radius: 0;
  background: var(--color-text);
  color: var(--color-bg);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.ct-submit:hover {
  background: transparent;
  color: var(--color-text);
}

.ct-submit:hover .cs-view-website__arrow {
  transform: translateX(4px);
}

.ct-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.ct-status {
  min-height: 1.8em;
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
  color: var(--color-muted);
}

.ct-status[data-state="success"] {
  color: var(--color-text);
}

.ct-status[data-state="error"] {
  color: #b3261e;
}

@media (max-width: 600px) {
  .ct-lead br {
    display: none;
  }
}