/* Fonts are linked from <head> in index.html, not @import-ed here — an
   @import inside a stylesheet can't start downloading until this file has
   itself downloaded and parsed, which delays the first paint of text. */

/* ============================================================
   Cast Jewels — warm dark
   ------------------------------------------------------------
   Dark scheme, chosen because most of the studio's renders are
   shot on black: on a light page those tiles read as holes, on
   this one they sit flush and the bright renders glow instead.

   Four surface levels, not one flat black — depth is what keeps
   a dark layout from looking cheap. Every neutral carries a warm
   bias toward the gold accent so nothing reads as dead grey.
   ============================================================ */
:root {
  --deep:       #070605;   /* darkest — viewer, contact, footer */
  --bg:         #0c0a08;   /* page base */
  --surface:    #14100d;   /* alternate sections */
  --surface-2:  #1b1613;   /* raised: cards, inputs, stats */
  --surface-3:  #241d18;   /* hover state */

  --text:       #f4efe6;
  --text-soft:  #d5ccbe;
  --muted:      #9a9081;

  --line:       rgba(244, 239, 230, .11);
  --line-soft:  rgba(244, 239, 230, .06);

  /* Accent: rose gold, sampled from the metal of the emerald-cut ring in the
     hero render (highlight #c5a289, midtone #92715a). The token names still
     say "gold" so every existing rule keeps working — the values are rose. */
  --gold:        #c5a289;  /* render highlight — headings, eyebrows, links */
  --gold-bright: #c5a289;  /* same as --gold: the site is dark throughout, so the
                              render's exact highlight already reads at 8:1+ */
  --gold-deep:   #92715a;  /* render midtone — large decorative numerals */
  --gold-pale:   #eddacd;  /* pale rose — small badge text */

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --shell: 1200px;
  --gut: clamp(20px, 5vw, 56px);
  --sec-y: clamp(72px, 10vw, 140px);
  --r: 2px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r); }

/* The hidden attribute must always win. Several components below set their own
   display (.lightbox, .viewer-fallback, .reel-play, the lightbox arrows), and an
   author display rule beats the browser's default [hidden] styling — which left
   a full-screen .lightbox sitting invisibly over the page, swallowing clicks. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--text); color: var(--bg); padding: 12px 20px; font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }
.shell.narrow { max-width: 820px; }
.section { padding: var(--sec-y) 0; }
.section-tint { background: var(--surface); }
.section-dark { background: var(--deep); }
.section-dark .eyebrow { color: var(--gold-bright); }
.section-dark .section-lede { color: var(--muted); }

/* ---------- type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
  font-size: clamp(34px, 5.4vw, 62px);
}
.display em { font-style: italic; color: var(--gold); }
.section-dark .display em { color: var(--gold-bright); }

h1.display { font-size: clamp(40px, 6.6vw, 76px); }

.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
}
.lede, .section-lede {
  font-size: clamp(16px, 1.6vw, 18px); color: var(--muted); max-width: 56ch; margin: 20px 0 0;
}
.section-head { margin-bottom: clamp(40px, 6vw, 72px); max-width: 760px; }
.section-head .section-lede { margin-top: 22px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: var(--r); border: 1px solid transparent;
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.btn-sm { padding: 11px 20px; font-size: 11px; letter-spacing: .12em; }
.btn-block { width: 100%; }
/* On a dark page the primary button is the light one — it carries the most
   weight on the page, so it gets the brightest surface. */
.btn-primary, .btn-light { background: var(--text); color: var(--deep); border-color: var(--text); }
.btn-primary:hover, .btn-light:hover { background: var(--gold); border-color: var(--gold); color: var(--deep); }
.btn-ghost, .btn-outline { border-color: var(--line); color: var(--text-soft); background: transparent; }
.btn-ghost:hover, .btn-outline:hover, .btn-outline[aria-pressed="true"] {
  border-color: var(--gold); background: var(--gold); color: var(--deep);
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 8, 6, .78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

/* Fully transparent over the hero video, then the blurred bar fades in on
   scroll. The whole page is dark now, so the type needs no colour switch. */
@media (min-width: 1101px) {   /* matches the nav collapse breakpoint below */
  .site-header:not(.is-stuck) {
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; transition: height .4s var(--ease); }
.site-header.is-stuck .header-inner { height: 66px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linejoin: round; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--serif); font-size: 21px; letter-spacing: .06em; text-transform: uppercase; }
.brand-sub { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 30px; }
/* :not(.btn) matters — `.nav a` outranks `.btn-primary` on specificity, so
   without it the nav's dark link colour overrides the button's ivory text
   and the CTA renders near-black on near-black. */
.nav a:not(.btn) { font-size: 13px; color: var(--text-soft); position: relative; white-space: nowrap; }
.nav a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { margin-left: 6px; }

.nav-toggle { display: none; width: 44px; height: 44px; border: none; background: none; padding: 10px; }
.nav-toggle span { display: block; height: 1px; background: var(--text); margin: 6px 0; transition: transform .35s var(--ease), opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero (full-bleed video) ----------
   The clip is the emerald-cut cocktail ring: black ground, slow rotation.
   A constant dark background is what makes overlaid type readable — footage
   that swings between light and dark would not. */
.hero.hero-video {
  position: relative; overflow: hidden;
  min-height: clamp(540px, 78vh, 820px);
  display: flex; align-items: center;
  padding: clamp(80px, 10vh, 130px) 0;
  background: #0a0907;
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* The ring sits at roughly 71% across the padded frame. On a narrow screen a
   centred crop would land on the empty black half, so follow the subject. */
@media (max-width: 900px) {
  .hero-bg { object-position: 72% center; }
}
/* The clip is padded with black on the left, so the text column already sits
   on solid black and needs almost no help. This gradient only covers the text
   side and is fully transparent by 48% — the ring itself is never dimmed. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(10,9,7,.88) 0%,
    rgba(10,9,7,.62) 24%,
    rgba(10,9,7,.22) 40%,
    rgba(10,9,7,0)   48%);
}
/* Mobile override must sit AFTER the base .hero-scrim rule above — same
   specificity, so source order decides. Text runs full width on a phone, so
   the sideways gradient stops working; use an even veil instead. */
@media (max-width: 900px) {
  .hero-scrim {
    background: linear-gradient(180deg, rgba(10,9,7,.78) 0%, rgba(10,9,7,.84) 50%, rgba(10,9,7,.92) 100%);
  }
}

.hero-video .hero-inner { position: relative; z-index: 2; }
.hero-video .hero-copy { max-width: 46rem; }
/* slightly tighter than the default display size so the headline holds its
   intended two-line break instead of wrapping after "in" */
.hero-video h1.display { font-size: clamp(38px, 5.2vw, 66px); }
.hero-video .eyebrow { color: var(--gold-bright); }
.hero-video .display { color: #f6f1e8; }
.hero-video .display em { color: var(--gold-bright); }
.hero-video .lede { color: #cdc4b6; }

.hero-copy .lede { margin-top: 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.hero-meta li { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #a79d8e; }

/* jewelry line art */
.jw { width: 92px; height: 92px; fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.jw-lg { width: 170px; height: 170px; stroke-width: .9; }

/* ---------- stats ---------- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(30px, 4vw, 46px) 20px; text-align: center; border-right: 1px solid var(--line-soft); }
.stat:last-child { border-right: none; }
.stat strong { display: block; font-family: var(--serif); font-size: clamp(26px, 3.2vw, 38px); font-weight: 300; line-height: 1; }
.stat strong span { color: var(--gold); }
.stat-label { display: block; margin-top: 12px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--surface); padding: clamp(28px, 3.4vw, 44px); transition: background .45s var(--ease); }
.card:hover { background: var(--surface-3); }
.card-num { font-size: 10.5px; letter-spacing: .2em; color: var(--gold); }
.card h3 { font-family: var(--serif); font-size: 25px; margin: 16px 0 12px; }
.card p { color: var(--muted); font-size: 15px; margin: 0; }

/* ---------- 3D viewer ---------- */
.viewer-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(36px, 6vw, 76px); align-items: center; }
.tick-list { margin: 28px 0 0; display: grid; gap: 12px; }
.tick-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--text-soft); }
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 9px; height: 9px;
  border: 1px solid var(--gold-bright); transform: rotate(45deg);
}
.viewer-note { margin-top: 30px; font-size: 12.5px; color: var(--muted); }
.viewer-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--gold-bright); }

.viewer-stage { display: flex; flex-direction: column; gap: 18px; }
.viewer-canvas-wrap {
  position: relative; aspect-ratio: 1/1; max-height: 560px;
  background: radial-gradient(ellipse at 50% 38%, #2b261f 0%, #16130f 68%);
  border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden;
}
#ringCanvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#ringCanvas.is-dragging { cursor: grabbing; }
.viewer-loading, .viewer-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--muted); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
}
.viewer-loading.is-hidden { opacity: 0; pointer-events: none; transition: opacity .5s; }
.spinner { width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.15); border-top-color: var(--gold-bright); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.viewer-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #7d7468;
  transition: opacity .6s var(--ease);
}
.viewer-hint.is-hidden { opacity: 0; }

.viewer-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.swatch i { width: 12px; height: 12px; border-radius: 50%; background: var(--m); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.swatch:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.swatch.is-active { color: var(--text); border-color: var(--gold); }

/* ---------- showreel ---------- */
.reel { position: relative; margin: 0; border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; background: #000; }
.reel-video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.reel-play {
  position: absolute; inset: 0; width: 100%; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(180deg, rgba(14,12,10,.15), rgba(14,12,10,.55));
  color: #f2ece2; transition: background .4s var(--ease);
}
.reel-play:hover { background: linear-gradient(180deg, rgba(14,12,10,.05), rgba(14,12,10,.45)); }
.reel-play svg { width: 34px; height: 34px; fill: currentColor; }
.reel-play span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.reel-play::before {
  content: ''; position: absolute; width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); transition: transform .5s var(--ease), border-color .4s var(--ease);
}
.reel-play:hover::before { transform: scale(1.08); border-color: var(--gold-bright); }

/* ---------- process clip ---------- */
.process-clip { margin: clamp(32px, 4vw, 52px) 0 0; }
.process-video {
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain;
  background: #14110e; border: 1px solid var(--line); border-radius: var(--r);
}
.process-clip figcaption {
  margin-top: 14px; font-size: 13px; color: var(--muted); max-width: 62ch;
}

/* ---------- portfolio ---------- */

/* Masonry via multi-column. The work is a mix of 16:9, square and portrait
   renders, and several compositions (wide bands, necklaces, the three-metal
   lineup) can't be cropped to a uniform tile without cutting the piece —
   so the layout flows around each piece's real shape instead. */
.work-grid {
  columns: 3;
  column-gap: clamp(16px, 2vw, 28px);
}
.work {
  margin: 0 0 clamp(16px, 2vw, 28px);
  width: 100%;
  display: inline-block;          /* keeps the figure whole inside a column */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.work.is-hidden { display: none; }
.work-media {
  position: relative; width: 100%; padding: 0;
  aspect-ratio: 4/5; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(155deg, #16120f 0%, #0e0b09 62%, #070605 100%);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .45s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
  cursor: zoom-in;
}
.work-media.is-placeholder { cursor: pointer; }
.work:hover .work-media {
  /* a dark shadow is invisible on a dark page — lift the tile with a warm glow */
  border-color: var(--gold); transform: translateY(-4px);
  box-shadow: 0 22px 46px -30px rgba(197, 162, 137, .32);
}
.work:hover .jw { opacity: 1; }

/* stacked images — main, hover crossfade, turntable frames */
.work-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .55s var(--ease), transform .9s var(--ease);
}
.work-img-hover, .work-img-spin { opacity: 0; }
.work:hover .work-img { transform: scale(1.045); }
.work:hover .work-img-hover { opacity: 1; }
.work-media.is-spinning .work-img-spin { opacity: 1; transform: none; }
.work-media.is-spinning .work-img:not(.work-img-spin) { opacity: 0; }

/* hover video preview */
.work-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s var(--ease); pointer-events: none;
}
.work-media.is-playing .work-video { opacity: 1; }
.work-media.is-playing .work-img { opacity: 0; }

.work-badge {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(22,19,15,.72); color: var(--gold-pale);
  font-size: 9.5px; letter-spacing: .16em; font-weight: 500;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.work-media.is-loading::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: sweep 1s linear infinite;
}
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.work figcaption { padding: 18px 2px 0; }
.work h3 { font-family: var(--serif); font-size: 21px; }
.work p { margin: 5px 0 0; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.work-empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* featured pieces (the showreel, the CAD build) run the full width.
   column-span only applies to block-level boxes, so override inline-block. */
.work.is-wide { column-span: all; display: block; margin-bottom: clamp(22px, 3vw, 36px); }
.work.is-wide .work-media { aspect-ratio: 16/9; }
.work-media.fit-contain { background: #14110e; }
.work-media.fit-contain .work-img,
.work-media.fit-contain .work-video { object-fit: contain; }
@media (max-width: 620px) {
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px); background: rgba(14, 12, 10, .93);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .26s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lb-panel {
  width: min(1000px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 18px;
  transform: scale(.975) translateY(8px); transition: transform .3s var(--ease);
}
.lightbox.is-open .lb-panel { transform: none; }

.lb-stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r);
  overflow: hidden;
}
.lb-stage img, .lb-video { max-width: 100%; max-height: min(70vh, 640px); object-fit: contain; display: block; }
.lb-video { width: 100%; background: #000; }
.lb-stage .jw-lg { stroke: var(--gold-bright); }
.lb-placeholder {
  position: absolute; bottom: 22px; margin: 0;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #7d7468;
}
.lb-stage.is-spin { min-height: 340px; }
.lb-spin { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.lb-spin:active { cursor: grabbing; }
.lb-spinhint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); margin: 0;
  padding: 6px 14px; border-radius: 999px; background: rgba(22,19,15,.7);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-pale);
  transition: opacity .4s var(--ease); pointer-events: none;
}
.lb-spinhint.is-hidden { opacity: 0; }

.lb-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lb-title { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 27px); color: #f2ece2; }
.lb-meta { margin: 4px 0 0; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.lb-nav { display: flex; align-items: center; gap: 14px; }
.lb-count { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-prev, .lb-next, .lb-close {
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
  background: transparent; color: #e8e1d6; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.lb-prev:hover, .lb-next:hover, .lb-close:hover { background: var(--gold); border-color: var(--gold); color: var(--deep); }
.lb-close { align-self: flex-end; margin-bottom: -4px; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lb-panel, .work-img { transition: none; }
  .work-media.is-loading::after { animation: none; }
}

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.step { background: var(--surface-2); padding: clamp(26px, 3vw, 38px) clamp(18px, 2vw, 26px); }
.step-num { font-family: var(--serif); font-size: 34px; color: var(--gold-deep); display: block; line-height: 1; }
.step h3 { font-family: var(--serif); font-size: 21px; margin: 14px 0 10px; }
.step p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- capabilities ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px, 5vw, 72px); margin: 0; }
.spec { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); padding-top: 4px; }
.spec dd { margin: 0; font-size: 15px; color: var(--text-soft); }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); }
.quote { margin: 0; background: var(--surface-2); border: 1px solid var(--line); padding: clamp(26px, 3vw, 38px); border-radius: var(--r); }
.quote p { font-family: var(--serif); font-size: 19px; line-height: 1.55; font-style: italic; color: var(--text-soft); }
.quote footer { display: flex; flex-direction: column; gap: 2px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.quote strong { font-size: 13px; font-weight: 500; }
.quote footer span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font-family: var(--serif); font-size: clamp(19px, 2vw, 23px);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq-body { padding: 0 60px 26px 0; }
.faq-body p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.contact-list { margin-top: 40px; display: grid; gap: 20px; }
.contact-list li { display: grid; gap: 3px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.contact-label { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.contact-list a, .contact-list li > span:last-child { font-size: 16px; color: var(--text); }
.contact-list a:hover { color: var(--gold-bright); }

.contact-form { background: var(--surface-2); border: 1px solid var(--line-soft); padding: clamp(26px, 3.4vw, 42px); border-radius: var(--r); }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field label span[aria-hidden] { color: var(--gold); }
.field .hint { text-transform: none; letter-spacing: .02em; font-size: 10.5px; color: #6e6659; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); font-family: var(--sans); font-size: 15px; font-weight: 300;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: #6b6355; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.05); }
.field input.is-invalid, .field textarea.is-invalid { border-color: #c25f4e; }
.field select option { background: var(--surface-2); color: var(--text); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.contact-form .btn { margin-top: 8px; }
.form-status { margin: 14px 0 0; font-size: 13px; min-height: 1.2em; }
.form-status.is-ok { color: var(--gold-bright); }
.form-status.is-err { color: #d98376; }
.form-note { margin: 14px 0 0; font-size: 11.5px; color: #6e6659; }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: var(--muted); padding: clamp(50px, 6vw, 80px) 0 30px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--line-soft); }
.footer-brand .brand-name { color: var(--text); display: block; margin-bottom: 12px; }
.footer-brand p { font-size: 14px; max-width: 34ch; margin: 0; }
.footer-nav, .footer-social { display: grid; gap: 10px; align-content: start; }
.footer-nav a, .footer-social a { font-size: 13px; transition: color .3s var(--ease); }
.footer-nav a:hover, .footer-social a:hover { color: var(--gold-bright); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 26px; }
.footer-base p { margin: 0; font-size: 12px; }
.footer-base a:hover { color: var(--gold-bright); }

/* ---------- reveal on scroll ----------
   Only hidden when the .js class is present, so the page still renders
   fully if JavaScript is blocked or fails to load. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .spinner { animation: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .spec-grid { grid-template-columns: 1fr; }
}

/* The nav collapses to the menu button at 1100px rather than 900px: between
   those widths the full link row doesn't fit beside the logo, and links like
   "3D Viewer" were wrapping onto two lines. */
@media (max-width: 1100px) {
  .nav {
    position: fixed; inset: 0 0 auto; top: 66px; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px var(--gut) 28px; transform: translateY(-115%); transition: transform .45s var(--ease);
    max-height: calc(100vh - 66px); overflow-y: auto;
  }
  .nav.is-open { transform: none; box-shadow: 0 24px 40px -30px rgba(0,0,0,.6); }
  .nav a:not(.btn) { padding: 15px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
  .nav a:not(.btn)::after { display: none; }
  .nav-cta { margin: 20px 0 0; }
  .nav-toggle { display: block; }
}

@media (max-width: 900px) {
  .viewer-layout, .contact-layout { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .work-grid { columns: 2; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--line-soft); }
  .stat:nth-child(2n) { border-right: none; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .work-grid { columns: 1; }
  .spec { grid-template-columns: 1fr; gap: 6px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .viewer-controls { justify-content: flex-start; }
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .viewer-controls .btn { width: auto; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .nav-toggle, .viewer-stage, .filters, .contact-form { display: none !important; }
  body { background: #fff; }
  .section-dark, .site-footer { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}