/* ==========================================================================
   SHREESH — sections.css
   Hero · 3D gem · collections · horizontal rail · craft · showcase · contact
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: 5rem;
  padding-bottom: clamp(2rem, 6vh, 5rem);
  overflow: hidden;
  background: #1A0A12;
}

/* Raw-WebGL emerald caustics */
#gl-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 2.4s ease 0.3s;
}
#gl-hero.is-live { opacity: 1; }

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(155, 24, 46, 0.20), transparent 55%),
    linear-gradient(180deg, rgba(13, 4, 8, 0.60) 0%, transparent 30%, rgba(13, 4, 8, 0.45) 78%, var(--void) 100%);
}

.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: end;
}

.hero-title {
  grid-column: 1 / 9;
  font-family: var(--serif);
  font-size: var(--t-mega);
  line-height: 0.83;
  letter-spacing: -0.035em;
}
.hero-title .l2 { padding-left: 0.18em; }
.hero-title em {
  font-style: italic;
  background: linear-gradient(105deg,
    rgb(var(--c-gold)) 0%, var(--hs-300) 35%, var(--hs-100) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-meta {
  grid-column: 10 / 13;
  padding-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.hero-meta p { font-size: var(--t-sm); color: var(--mute); line-height: 1.8; }

.hero-top {
  position: absolute;
  top: 22vh;
  left: var(--gut);
  right: var(--gut);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.hero-top .eyebrow { pointer-events: auto; }
.hero-coord {
  text-align: right;
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  color: var(--mute-2);
  line-height: 2.2;
  text-transform: uppercase;
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.scroll-cue i {
  width: 1px;
  height: 58px;
  background: linear-gradient(180deg, var(--hs-300), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hs-100);
  animation: cue 2.2s var(--e-io) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* --------------------------------------------------------------------------
   THE 3D GEM — real CSS-3D faceted emerald cut
   -------------------------------------------------------------------------- */
.gem-stage {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(240px, 30vw, 460px);
  height: clamp(240px, 30vw, 460px);
  transform: translate(-50%, -54%);
  perspective: 1400px;
  pointer-events: none;
}
.gem {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* NOTE: no mix-blend-mode here. A blend mode on any descendant forces Chrome
   to flatten the parent's preserve-3d context, which collapses the stone into
   a 2D sliver. The translucency is done with alpha instead. */
/* THE HERO STONE — wine-red, in a dark girdle.
   The house metal is gold; the house stone is wine. One hue drives every facet,
   the glow and the flare at once, so the stone can be re-cut in a different
   colour by changing a single number. */
.gem {
  --gem-h: 348;
  --gem-a1: 0.62;   /* crown highlight */
  --gem-a2: 0.52;   /* crown body     */
  --gem-a3: 0.70;   /* crown depth    */
  --gem-p1: 0.72;   /* pavilion       */
  --gem-p2: 0.82;
  --gem-p3: 0.90;
}

.gem-face {
  position: absolute;
  top: 50%;
  left: 50%;
  backface-visibility: visible;
  border: 1px solid hsl(var(--gem-h) 90% 88% / 0.32);
}
/* Crown (upper) facets */
.gem-face.crown {
  background: linear-gradient(150deg,
    hsl(var(--gem-h) 96% 88% / var(--gem-a1)) 0%,
    hsl(var(--gem-h) 80% 58% / var(--gem-a2)) 35%,
    hsl(var(--gem-h) 72% 22% / var(--gem-a3)) 100%);
}
/* Pavilion (lower) facets — deeper, richer */
.gem-face.pav {
  background: linear-gradient(150deg,
    hsl(var(--gem-h) 74% 45% / var(--gem-p1)) 0%,
    hsl(var(--gem-h) 76% 22% / var(--gem-p2)) 55%,
    hsl(var(--gem-h) 72% 10%  / var(--gem-p3)) 100%);
}
/* Table (flat top) */
.gem-face.table {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 252, 244, 0.65), transparent 45%),
    linear-gradient(140deg, hsl(var(--gem-h) 88% 72% / 0.66), hsl(var(--gem-h) 72% 28% / 0.78));
  border-color: hsl(var(--gem-h) 95% 90% / 0.60);
}
/* Girdle band — the metal never changes. The house does not. */
.gem-face.girdle { background: rgba(155, 24, 46, 0.35); border-color: rgba(215, 80, 110, 0.45); }

/* The glow is a soft radial gradient — it does NOT need a blur filter on top.
   Animating scale on a blurred layer forces the browser to re-rasterise the
   blur every single frame. The gradient already is the blur. */
.gem-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle,
    hsl(var(--gem-h) 70% 55% / 0.30) 0%,
    hsl(var(--gem-h) 70% 50% / 0.10) 40%,
    transparent 68%);
  animation: gem-breathe 5.5s var(--e-soft) infinite alternate;
  pointer-events: none;
  will-change: opacity, transform;
}
@keyframes gem-breathe {
  from { opacity: 0.60; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1.1); }
}
/* Light-ray flare that sweeps across the stone */
.gem-flare {
  position: absolute;
  top: 50%; left: 50%;
  width: 220%; height: 1.5px;
  margin: -0.75px 0 0 -110%;
  background: linear-gradient(90deg, transparent, hsl(var(--gem-h) 95% 94% / 0.92), transparent);
  opacity: 0;
  animation: flare 6s var(--e-io) infinite;
}
.gem-flare:nth-of-type(2) { transform: rotate(60deg); animation-delay: 2s; }
.gem-flare:nth-of-type(3) { transform: rotate(-60deg); animation-delay: 4s; }
@keyframes flare {
  0%, 70%, 100% { opacity: 0; transform: scaleX(0.3) rotate(var(--r, 0deg)); }
  78%           { opacity: 0.9; transform: scaleX(1) rotate(var(--r, 0deg)); }
  86%           { opacity: 0; transform: scaleX(1.2) rotate(var(--r, 0deg)); }
}

/* --------------------------------------------------------------------------
   MANIFESTO
   -------------------------------------------------------------------------- */
.manifesto { position: relative; }
.manifesto-text {
  grid-column: 3 / 12;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 3.6rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--bone);
}
/* Each word fades in as it crosses the viewport centre (scroll-scrubbed) */
.manifesto-text .w {
  display: inline-block;
  color: rgba(242, 235, 228, 0.10);
  transition: color 0.5s var(--e-out);
}
.manifesto-text .w.is-lit { color: var(--bone); }
.manifesto-text .w.is-key { font-style: italic; }
.manifesto-text .w.is-key.is-lit { color: var(--hs-300); }

.manifesto-foot {
  grid-column: 3 / 8;
  margin-top: 4rem;
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}

/* Stat block */
.stats {
  grid-column: 9 / 13;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.stat { border-top: 1px solid var(--line); padding-top: 1rem; }
.stat-n {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 1;
  color: var(--hs-300);
}
.stat-n sup { font-size: 0.4em; color: var(--gold); vertical-align: super; }
.stat-l { font-size: var(--t-xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   HORIZONTAL COLLECTION RAIL (drag)
   -------------------------------------------------------------------------- */
.rail { position: relative; overflow: hidden; cursor: grab; }
.rail:active { cursor: grabbing; }
.rail-pin {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  perspective: 1200px;
  user-select: none;
}
.rail-head {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 3;
  pointer-events: none;
  padding: clamp(3rem, 8vh, 6rem) var(--gut) 0;
}
.rail-head h2 { font-size: var(--t-h2); }
.rail-count { font-size: var(--t-xs); letter-spacing: 0.3em; color: var(--mute-2); }
.rail-count b { color: var(--hs-300); font-weight: 400; }

.rail-hint {
  text-align: center;
  padding: 1rem;
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  opacity: 0.7;
  transition: opacity 0.5s;
}
.rail:active .rail-hint { opacity: 0.3; }

.rail-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 0 2rem;
}
.rail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mute-2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.4s, transform 0.4s var(--e-out);
}
.rail-dot:hover {
  background: var(--mute);
  transform: scale(1.3);
}
.rail-dot.is-active {
  background: var(--hs-300);
  transform: scale(1.3);
}

.rail-track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-inline: var(--gut);
  will-change: transform;
  align-items: center;
  align-self: center;
  transition: transform 0.1s ease-out;
}

.piece {
  position: relative;
  flex: none;
  width: clamp(260px, 27vw, 420px);
  cursor: pointer;
}
/* --------------------------------------------------------------------------
   MEDIA — the drawing, then the photograph over it

   The photography is shot on black, so the frame is kept near-black too and
   the images are `contain`-fitted: the piece is never cropped, and because the
   photo's own background matches the frame there is no visible letterbox.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.media-draw,
.media-photo {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  transition: transform 1.1s var(--e-out), opacity 1.2s var(--e-out);
}
.media-draw {
  display: grid;
  place-items: center;
  opacity: 0.5;
}
.media-draw svg { width: 74%; height: 74%; overflow: visible; }
.media-photo {
  object-fit: contain;
  opacity: 0;
}
.media-photo.is-loaded { opacity: 1; }
/* Once the photograph has arrived, the sketch underneath it is just noise. */
.media.has-photo .media-draw { opacity: 0; }

/* Square, and as near black as the photography's own backdrop.
   The pieces are shot on black in mixed orientations, so `contain` is the only
   fit that never crops a tiara's span or a necklace's width — and a square
   frame minimises the letterbox for both. The frame must then match the photo's
   black almost exactly, or the letterbox shows up as a seam. */
.piece-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, var(--plate-1), var(--plate-2) 72%);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: transform 0.9s var(--e-out), border-color 0.6s ease;
  transform-style: preserve-3d;
}
.piece:hover .piece-frame {
  border-color: rgb(var(--accent) / 0.55);
  box-shadow: 0 24px 70px -28px rgb(var(--accent) / 0.45);
}
.piece:hover .media-photo,
.piece:hover .media-draw { transform: scale(1.06) translateZ(30px); }

/* sheen sweep on hover */
.piece-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgb(var(--accent) / 0.16) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 1.1s var(--e-out);
  pointer-events: none;
}
.piece:hover .piece-frame::after { transform: translateX(120%); }

.piece-idx {
  position: absolute;
  top: 1rem; left: 1rem;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--mute-2);
  z-index: 2;
}
.piece-carat {
  position: absolute;
  bottom: 1rem; right: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: rgb(var(--accent));
  z-index: 2;
}
.piece-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.piece-name { font-family: var(--serif); font-size: 1.55rem; line-height: 1.1; color: rgb(var(--accent)); }
.piece-name span { display: block; font-family: var(--sans); font-size: var(--t-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute-2); margin-top: 0.45rem; }
.piece-price { font-size: var(--t-xs); letter-spacing: 0.16em; color: rgb(var(--accent)); white-space: nowrap; }

/* Rail progress line */
.rail-prog {
  margin: 0 var(--gut);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  height: 1px;
  background: var(--hairline);
  z-index: 3;
}
.rail-prog i {
  display: block; height: 100%; width: 100%;
  background: var(--house);
  transform: scaleX(0);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   SIGNATURE — scroll-scrubbed hero piece
   -------------------------------------------------------------------------- */
.signature { position: relative; height: 300vh; background: linear-gradient(180deg, var(--void), var(--hs-950) 50%, var(--void)); }
.sig-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }

.sig-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: clamp(5rem, 22vw, 24rem);
  line-height: 0.8;
  white-space: nowrap;
  color: rgb(var(--accent) / 0.18);
  z-index: 1;
  will-change: transform;
  user-select: none;
}
.sig-jewel {
  position: relative;
  z-index: 2;
  width: clamp(300px, 46vw, 680px);
  will-change: transform;
}
.sig-jewel .media { aspect-ratio: 453 / 389; }   /* the cut-out's own ratio */
.sig-jewel .media-draw svg { width: 88%; height: 88%; overflow: visible; }

/* A cut-out has no black backdrop to conceal, so it takes no frame and no
   letterbox: it is lit and shadowed as an object lying on the page. The shadow
   goes on the image (drop-shadow follows the alpha) and not on a box. */
.media.is-cutout .media-photo {
  object-fit: contain;
  filter:
    drop-shadow(0 30px 55px rgba(0, 0, 0, 0.60))
    drop-shadow(0 0 40px rgba(155, 24, 46, 0.20));
}

.sig-facts {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}
.sig-fact {
  position: absolute;
  max-width: 15rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.9s var(--e-out), transform 0.9s var(--e-out);
}
.sig-fact.is-on { opacity: 1; transform: translateY(0); }
.sig-fact h4 { font-family: var(--sans); font-size: var(--t-xs); letter-spacing: 0.28em; text-transform: uppercase; color: var(--hs-300); margin-bottom: 0.6rem; }
.sig-fact p { font-size: var(--t-sm); color: var(--mute); line-height: 1.75; }
.sig-fact::before {
  content: '';
  position: absolute;
  top: -0.9rem; left: 0;
  width: 2.4rem; height: 1px;
  background: var(--hs-400);
}
.sig-fact.f1 { top: 22%; left: var(--gut); }
.sig-fact.f2 { bottom: 24%; left: var(--gut); }
.sig-fact.f3 { top: 26%; right: var(--gut); text-align: right; }
.sig-fact.f3::before { left: auto; right: 0; }
.sig-fact.f4 { bottom: 22%; right: var(--gut); text-align: right; }
.sig-fact.f4::before { left: auto; right: 0; }

/* --------------------------------------------------------------------------
   CRAFT / PROCESS
   -------------------------------------------------------------------------- */
.craft-head { grid-column: 1 / 7; }
.craft-note { grid-column: 8 / 13; align-self: end; }

.craft-list { margin-top: 5rem; border-top: 1px solid var(--line); }
.craft-row {
  position: relative;
  display: grid;
  grid-template-columns: 5rem 1.2fr 2fr auto 6rem;
  gap: var(--gut);
  align-items: center;
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: padding 0.7s var(--e-out);
  overflow: hidden;
}
.craft-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(var(--accent) / 0.16), transparent 70%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--e-out);
  z-index: -1;
}
.craft-row:hover { padding-left: 1.6rem; padding-right: 1.6rem; }
.craft-row:hover::before { transform: scaleX(1); }
.craft-row .c-n { font-size: var(--t-xs); letter-spacing: 0.2em; color: var(--hs-500); }
.craft-row .c-t { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1.1; transition: color 0.5s; }
.craft-row:hover .c-t { color: var(--hs-300); font-style: italic; }
.craft-row .c-d { font-size: var(--t-sm); color: var(--mute); line-height: 1.8; max-width: 34rem; }
.craft-row .c-a { color: var(--hs-400); transition: transform 0.7s var(--e-out); }
.craft-row:hover .c-a { transform: translateX(10px) rotate(-45deg); }
.craft-row .c-img {
  position: relative;
  width: 6rem;
  height: 6rem;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.craft-row .c-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s var(--e-out), transform 0.7s var(--e-out);
}
.craft-row .c-img .c-img-hover {
  opacity: 0;
}
.craft-row:hover .c-img img:first-child {
  opacity: 0;
  transform: scale(1.08);
}
.craft-row:hover .c-img .c-img-hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Floating preview that follows the cursor over craft rows.
   Two layers on purpose: the outer one is positioned by JS with a transform
   (never left/top — those are layout properties and would relayout the whole
   document every frame), and the inner one owns the entrance animation. */
.craft-peek {
  position: fixed;
  top: 0; left: 0;
  z-index: 4000;
  pointer-events: none;
  will-change: transform;
}
.craft-peek-in {
  width: 240px;
  height: 300px;
  opacity: 0;
  transform: scale(0.7) rotate(-6deg);
  transition: opacity 0.5s var(--e-out), transform 0.7s var(--e-out);
  border: 1px solid rgb(var(--accent) / 0.32);
  background: linear-gradient(170deg, #0D0408, var(--plate-2));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.craft-peek.is-on .craft-peek-in { opacity: 1; transform: scale(1) rotate(-3deg); }
.craft-peek .media-draw svg { width: 68%; height: 68%; }
.craft-peek .media-photo { object-fit: cover; }

/* --------------------------------------------------------------------------
   ATELIER / SPLIT IMAGE
   -------------------------------------------------------------------------- */
.atelier { position: relative; overflow: hidden; }
.atelier-grid { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gut); align-items: center; }
.atelier-vis {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 55% 40%, #0D0408, var(--plate-2) 72%);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.atelier-vis .media { position: absolute; inset: 0; }
.atelier-vis .media-photo { object-fit: cover; }
.atelier-vis .a-tag {
  position: absolute;
  bottom: 1.4rem; left: 1.4rem;
  font-size: var(--t-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mute);
}
.atelier-copy { padding-right: clamp(0rem, 4vw, 4rem); }
.atelier-copy h2 { font-size: var(--t-h2); margin-bottom: 2rem; }
.atelier-copy p + p { margin-top: 1.4rem; }
.atelier-sign {
  margin-top: 2.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--hs-300);
}
.atelier-sign span { display: block; font-family: var(--sans); font-style: normal; font-size: var(--t-xs); letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute); margin-top: 0.4rem; }

/* Drawn-in SVG paths */
.draw path, .draw circle, .draw line, .draw ellipse, .draw polyline {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 2.4s var(--e-io) var(--d, 0ms);
}
.draw.is-in path, .draw.is-in circle, .draw.is-in line, .draw.is-in ellipse, .draw.is-in polyline { stroke-dashoffset: 0; }

/* --------------------------------------------------------------------------
   PRESS / QUOTE
   -------------------------------------------------------------------------- */
.quote { text-align: center; position: relative; }
.quote-mark {
  font-family: var(--serif);
  font-size: clamp(6rem, 16vw, 16rem);
  line-height: 0.6;
  color: var(--hs-700);
  margin-bottom: 1rem;
}
.quote-body {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.6vw, 3.4rem);
  line-height: 1.3;
  max-width: 56rem;
  margin-inline: auto;
}
.quote-body em { font-style: italic; color: var(--hs-300); }
.quote-src { margin-top: 2.4rem; font-size: var(--t-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute-2); }

/* --------------------------------------------------------------------------
   CONTACT / CTA
   -------------------------------------------------------------------------- */
.cta { position: relative; text-align: center; overflow: hidden; }
.cta-title {
  font-family: var(--serif);
  font-size: var(--t-h1);
  line-height: 0.95;
  margin-bottom: 2.6rem;
}
.cta-title em { font-style: italic; color: var(--hs-300); }
.cta-orb {
  position: absolute;
  top: 50%; left: 50%;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  margin: -30vw 0 0 -30vw;
  background: radial-gradient(circle, rgb(var(--accent) / 0.20), transparent 62%);
  pointer-events: none;
  animation: gem-breathe 7s var(--e-soft) infinite alternate;
  will-change: opacity, transform;
}

/* Contact form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem 2rem; margin-top: 3.5rem; text-align: left; }
.field { position: relative; }
.field.is-wide { grid-column: 1 / -1; }
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  padding: 0.9rem 0;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.5s;
  border-radius: 0;
}
.field select option { background: var(--hs-950); color: var(--bone); }
.field textarea { resize: none; min-height: 6rem; }
.field label {
  position: absolute;
  top: 0.9rem; left: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute-2);
  pointer-events: none;
  transition: transform 0.5s var(--e-out), color 0.5s, opacity 0.4s;
  transform-origin: left;
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.5rem) scale(0.85);
  color: var(--hs-300);
}
.field select + label { transform: translateY(-1.5rem) scale(0.85); }
.field .f-line {
  position: absolute;
  bottom: 0; left: 0;
  height: 1px; width: 100%;
  background: var(--hs-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--e-out);
}
.field input:focus ~ .f-line,
.field textarea:focus ~ .f-line,
.field select:focus ~ .f-line { transform: scaleX(1); }
.form-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.form-msg { font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--hs-300); opacity: 0; transition: opacity 0.5s; }
.form-msg.is-on { opacity: 1; }
.field.is-error input, .field.is-error textarea, .field.is-error select {
  border-bottom-color: var(--c-ruby);
}
.field.is-error label {
  color: var(--c-ruby);
}

/* --------------------------------------------------------------------------
   INNER PAGE HEADER
   -------------------------------------------------------------------------- */
.phead {
  position: relative;
  min-height: 68svh;
  display: flex;
  align-items: flex-end;
  padding-top: 5rem;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 20%, rgb(var(--accent) / 0.12), transparent 55%),
    linear-gradient(180deg, var(--hs-950), var(--void));
}
.phead-inner { position: relative; z-index: 2; width: 100%; }
.phead h1 { font-size: var(--t-h1); margin-top: 1.6rem; }
.phead h1 em { font-style: italic; color: var(--hs-300); }
.phead-sub { margin-top: 2rem; max-width: 34rem; }
.phead-lines {
  position: absolute;
  right: clamp(1rem, 4vw, 5rem);
  top: 0;
  width: min(42vw, 540px);
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
@media (max-width: 860px) { .phead-lines { right: -6%; width: min(55vw, 420px); } }
.phead-lines-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.phead-static-lines rect {
  fill: rgba(242, 235, 228, 0.06);
}
.phead-lights .light {
  fill: rgba(242, 235, 228, 0.88);
  will-change: transform;
}

/* Breadcrumb */
.crumb { display: flex; gap: 0.6rem; font-size: var(--t-xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); }
.crumb a:hover { color: var(--hs-300); }

/* --------------------------------------------------------------------------
   THE STORY MODAL
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 7500;
  display: grid;
  place-items: center;
  padding: var(--gut);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--e-out);
}
.modal.is-on { opacity: 1; pointer-events: auto; }
.modal-veil { position: absolute; inset: 0; background: var(--veil); backdrop-filter: blur(14px); }
.modal-card {
  position: relative;
  z-index: 2;
  width: min(1040px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: linear-gradient(160deg, var(--void-3), var(--hs-950));
  border: 1px solid rgb(var(--accent) / 0.3);
  transform: translateY(2.5rem) scale(0.97);
  transition: transform 0.9s var(--e-out);
}
.modal.is-on .modal-card { transform: translateY(0) scale(1); }
.modal-vis {
  position: relative;
  display: grid;
  place-items: center;
  padding: 3rem;
  /* Same black as the photography's own backdrop, or its rectangle shows. */
  background: radial-gradient(circle at 50% 45%, var(--plate-1), var(--plate-2) 75%);
  border-right: 1px solid var(--line);
}
.modal-vis .media { aspect-ratio: 1 / 1; max-width: 400px; }
.modal-vis .media-draw svg { width: 78%; height: 78%; overflow: visible; }
.modal-body { padding: clamp(2rem, 3.5vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; }
.modal-body h3 { font-size: var(--t-h3); margin: 0.8rem 0 0.4rem; }
.modal-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: rgb(var(--accent));
  margin-bottom: 1.4rem;
}
.modal-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2rem 0; }
.modal-spec div { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.modal-spec dt { font-size: var(--t-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 0.35rem; }
.modal-spec dd { font-family: var(--serif); font-size: 1.2rem; color: rgb(var(--accent)); }
.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 3;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color 0.4s, transform 0.6s var(--e-out);
}
.modal-close:hover { background: var(--hs-300); color: var(--void); transform: rotate(90deg); }

/* --------------------------------------------------------------------------
   THE PROCESS — a timeline

   A spine down the centre that fills as you scroll, with the stages alternating
   either side of it. Each stage's node lights when the stage arrives.
   -------------------------------------------------------------------------- */
.proc { position: relative; margin-top: clamp(3rem, 8vh, 6rem); }

/* the spine, and the emerald that fills it */
.proc::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--line);
}
/* scaleY, not height — height animates on the main thread, transform doesn't */
.proc-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  margin-left: -0.5px;
  background: var(--house-v);
  box-shadow: 0 0 12px rgb(var(--accent) / 0.5);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
  z-index: 1;
}

.proc-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 6rem 1fr;
  align-items: center;
  padding-block: clamp(2.5rem, 6vh, 5rem);
}
/* Copy left, piece right — then swapped, all the way down.
   nth-of-type, not nth-child: the fill element is a sibling of the rows and
   would otherwise be counted, mirroring every stage. */
.proc-row .proc-copy { grid-column: 1; text-align: right; padding-right: clamp(1rem, 3vw, 3rem); }
.proc-row .proc-vis  { grid-column: 3; padding-left: clamp(1rem, 3vw, 3rem); }
.proc-row:nth-of-type(even) .proc-copy { grid-column: 3; text-align: left; padding: 0 0 0 clamp(1rem, 3vw, 3rem); }
.proc-row:nth-of-type(even) .proc-vis  { grid-column: 1; padding: 0 clamp(1rem, 3vw, 3rem) 0 0; }

/* The node on the spine */
.proc-node {
  grid-column: 2;
  justify-self: center;
  position: relative;
  z-index: 2;
  width: 13px;
  height: 13px;
  transform: rotate(45deg) scale(0.7);
  background: var(--void);
  border: 1px solid var(--hs-500);
  transition: background-color 0.6s var(--e-out), box-shadow 0.6s var(--e-out),
              transform 0.7s var(--e-out), border-color 0.6s;
}
.proc-row.is-in .proc-node {
  background: rgb(var(--accent));
  border-color: rgb(var(--accent) / 0.8);
  box-shadow: 0 0 18px rgb(var(--accent) / 0.9);
  transform: rotate(45deg) scale(1);
}

/* Copy */
/* The numeral takes the colour of the stone that stage shows. */
.proc-step {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--accent) / 0.55);
  display: block;
  margin-bottom: 0.6rem;
  transition: color 0.8s var(--e-out);
}
.proc-row.is-in .proc-step { color: rgb(var(--accent) / 0.14); }
.proc-copy h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  margin-bottom: 1rem;
}
.proc-copy p { max-width: 30rem; margin-left: auto; }
.proc-row:nth-of-type(even) .proc-copy p { margin-left: 0; margin-right: auto; }

/* the "two hours" / "ninety hours" chip */
.proc-when {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}
.proc-when::before {
  content: '';
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--gold);
  flex: none;
}

/* The piece. Capped and pulled toward the spine, so each stage reads as
   attached to its node rather than drifting off at the edge of the page. */
.proc-vis { width: 100%; max-width: 22rem; }
.proc-row .proc-vis { justify-self: start; }
.proc-row:nth-of-type(even) .proc-vis { justify-self: end; }

.proc-vis .media {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 45%, var(--plate-1), var(--plate-2) 72%);
  transition: border-color 0.6s ease;
}
.proc-row.is-in .proc-vis .media { border-color: rgb(var(--accent) / 0.3); }
.proc-vis .media-draw svg { width: 72%; height: 72%; overflow: visible; }
/* Stage three is the drawing. It is the only stage where the object does not
   exist yet, so it is the only one that shows no photograph. */
.proc-vis .is-drawing {
  aspect-ratio: 1 / 1;
  border: 1px solid rgb(var(--accent) / 0.28);
  background: radial-gradient(circle at 50% 45%, #0D0408, var(--plate-2) 72%);
  display: grid;
  place-items: center;
}
.proc-vis .is-drawing svg { width: 70%; height: 70%; overflow: visible; }
.proc-vis .v-tag {
  display: block;
  margin-top: 0.9rem;
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.proc-row:nth-of-type(odd) .proc-vis .v-tag { text-align: left; }
.proc-row:nth-of-type(even) .proc-vis .v-tag { text-align: right; }

@media (max-width: 860px) {
  .proc::before, .proc-fill { left: 6px; margin-left: 0; }
  .proc-row,
  .proc-row:nth-of-type(even) {
    grid-template-columns: 3rem 1fr;
    align-items: start;
    gap: 0 1rem;
  }
  .proc-row .proc-node,
  .proc-row:nth-of-type(even) .proc-node { grid-column: 1; grid-row: 1; justify-self: start; margin-top: 1rem; }
  .proc-row .proc-copy,
  .proc-row:nth-of-type(even) .proc-copy {
    grid-column: 2; grid-row: 1; text-align: left; padding: 0;
  }
  .proc-row .proc-vis,
  .proc-row:nth-of-type(even) .proc-vis {
    grid-column: 2; grid-row: 2; padding: 2rem 0 0; max-width: 22rem;
  }
  .proc-copy p, .proc-row:nth-of-type(even) .proc-copy p { margin: 0; }
  .proc-row:nth-of-type(even) .proc-vis .v-tag { text-align: left; }
}

/* --------------------------------------------------------------------------
   ARCHIVE — Coverflow Carousel
   -------------------------------------------------------------------------- */
.archive-carousel {
  position: relative;
  padding: clamp(4rem, 10vh, 8rem) 0;
  overflow: hidden;
}

.archive-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 var(--gut);
  margin-bottom: 3rem;
}
.archive-head h2 { font-size: var(--t-h2); }
.archive-count {
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  color: var(--mute-2);
}
.archive-count b { color: var(--hs-300); font-weight: 400; }

/* Swiper container */
.coverflow-swiper {
  width: 100%;
  padding: 50px 0;
}

.coverflow-swiper .swiper-slide {
  width: clamp(280px, 30vw, 400px);
  transition: box-shadow 0.5s ease;
}

/* Archive card */
.archive-card {
  background: linear-gradient(160deg, var(--void-3), var(--hs-950));
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.6s ease, transform 0.5s var(--e-out);
}
.archive-card:hover {
  border-color: var(--hs-300);
  transform: translateY(-4px);
}

.archive-card-inner {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, var(--plate-1), var(--plate-2) 72%);
}
.archive-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--e-out);
}
.archive-card:hover .archive-card-inner img {
  transform: scale(1.05);
}
.archive-card-idx {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--mute-2);
  z-index: 2;
}
.archive-card-emotion {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--hs-300);
  z-index: 2;
}

.archive-card-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--line);
}
.archive-card-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--hs-300);
}
.archive-card-name span {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-top: 0.4rem;
}
.archive-card-carat {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  color: var(--hs-300);
  white-space: nowrap;
}

/* Swiper navigation arrows */
.coverflow-swiper .swiper-button-prev,
.coverflow-swiper .swiper-button-next {
  color: var(--hs-300);
  width: 44px;
  height: 44px;
  transition: transform 0.3s var(--e-out);
}
.coverflow-swiper .swiper-button-prev:hover,
.coverflow-swiper .swiper-button-next:hover {
  transform: scale(1.2);
}
.coverflow-swiper .swiper-button-prev::after,
.coverflow-swiper .swiper-button-next::after {
  font-size: 1.5rem;
}

/* Swiper pagination dots */
.coverflow-swiper .swiper-pagination-bullet {
  background: var(--mute-2);
  opacity: 1;
  width: 8px;
  height: 8px;
  transition: background 0.3s, transform 0.3s;
}
.coverflow-swiper .swiper-pagination-bullet-active {
  background: var(--hs-300);
  transform: scale(1.3);
}

/* Swiper slide shadows for depth */
.coverflow-swiper .swiper-slide-shadow-left,
.coverflow-swiper .swiper-slide-shadow-right {
  background: linear-gradient(90deg, rgba(13, 4, 8, 0.5), transparent);
  border-radius: 4px;
}

/* Values grid */
.vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); margin-top: 4rem; }
.val {
  padding: 2.6rem 2rem;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: border-color 0.6s, transform 0.8s var(--e-out);
}
.val::before {
  content: '';
  position: absolute;
  inset: auto auto -60% -20%;
  width: 140%; height: 120%;
  background: radial-gradient(circle, rgb(var(--accent) / 0.26), transparent 62%);
  opacity: 0;
  transition: opacity 0.8s var(--e-out);
}
.val:hover { border-color: rgb(var(--accent) / 0.35); transform: translateY(-8px); }
.val:hover::before { opacity: 1; }
.val-ico { width: 44px; height: 44px; margin-bottom: 1.6rem; color: var(--hs-300); position: relative; z-index: 2; }
.val h3 { font-size: 1.5rem; margin-bottom: 0.9rem; position: relative; z-index: 2; }
.val p { position: relative; z-index: 2; }

/* Contact info cards */
.cinfo { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); margin-top: 5rem; text-align: left; }
.cinfo-card { border-top: 1px solid var(--line-2); padding-top: 1.6rem; }
.cinfo-card h4 { font-family: var(--sans); font-size: var(--t-xs); letter-spacing: 0.28em; text-transform: uppercase; color: var(--hs-400); margin-bottom: 1rem; }
.cinfo-card p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; color: var(--bone-2); }

/* --------------------------------------------------------------------------
    RESPONSIVE
    -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .vals { grid-template-columns: 1fr; }
  .cinfo { grid-template-columns: 1fr; gap: 2.5rem; }
  .craft-row { grid-template-columns: 3rem 1fr; gap: 1rem 2rem; }
  .craft-row .c-d { grid-column: 2; max-width: none; }
  .craft-row .c-a { display: none; }
  .craft-row .c-img { display: none; }
}
@media (max-width: 900px) {
  .hero-title { grid-column: 1 / 13; }
  .hero-meta { grid-column: 1 / 13; padding-top: 2rem; }
  .hero-top { top: 16vh; }
  .manifesto-text, .manifesto-foot, .stats { grid-column: 1 / 13; }
  .atelier-grid { grid-template-columns: 1fr; gap: 3rem; }
  .craft-head, .craft-note { grid-column: 1 / 13; }
  .form { grid-template-columns: 1fr; }
  .modal-card { grid-template-columns: 1fr; max-height: 88vh; }
  .modal-vis { border-right: 0; border-bottom: 1px solid var(--line); padding: 2.5rem; }
  .sig-fact { max-width: 11rem; }
  .sig-fact p { display: none; }
  .gem-stage { width: 62vw; height: 62vw; transform: translate(-50%, -60%); }
}
@media (max-width: 640px) {
  .rail { min-height: 100vh; }
  .modal-spec { grid-template-columns: 1fr; }
  .hero-coord { display: none; }
}

/* --------------------------------------------------------------------------
    RESPONSIVE — mobile enhancements
    -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Hero: ensure clean stacking */
  .hero-title { line-height: 0.86; }
  .hero-meta { padding-bottom: 0; }

  /* Manifesto foot: reduce gap */
  .manifesto-foot { margin-top: 2.5rem; gap: 1.5rem; }

  /* Archive carousel */
  .archive-carousel { padding: clamp(3rem, 8vh, 6rem) 0; }
  .archive-head { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
  .archive-head h2 { font-size: var(--t-h3); }
  .coverflow-swiper { padding: 30px 0; }
  .coverflow-swiper .swiper-slide { width: clamp(240px, 65vw, 320px); }
  .coverflow-swiper .swiper-button-prev,
  .coverflow-swiper .swiper-button-next { display: none; }

  /* Signature facts: hide text, keep titles only */
  .sig-fact { opacity: 1; transform: none; }
  .sig-fact.is-on { opacity: 1; }
}

@media (max-width: 640px) {
  /* Hero: compact */
  .hero { min-height: 88svh; }
  .hero-title { letter-spacing: -0.02em; }

  /* Manifesto: tighter */
  .manifesto { position: relative; }
  .manifesto-text { letter-spacing: -0.01em; line-height: 1.25; }

  /* Piece cards: smaller for narrow screens */
  .piece { width: clamp(180px, 60vw, 260px); }
  .piece-frame { border-radius: 1px; }
  .piece-info { flex-direction: column; gap: 0.4rem; }
  .piece-price { font-size: 0.6rem; }
  .piece-carat { font-size: 0.75rem; bottom: 0.7rem; right: 0.7rem; }
  .piece-idx { font-size: 0.6rem; top: 0.7rem; left: 0.7rem; }

  /* Rail: reduce horizontal padding */
  .rail-track { padding-inline: calc(var(--gut) * 0.7); gap: clamp(1rem, 3vw, 2rem); }
  .rail-head { gap: 1rem; }

  /* Atelier: reduce padding */
  .atelier-vis { border-radius: 1px; }
  .atelier-copy { padding-right: 0; }
  .atelier-copy p + p { margin-top: 1rem; }
  .atelier-sign { margin-top: 2rem; font-size: 1.3rem; }
  .atelier-sign span { font-size: 0.6rem; }

  /* Process: tighter */
  .proc-row { padding-block: clamp(1.8rem, 4vh, 3rem); }
  .proc-vis { max-width: 100%; }

  /* Contact form: full width */
  .form { gap: 1.8rem 1.2rem; }
  .field input, .field textarea, .field select { padding: 0.75rem 0; }
  .form-submit { width: 100%; justify-content: center; }

  /* CTA section */
  .cta { overflow: visible; }
  .cta-orb { width: 80vw; height: 80vw; margin: -40vw 0 0 -40vw; }

  /* Page heads: reduce SVG lines overlay */
  .phead { min-height: 52svh; padding-bottom: clamp(2rem, 6vh, 4rem); }
  .phead-lines { opacity: 0.6; }
  .phead h1 { line-height: 0.9; }

  /* Quote section */
  .quote { padding-block: clamp(3rem, 8vh, 5rem); }

  /* Footer word mark */
  .foot-word { letter-spacing: 0.01em; }
}

@media (max-width: 420px) {
  /* Hero */
  .hero { min-height: 85svh; }
  .hero-title .l2 { padding-left: 0.1em; }

  /* Piece cards: extra compact */
  .piece { width: clamp(160px, 65vw, 220px); }
  .piece-name { font-size: 1.1rem; }
  .piece-info { margin-top: 0.8rem; padding-top: 0.7rem; }

  /* Rail */
  .rail { min-height: 100vh; }
  .rail-track { gap: 1rem; }

  /* Signature */
  .sig-jewel { width: clamp(180px, 70vw, 300px); }

  /* Craft rows: minimal */
  .craft-row { gap: 0.8rem 1.2rem; }

  /* Process: compact */
  .proc-vis .media { aspect-ratio: 4 / 3; }

  /* Contact info */
  .cinfo { gap: 2rem; }
  .cinfo-card { padding-top: 1.2rem; }
  .cinfo-card h4 { font-size: 0.6rem; margin-bottom: 0.7rem; }
  .cinfo-card p { font-size: 1rem; }

  /* Values */
  .vals { gap: 1rem; }
  .val { padding: 1.4rem 1rem; }
}

@media (max-width: 360px) {
  .piece { width: clamp(140px, 70vw, 200px); }
  .rail { min-height: 100vh; }
  .sig-jewel { width: clamp(150px, 75vw, 240px); }
  .modal-vis { padding: 1.5rem; }
  .modal-body { padding: 1.2rem; }
}

/* Mobile: drop backdrop-filter blur — expensive on mobile GPUs */
@media (max-width: 768px) {
  .modal-veil { backdrop-filter: none; }
  .cutout-shadow { filter: none; }
}

/* End of sections.css */