/* ==========================================================================
   belamimax – shared styles for both pages (index.html = Medical, beauty.html = Beauty)
   Monochrome base, ONE accent colour (blue). All colours, fonts, radii and spacing
   live in :root – change them there, not in the rules below.
   ========================================================================== */
:root {
  /* colour */
  --bg: #000000;            /* page background */
  --surface: #0c0c0d;       /* boxes behind images */
  --card: #141416;          /* step cards, form */
  --fill: rgba(255, 255, 255, .08);   /* inputs, pills, soft buttons */
  --fill-hover: rgba(255, 255, 255, .15);
  --line: rgba(255, 255, 255, .12);   /* hairlines and dividers */
  --fg: #f5f5f7;            /* main text */
  --fg-2: #a1a1a6;          /* secondary text */
  --fg-3: #6e6e73;          /* tertiary text, numbers */
  --accent: #2997ff;        /* the one accent: links, eyebrow numbers, focus, step numbers */
  --accent-strong: #0071e3; /* filled buttons, lens tag */
  --accent-hover: #0a84ff;
  --danger: #ff6b5e;        /* form errors only */

  /* type */
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* shape and rhythm */
  --r-lg: 22px;             /* hero stage, slider, form, cards */
  --r: 14px;                /* work tiles */
  --r-sm: 10px;             /* case thumbnails */
  --gap: 14px;              /* grid gaps */
  --section: clamp(104px, 14vw, 200px);  /* space between sections */
  --maxw: 2200px;           /* hard cap only for very wide monitors */
  --pad: clamp(16px, 4vw, 72px);  /* side margin grows with the screen */
  --ease: cubic-bezier(.22, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.5 var(--font-text);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before { /* covers the notch area so content never shows behind the status bar */
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: 1.02; }
.lede { margin: 20px 0 0; max-width: 36em; color: var(--fg-2); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.42; text-wrap: pretty; }
.small { font-size: .8125rem; color: var(--fg-3); letter-spacing: 0; }
.nw { white-space: nowrap; }

/* buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .74em 1.45em; border: 0; border-radius: 980px;
  background: var(--accent-strong); color: #fff;
  font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background .25s, transform .25s var(--ease);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(.97); }
.btn.sm { padding: .42em 1em; font-size: .8125rem; }
.btn.soft { background: var(--fill); color: var(--fg); }
.btn.soft:hover { background: var(--fill-hover); }
.link { color: var(--accent); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: .3em; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link i { font-style: normal; transition: transform .3s var(--ease); }
.link:hover i { transform: translateX(3px); }

/* ---------- nav: identical on all three pages – Medical · Beauty · Tech · Contact.
   The current page link carries aria-current="page" and gets a soft pill. ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(0, 0, 0, .66); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 52px; gap: 8px 16px; }
.brand { text-decoration: none; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -.045em; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { padding: .34em .95em; border-radius: 980px; text-decoration: none; font-size: .8125rem; color: var(--fg-2); transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--fg); }
.nav-links a[aria-current="page"] { color: var(--fg); background: var(--fill-hover); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 6px; }
.nav-anchor { padding: .34em .8em; text-decoration: none; font-size: .8125rem; color: var(--fg-2); transition: color .2s; }
.nav-anchor:hover { color: var(--fg); }
@media (max-width: 700px) {
  /* phones: brand + Contact on the first line, the page switch centred on a second line */
  .nav-in { grid-template-columns: 1fr auto; padding-top: 8px; padding-bottom: 8px; }
  .nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
}

/* ---------- hero: wordmark ---------- */
.hero { padding-top: clamp(28px, 4vw, 56px); }
/* The wordmark is sized by JS (fitWordmark) to span the full content width; the clamp is only a first guess. */
.wordmark {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4rem, 20vw, 18rem); line-height: .86; letter-spacing: -.06em;
  white-space: nowrap; overflow: hidden; padding: 0 0 .06em;
}
.wordmark .ch { display: inline-block; animation: lineUp 1.15s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
.hero-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 32px; margin-top: clamp(18px, 2.4vw, 30px); }
.tagline { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; animation: fadeUp 1s .45s var(--ease) both; }
.tagline span { color: var(--fg-3); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; animation: fadeUp 1s .6s var(--ease) both; }

/* ---------- hero: detail lens (magnifier) ----------
   One high-resolution render. .lens-zoom holds a second copy of the same image, scaled by --lm
   around the lens centre (--lx/--ly) and clipped to a circle of radius --lr.
   Desktop: the lens follows the mouse. Touch: it drifts on its own. Scrolling grows the circle
   and brings the zoom back to 1×, so the lens dissolves into the full frame.
   The magnification is set per page with data-zoom on .lens. Use an image at least 3000 px wide. */
.lens {
  position: relative; margin-top: clamp(26px, 3.6vw, 44px);
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface); isolation: isolate;
  aspect-ratio: 2400 / 1000; touch-action: pan-y;
  animation: cardIn 1.4s .25s var(--ease) both;
}
@media (hover: hover) and (pointer: fine) { .lens { cursor: none; } }
.lens-media { position: absolute; inset: 0; }
.lens-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--lens-pos, 50% 50%); pointer-events: none; -webkit-user-drag: none; user-select: none; }
.lens-zoom { position: absolute; inset: 0; clip-path: circle(var(--lr, 16%) at var(--lx, 62%) var(--ly, 46%)); }
.lens-zoom img { transform-origin: var(--lx, 62%) var(--ly, 46%); transform: scale(var(--lm, 2)); }
.lens-ring {
  position: absolute; left: var(--lx, 62%); top: var(--ly, 46%);
  width: calc(var(--lr, 140px) * 2); height: calc(var(--lr, 140px) * 2);
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 18px 60px rgba(0, 0, 0, .45), inset 0 0 30px rgba(0, 0, 0, .25);
  opacity: var(--ring-o, 1); pointer-events: none;
}
.lens-meta { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 12px; padding-inline: 4px; }
@supports (animation-timeline: view()) {
  .lens-media { animation: zoom linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
}
@media (max-width: 700px) { .lens { aspect-ratio: 4 / 3; } }

@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes zoom { from { transform: scale(1.12); } to { transform: scale(1); } }

/* ---------- shared section pieces ---------- */
section.block { padding-top: var(--section); }
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); max-width: 980px; }
/* scroll reveal: blocks slide up as they enter the viewport (CSS only) */
@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 4% entry 38%; }
}
@keyframes reveal { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }

/* ---------- statement: words light up while scrolling (JS wraps words in .w) ---------- */
.statement { margin: 0; max-width: 1100px; font-family: var(--font-display); font-size: clamp(2rem, 5.4vw, 4.6rem); line-height: 1.04; font-weight: 600; letter-spacing: -.04em; text-wrap: pretty; }
.statement.js .w { color: #3a3a3d; transition: color .5s; }
.statement.js .w.on { color: var(--fg); }

/* ---------- work tiles ----------
   Each .work-row is a grid. Tiles in one row get equal heights because their --ar
   (aspect ratio) values are proportional to the column fractions:
   cols-7-5 → 1.75 / 1.25, cols-5-7 → 1.25 / 1.75, cols-2 and cols-3 → the same value for every tile. */
.work-row { display: grid; gap: var(--gap); }
.work-row + .work-row { margin-top: clamp(28px, 3vw, 40px); }
.cols-1 { grid-template-columns: 1fr; }
.cols-7-5 { grid-template-columns: 7fr 5fr; }
.cols-5-7 { grid-template-columns: 5fr 7fr; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; color: inherit; }
.tile .ph { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--surface); aspect-ratio: var(--ar, 4 / 3); }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1.1s var(--ease); }
.tile:hover img { transform: scale(1.04); }
.plus { position: absolute; right: 14px; bottom: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(20, 20, 22, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; }
.plus svg { width: 14px; height: 14px; stroke: var(--fg); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.tile:hover .plus { transform: rotate(90deg); background: var(--fg); }
.tile:hover .plus svg { stroke: #000; }
/* two-line caption under each tile: number · product / what the frame is for */
.tile .cap { display: block; margin-top: 12px; font-size: .9375rem; line-height: 1.35; }
.tile .cap .n { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.tile .cap b { font-weight: 600; }
.tile .cap em { display: block; font-style: normal; color: var(--fg-2); }
@media (max-width: 700px) {
  .cols-7-5, .cols-5-7, .cols-2, .cols-3 { grid-template-columns: 1fr; }
  .work-row + .work-row { margin-top: 28px; }
  .work-row { row-gap: 28px; }
  .tile .ph { aspect-ratio: 4 / 3; }
  .cols-1 .tile .ph { aspect-ratio: 2.4; } /* full-width frames keep their native ratio */
  .tile .ph.tall { aspect-ratio: 4 / 5; }  /* vertical packshots stay vertical on phones */
}

/* ---------- secondary cases (industrial on Medical, consumer tech on Beauty) ----------
   One line per product (number · title · field), then a strip of 4–5 frames.
   On phones the strip scrolls sideways inside itself – the page never scrolls sideways. */
.cases-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 24px; margin-top: clamp(72px, 9vw, 120px); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cases-head h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.cases-head p { margin: 0; color: var(--fg-2); }
.case { padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.case-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.case-line .t { font-family: var(--font-display); font-size: clamp(1.25rem, 2.3vw, 1.75rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.case-line .t em { font-family: var(--font-text); font-style: normal; font-size: .9375rem; font-weight: 400; color: var(--fg-2); letter-spacing: -.01em; margin-left: .7em; }
.case-line .f { color: var(--fg-2); font-size: .9375rem; }
.strip { display: grid; grid-template-columns: repeat(var(--count, 5), minmax(0, 1fr)); gap: 10px; }
.thumb { display: block; padding: 0; border: 0; background: var(--surface); border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .9s var(--ease); }
.thumb:hover img { transform: scale(1.06); }
@media (max-width: 700px) {
  .case-line { grid-template-columns: minmax(0, 1fr); }
  .case-line .f { display: none; }
  .case-line .t em { display: block; margin: 2px 0 0; }
  .strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .thumb { scroll-snap-align: start; }
}
.other { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; color: var(--fg-2); }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .93); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 64px max(16px, env(safe-area-inset-left, 0px)); }
.lb.open { display: flex; animation: lbIn .35s ease both; }
.lb img { max-width: min(1500px, 100%); max-height: 100%; object-fit: contain; border-radius: 12px; }
.lb .cp { position: absolute; left: 0; right: 0; bottom: max(22px, env(safe-area-inset-bottom, 0px)); text-align: center; font-size: .875rem; color: var(--fg-2); margin: 0; }
.lb button { position: absolute; border: 0; background: var(--fill); color: var(--fg); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background .25s; }
.lb button:hover { background: var(--fill-hover); }
.lb .x { top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.lb .pv { left: max(16px, env(safe-area-inset-left, 0px)); top: 50%; margin-top: -22px; }
.lb .nx { right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; margin-top: -22px; }
.lb svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- proof: compare slider, Medical page only (keep the ids – the slider script depends on them) ---------- */
.tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.seg { display: inline-flex; background: var(--fill); border-radius: 980px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--fg-2); padding: .45em 1.1em; font-size: .875rem; font-weight: 500; border-radius: 980px; cursor: pointer; transition: background .3s var(--ease), color .3s; }
.seg button[aria-pressed="true"] { background: var(--fg); color: #000; }
.seg button:not([aria-pressed="true"]):hover { color: var(--fg); }
.cmp { --p: 55%; position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); isolation: isolate; aspect-ratio: 2400 / 1000; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; transition: opacity .5s; }
.cmp .l { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.cmp .l[data-on="false"] { opacity: 0; }
.cmp .hd { position: absolute; top: 0; bottom: 0; left: var(--p); width: 56px; margin-left: -28px; display: grid; place-items: center; cursor: ew-resize; z-index: 3; }
.cmp .hd::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 24px rgba(255, 255, 255, .35); }
.knob { position: relative; width: 48px; height: 48px; border-radius: 50%; background: rgba(245, 245, 247, .94); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); display: grid; place-items: center; transition: transform .35s var(--ease); }
.knob svg { width: 22px; height: 22px; stroke: #1d1d1f; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmp:hover .knob, .cmp.drag .knob { transform: scale(1.12); }
.cmp .lab { position: absolute; top: 16px; z-index: 2; padding: .3em .85em; border-radius: 980px; background: rgba(20, 20, 22, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: .75rem; font-weight: 500; color: var(--fg); }
.cmp .lab.left { left: 16px; }
.cmp .lab.right { right: 16px; }
.cmp-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-inline: 4px; flex-wrap: wrap; }
@media (max-width: 700px) { .cmp { aspect-ratio: 4 / 3; } .cmp img { object-position: 58% 50%; } .cmp .lab { top: 12px; } }

/* ---------- what you get (Medical page) ---------- */
.get { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.get .sec-head { position: sticky; top: 96px; margin-bottom: 0; }
.specs { margin: 0; border-top: 1px solid var(--line); }
.spec { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--fg-2); }
.spec dd { margin: 0; font-weight: 500; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(48px, 6vw, 80px); }
.step { background: var(--card); border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 34px); min-height: 270px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.step b { font-family: var(--font-display); font-size: clamp(3.6rem, 7vw, 5.6rem); line-height: .9; font-weight: 700; letter-spacing: -.05em; color: var(--accent); }
.step h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 8px; }
.step p { margin: 0; color: var(--fg-2); min-height: 3em; }
@media (max-width: 900px) { .get { grid-template-columns: 1fr; } .get .sec-head { position: static; } }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .step { min-height: 0; gap: 24px; } .step p { min-height: 0; } }
@media (max-width: 480px) { .spec { grid-template-columns: 1fr; gap: 4px; } }


/* ---------- contact form (one screen, both pages) ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact .sec-head { margin-bottom: 0; }
.form { background: var(--card); border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 40px); }
.fields { display: flex; flex-direction: column; gap: 18px; }
label.f { display: block; margin-bottom: 8px; font-size: .875rem; font-weight: 600; letter-spacing: -.005em; }
label.f span { color: var(--fg-3); font-weight: 400; }
.fld { width: 100%; background: var(--fill); border: 1px solid transparent; border-radius: 12px; padding: .8em 1em; font-size: 1rem; transition: border-color .25s, background .25s, box-shadow .25s; }
.fld::placeholder { color: var(--fg-3); }
.fld:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 4px rgba(41, 151, 255, .18); }
.fld[aria-invalid="true"] { border-color: var(--danger); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.err { min-height: 1.3em; margin: -6px 0 0; color: var(--danger); font-size: .875rem; }
.form-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; }
.ok { display: none; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 340px; justify-content: center; }
.ok.show { display: flex; animation: okIn .6s var(--ease) both; }
.ok svg { width: 72px; height: 72px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ok circle { stroke-dasharray: 170; stroke-dashoffset: 170; animation: draw 1s .1s var(--ease) forwards; }
.ok path { stroke-dasharray: 44; stroke-dashoffset: 44; animation: draw .6s .75s var(--ease) forwards; }
.ok h3 { font-size: 1.6rem; }
.ok p { margin: 0; color: var(--fg-2); max-width: 42ch; }
.ok-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
@keyframes okIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.mail { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--fg-2); }
.mail-text { color: var(--fg); font-weight: 500; text-decoration: none; }
.mail-addr { display: inline-flex; align-items: center; gap: 2px; }
.copy { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--fg-2); cursor: pointer; transition: color .2s, background .2s; }
.copy:hover { color: var(--fg); background: var(--fill); }
.copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.copy .tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); padding: .25em .75em; border-radius: 980px; background: var(--fg); color: #000; font-size: .75rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.copy.copied .tip { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer { margin-top: var(--section); border-top: 1px solid var(--line); padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px)); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: .8125rem; color: var(--fg-3); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .lens-media { animation: none !important; }
}

/* ---------- video clips ----------
   <video data-src="video/…mp4"> is loaded by site.js. It fades in once the file has loaded,
   plays while on screen (and on hover where data-hover-play is set) and pauses off screen.
   A wrapper with data-video-block stays hidden until its video loads, so a missing file hides the
   whole slot. A .clip with a fallback <img> inside always shows; the video covers it when present. */
.clip { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--surface); aspect-ratio: var(--ar, 1600 / 666); }
.clip img, .clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.clip video { opacity: 0; transition: opacity .6s var(--ease); }
.clip.ready video { opacity: 1; }
[data-video-block]:not(.has-video) { display: none !important; }
.case .clip { margin-bottom: 10px; }
.thumb.vid { position: relative; cursor: default; }
.thumb.vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.motion-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--gap); margin-top: clamp(28px, 3vw, 40px); }

/* ---------- Tech: "from CAD to final frame" (one device, up to three steps) ----------
   Steps whose video is missing are hidden; the numbers re-count automatically (CSS counter). */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--gap); counter-reset: step; }
.flow-step { counter-increment: step; background: var(--card); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.flow-step .clip { border-radius: 0; --ar: 4 / 3; }
.flow-text { padding: clamp(20px, 2.4vw, 30px); }
.flow-text::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 14px; font-family: var(--font-display); font-size: 2.4rem; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--accent); }
.flow-text h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); margin-bottom: 8px; }
.flow-text p { margin: 0; color: var(--fg-2); }
/* while no step clip exists, the final frame is shown alone as a wide card */
.flow:not(:has(.has-video)) .flow-step .clip { --ar: 2.4; }

/* About: name with role */
/* Motion on Medical: 12:5 frames, first full width, the other two side by side; one per row on phones */
.motion-row.m3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.motion-row.m3 .clip:first-child { grid-column: 1 / -1; }
@media (max-width: 700px) { .motion-row.m3 { grid-template-columns: 1fr; } }

/* Medical Microscope: render buttons share the 12:5 frame of the clips */
.shot { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; border-radius: var(--r); background: var(--surface); aspect-ratio: 12 / 5; cursor: zoom-in; color: inherit; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot:hover .plus { transform: rotate(90deg); background: var(--fg); }
.shot:hover .plus svg { stroke: #000; }

/* Beauty Motion: every clip keeps its own ratio, no cropping. Top row 16:9 + 1:1 (same height), bottom row three 9:16 */
.bmotion { display: grid; gap: var(--gap); }
.bm-top { display: grid; grid-template-columns: 16fr 9fr; gap: var(--gap); align-items: start; }
.bm-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.bmotion .clip { margin: 0; }
@media (max-width: 700px) { .bm-top, .bm-bottom { grid-template-columns: 1fr; } }

/* ---------- preloader: a bold 0-100 counter, shown once per page per session ---------- */
html.pre-on { overflow: hidden; }
html.pre-on *, html.pre-on *::before, html.pre-on *::after { animation-play-state: paused !important; }
/* the intro waits for the exit: wordmark at 0.35 s, menu, tagline and buttons next; the first screen is complete by 1.8 s */
html.pre-on.pre-d .wordmark .ch { animation-play-state: running !important; }
html.pre-on.pre-e .tagline, html.pre-on.pre-e .hero-actions { animation-play-state: running !important; }
html.pre-run.pre-d .wordmark .ch { animation-duration: .9s !important; animation-delay: calc(var(--i) * 30ms) !important; }
html.pre-run.pre-e .tagline { animation-duration: .7s !important; animation-delay: .1s !important; }
html.pre-run.pre-e .hero-actions { animation-duration: .7s !important; animation-delay: .2s !important; }
html.pre-run .lens { animation: none !important; }               /* the hero frame is simply there when the screen lifts */
html.pre-run .nav { transition: opacity .6s cubic-bezier(.76, 0, .24, 1), transform .6s cubic-bezier(.76, 0, .24, 1); }
html.pre-run:not(.pre-e) .nav { opacity: 0; transform: translateY(-8px); }
.pre { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--bg, #000); color: var(--fg); }
.pre.exit { pointer-events: none; }
.pre b { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: 0; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .pre b { font-size: 18px; } }

/* ---------- thumbnail edit mode (only with the secret address parameter) ---------- */
.edit-on .tile img, .edit-on .thumb img { transform: none !important; transition: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.edit-on .tile .ph, .edit-on .thumb { outline: 1px dashed rgba(41, 151, 255, .55); outline-offset: -1px; touch-action: none; }
.edit-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 10px 12px 10px 16px; border-radius: 16px; background: rgba(28, 28, 30, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--fg); font-size: .8125rem; }
.edit-bar code { max-width: min(60vw, 640px); max-height: 5.2em; overflow: auto; white-space: pre; font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--fg-2); }
.edit-bar button { flex: none; padding: .55em 1.1em; border: 0; border-radius: 980px; background: var(--accent-strong); color: #fff; font: inherit; font-weight: 500; cursor: pointer; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: clamp(300px, 34vw, 560px) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
section.block#about { padding-top: clamp(72px, 9vw, 120px); }
.about-photo { margin: 0; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); aspect-ratio: 4 / 5; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.about.no-photo { grid-template-columns: minmax(0, 1fr); } /* photo file missing → text-only layout */
.about-text { max-width: 46em; }
.about-text p.about-id { display: flex; flex-direction: column; gap: 6px; margin: 0 0 clamp(22px, 2.4vw, 36px); line-height: 1.15; color: var(--fg-3); }
.about-text p.about-id strong { color: var(--fg); font-family: var(--font-display); font-size: clamp(1.7rem, 2.8vw, 2.8rem); font-weight: 600; letter-spacing: -.03em; }
.about-text p.about-id span { color: var(--fg-3); font-size: clamp(1rem, 1.2vw, 1.15rem); }
.about-text p.about-copy { margin: 0; max-width: none; color: var(--fg-2); font-size: clamp(1.15rem, 1.65vw, 1.65rem); line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; }
.about-text strong { color: var(--fg); font-weight: 500; }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; align-items: start; } .about-photo { width: min(100%, 340px); } }

/* ---------- optical alignment of large type ---------- */
h2, .statement { margin-left: -.04em; }
@media (min-width: 901px) { .contact .sec-head h2 { margin-top: -.14em; } }

/* hide page scrollbar */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }