/* ==============================
   CLUTCH JEWELRY LP
   ============================== */

:root {
  --cj-bg: #f8f7f4;
  --cj-white: #fff;
  --cj-ink: #171819;
  --cj-muted: #6e6b66;
  --cj-line: #ddd8cf;
  --cj-accent: #c7b18e;
  --cj-dark: #11151a;
  --cj-max: 1180px;
  --cj-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --cj-sans: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.cj-body {
  margin: 0;
  color: var(--cj-ink);
  background: var(--cj-bg);
  font-family: var(--cj-sans);
  -webkit-font-smoothing: antialiased;
}

body.cj-menu-open { overflow: hidden; }

.cj-page { overflow: clip; background: var(--cj-bg); }

.cj-container {
  width: min(var(--cj-max), calc(100% - 64px));
  margin: 0 auto;
}

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

.cj-page a { color: inherit; text-decoration: none; }

.cj-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  height: 84px;
  display: flex;
  align-items: center;
  padding: 0 max(32px, calc((100vw - var(--cj-max))/2));
  color: #fff;
  transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}

.cj-header.is-scrolled {
  position: fixed;
  background: rgba(250,249,247,.94);
  color: var(--cj-ink);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.cj-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.cj-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 12px;
  letter-spacing: .08em;
}

.cj-nav a { opacity: .88; transition: opacity .2s ease; }
.cj-nav a:hover { opacity: 1; }

.cj-nav-cta {
  border: 1px solid currentColor;
  padding: 12px 20px;
}

.cj-menu-button {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: currentColor;
}

.cj-menu-button span:not(.screen-reader-text) {
  display: block;
  width: 24px;
  height: 1px;
  margin: 6px auto;
  background: currentColor;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* HERO */
.cj-hero {
  position: relative;
  min-height: 720px;
  color: #fff;
  background: #0d1013;
  isolation: isolate;
}

.cj-hero-media {
  position: absolute;
  inset: 0 0 0 34%;
  overflow: hidden;
  z-index: -3;
}

.cj-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%) contrast(1.05);
}

.cj-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(9,12,15,.98) 0%, rgba(9,12,15,.93) 29%, rgba(9,12,15,.48) 58%, rgba(9,12,15,.10) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.32));
}

.cj-hero-inner {
  min-height: 720px;
  display: flex;
  align-items: center;
}

.cj-hero-copy { width: min(630px, 56%); padding-top: 55px; }

.cj-kicker,
.cj-eyebrow {
  margin: 0 0 22px;
  color: var(--cj-accent);
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: .32em;
}

.cj-hero h1,
.cj-section h2,
.cj-contact h2 {
  font-family: var(--cj-serif);
  font-weight: 500;
  letter-spacing: .035em;
}

.cj-hero h1 {
  margin: 0;
  font-size: clamp(43px, 5vw, 72px);
  line-height: 1.35;
}

.cj-hero-lead {
  margin: 44px 0 0;
  font-family: var(--cj-serif);
  font-size: 21px;
  line-height: 1.9;
}

.cj-hero-sub {
  margin: 18px 0 0;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  line-height: 2;
}

/* GENERAL SECTIONS */
.cj-section { padding: 128px 0; }

.cj-section:nth-of-type(even) { background: #fbfaf8; }

.cj-section-head { margin-bottom: 64px; }
.cj-section-head--center { text-align: center; }

.cj-section-head .cj-eyebrow {
  color: #8c8377;
  margin-bottom: 18px;
}

.cj-section-head h2 {
  margin: 0;
  font-size: clamp(31px, 3.4vw, 48px);
  line-height: 1.45;
}

.cj-section-head > p:not(.cj-eyebrow) {
  margin: 22px auto 0;
  max-width: 820px;
  color: var(--cj-muted);
  font-size: 14px;
  line-height: 2;
}

.cj-section-subtitle {
  color: var(--cj-ink) !important;
  font-family: var(--cj-serif);
  font-size: 22px !important;
}

/* VALUE */
.cj-value-grid,
.cj-proposal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cj-value-item,
.cj-proposal-grid article {
  position: relative;
  min-width: 0;
  padding: 0 48px;
  border-left: 1px solid var(--cj-line);
}

.cj-value-item:first-child,
.cj-proposal-grid article:first-child {
  border-left: 0;
  padding-left: 0;
}

.cj-value-item:last-child,
.cj-proposal-grid article:last-child { padding-right: 0; }

.cj-number {
  margin: 0 0 20px;
  color: var(--cj-accent);
  font: italic 36px/1 Georgia, serif;
}

.cj-value-item h3,
.cj-proposal-grid h3 {
  margin: 0 0 22px;
  font-family: var(--cj-serif);
  font-size: 24px;
  line-height: 1.55;
  font-weight: 500;
}

.cj-value-item > p:last-child,
.cj-proposal-grid article > p:last-child {
  margin: 0;
  color: var(--cj-muted);
  font-size: 14px;
  line-height: 2;
}

/* TARGET */
.cj-target-grid,
.cj-concept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.cj-abstract {
  height: 215px;
  margin-bottom: 28px;
  overflow: hidden;
  position: relative;
  background: #eee;
}

.cj-abstract::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.035);
}

.cj-abstract--silk {
  background:
    radial-gradient(80% 120% at 15% 15%, rgba(255,255,255,.95), transparent 45%),
    radial-gradient(90% 110% at 88% 82%, rgba(182,197,216,.65), transparent 50%),
    linear-gradient(128deg, #e5ebf2 0 32%, #fff 38% 50%, #cbd7e5 57% 70%, #f7fafc 78%);
  filter: saturate(.55);
}

.cj-abstract--prism {
  background:
    radial-gradient(circle at 52% 46%, #fff 0 2%, transparent 5%),
    conic-gradient(from 215deg at 52% 46%, transparent 0 34%, rgba(209,181,130,.75) 36%, rgba(255,255,255,.95) 39%, rgba(129,158,190,.55) 42%, transparent 47% 100%),
    #11161c;
}

.cj-abstract--bokeh {
  background:
    radial-gradient(circle at 22% 35%, rgba(255,255,255,.94) 0 7%, transparent 12%),
    radial-gradient(circle at 58% 68%, rgba(255,255,255,.85) 0 9%, transparent 15%),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.80) 0 8%, transparent 13%),
    linear-gradient(135deg, #efe9dd, #fffdf9 48%, #ddd6c9);
  filter: blur(.2px);
}

.cj-target-card h3 {
  min-height: 70px;
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--cj-serif);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 600;
}

.cj-target-card p {
  margin: 0;
  color: var(--cj-muted);
  font-size: 13px;
  line-height: 1.9;
}

/* CONCEPT */
.cj-concept-card img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  filter: grayscale(100%);
}

.cj-concept-meta {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  padding-top: 22px;
}

.cj-concept-meta .cj-number { margin: 0; }

.cj-concept-meta h3 {
  margin: 0 0 14px;
  font-family: var(--cj-serif);
  font-size: 20px;
  line-height: 1.5;
}

.cj-concept-meta p {
  margin: 0;
  color: var(--cj-muted);
  font-size: 12.5px;
  line-height: 1.9;
}

/* PRODUCTION */
.cj-production-grid {
  display: grid;
  grid-template-columns: .8fr 1.35fr;
  gap: 70px;
  align-items: center;
}

.cj-production-copy p {
  margin: 0 0 18px;
  color: var(--cj-muted);
  font-size: 14px;
  line-height: 2.1;
}

.cj-production-media { margin: 0; }
.cj-production-media img {
  width: 100%;
  min-height: 340px;
  object-fit: cover;
  filter: grayscale(35%);
}

.cj-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  min-width: 230px;
  margin-top: 24px;
  padding: 16px 26px;
  font-size: 12px;
  letter-spacing: .1em;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.cj-button:hover { transform: translateY(-2px); }
.cj-button--dark { color: #fff !important; background: var(--cj-dark); }

/* ONE STOP */
.cj-onestop { padding-top: 146px; padding-bottom: 146px; }

.cj-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cj-process::before {
  content: "";
  position: absolute;
  top: 130px;
  left: 9%;
  right: 9%;
  height: 1px;
  background: var(--cj-line);
  z-index: 0;
}

.cj-process li {
  position: relative;
  z-index: 1;
  text-align: center;
}

.cj-process-no {
  display: block;
  margin-bottom: 10px;
  color: var(--cj-accent);
  font: italic 22px Georgia, serif;
}

.cj-process img {
  width: 138px;
  height: 138px;
  margin: 0 auto 24px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(100%);
  border: 7px solid var(--cj-bg);
}

.cj-process h3 {
  margin: 0 0 12px;
  font-family: var(--cj-serif);
  font-size: 16px;
}

.cj-process p {
  margin: 0 auto;
  max-width: 190px;
  color: var(--cj-muted);
  font-size: 12px;
  line-height: 1.8;
}

/* PROPOSAL */
.cj-proposal { padding-top: 140px; padding-bottom: 160px; }

.cj-proposal-grid h3 { font-size: 18px; }
.cj-proposal-grid h3 small {
  display: block;
  margin-top: 6px;
  font-family: var(--cj-sans);
  font-size: 11px;
  color: var(--cj-muted);
}

/* CONTACT */
.cj-contact {
  position: relative;
  min-height: 390px;
  display: grid;
  align-items: center;
  color: #fff;
  background: #10151c;
  isolation: isolate;
}

.cj-contact-bg,
.cj-contact-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cj-contact-bg {
  background-size: cover;
  background-position: center 56%;
  filter: grayscale(100%);
}

.cj-contact-overlay {
  z-index: -1;
  background: linear-gradient(90deg, rgba(8,12,18,.93), rgba(8,12,18,.68) 54%, rgba(8,12,18,.76));
}

.cj-contact-inner {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  gap: 60px;
  padding-top: 58px;
  padding-bottom: 58px;
}

.cj-contact-logo {
  align-self: start;
  margin: 16px 0 0;
  font: 20px Georgia, serif;
  letter-spacing: .08em;
}

.cj-contact-copy { text-align: center; }
.cj-contact-copy h2 { margin: 0; font-size: clamp(30px, 3vw, 45px); }
.cj-contact-copy p { margin: 18px 0 0; color: rgba(255,255,255,.75); font-size: 13px; line-height: 2; }

.cj-button--outline {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(0,0,0,.14);
}

/* RESPONSIVE */
@media (max-width: 980px) {
  .cj-container { width: min(100% - 40px, 760px); }
  .cj-header { padding: 0 20px; height: 70px; }
  .cj-menu-button { display: block; }

  .cj-nav {
    position: fixed;
    inset: 70px 0 auto;
    display: grid;
    gap: 0;
    padding: 22px 24px 30px;
    background: rgba(250,249,247,.98);
    color: var(--cj-ink);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
  }
  .cj-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .cj-nav a { padding: 14px 4px; border-bottom: 1px solid var(--cj-line); }
  .cj-nav-cta { margin-top: 12px; text-align: center; }

  .cj-hero,
  .cj-hero-inner { min-height: 680px; }
  .cj-hero-media { inset: 0 0 0 18%; }
  .cj-hero-shade { background: linear-gradient(90deg, rgba(8,11,14,.97) 0%, rgba(8,11,14,.84) 55%, rgba(8,11,14,.42)); }
  .cj-hero-copy { width: 76%; }

  .cj-section { padding: 100px 0; }
  .cj-value-grid,
  .cj-target-grid,
  .cj-concept-grid,
  .cj-proposal-grid { gap: 30px; }

  .cj-value-item,
  .cj-proposal-grid article { padding: 0 28px; }

  .cj-production-grid { grid-template-columns: 1fr 1.25fr; gap: 40px; }

  .cj-process { grid-template-columns: repeat(5, 180px); overflow-x: auto; padding-bottom: 18px; }
  .cj-process::before { display: none; }
}

@media (max-width: 720px) {
  .cj-container { width: calc(100% - 36px); }

  .cj-hero,
  .cj-hero-inner { min-height: 720px; }
  .cj-hero-media { inset: 0; }
  .cj-hero-media img { object-position: 62% center; }
  .cj-hero-shade {
    background: linear-gradient(180deg, rgba(8,11,14,.54) 0%, rgba(8,11,14,.78) 45%, rgba(8,11,14,.98) 100%);
  }
  .cj-hero-inner { align-items: end; padding-bottom: 80px; }
  .cj-hero-copy { width: 100%; padding-top: 0; }
  .cj-hero h1 { font-size: clamp(38px, 11vw, 54px); }
  .cj-hero-lead { margin-top: 28px; font-size: 18px; }

  .cj-section { padding: 88px 0; }
  .cj-section-head { margin-bottom: 44px; }
  .cj-section-head h2 { font-size: 30px; }

  .cj-value-grid,
  .cj-target-grid,
  .cj-concept-grid,
  .cj-proposal-grid,
  .cj-production-grid {
    grid-template-columns: 1fr;
  }

  .cj-value-item,
  .cj-proposal-grid article {
    padding: 36px 0;
    border-left: 0;
    border-top: 1px solid var(--cj-line);
  }

  .cj-value-item:first-child,
  .cj-proposal-grid article:first-child { padding-top: 0; border-top: 0; }

  .cj-target-grid,
  .cj-concept-grid { gap: 56px; }
  .cj-target-card h3 { min-height: 0; }

  .cj-production-grid { gap: 40px; }
  .cj-production-media { order: -1; }
  .cj-production-media img { min-height: 250px; }

  .cj-onestop { padding-top: 104px; padding-bottom: 104px; }
  .cj-process {
    grid-template-columns: 1fr;
    gap: 52px;
    overflow: visible;
  }
  .cj-process li { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto auto; column-gap: 24px; text-align: left; }
  .cj-process-no { grid-column: 2; grid-row: 1; margin: 0 0 8px; }
  .cj-process img { grid-column: 1; grid-row: 1 / 4; width: 110px; height: 110px; margin: 0; }
  .cj-process h3 { grid-column: 2; grid-row: 2; }
  .cj-process p { grid-column: 2; grid-row: 3; max-width: none; margin: 0; }

  .cj-proposal { padding-top: 110px; padding-bottom: 120px; }

  .cj-contact-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cj-contact-logo { margin: 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}