/* Dynamic Design & Services, studio site. A portfolio for people who were sent by someone.
   Real stone from Dynamic's own footage carries the surfaces; layers move at different speeds. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/outfit-latin.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 200 600; font-display: swap; src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2"); }

:root {
  --page: #FBFBFA;
  --ink: #1D2235;            /* Dynamic deep navy */
  --ink-soft: #4F5568;
  --navy: #2F3E5F;
  --cyan: #2FA6DC;           /* shirt cyan: active marks only */
  --glass: rgb(255 255 255 / .62);
  --glass-line: rgb(255 255 255 / .7);
  --shadow-near: 0 1px 2px rgb(29 34 53 / .06), 0 6px 18px -8px rgb(29 34 53 / .22);
  --shadow-far: 0 2px 6px rgb(29 34 53 / .05), 0 30px 60px -28px rgb(29 34 53 / .45);
  --radius: 22px;
  --gutter: clamp(16px, 4vw, 64px);
  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --display: "Outfit", "Hanken Grotesk", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-padding-top: 80px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--page); color: var(--ink); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 60; }
.skip:focus { left: 8px; }

/* Type */
.display { font: 600 clamp(48px, 5.6vw, 80px)/.96 var(--display); letter-spacing: -0.032em; text-wrap: balance; }
.title { font: 500 clamp(32px, 3.6vw, 54px)/1.04 var(--display); letter-spacing: -0.022em; text-wrap: balance; }
.title--center { text-align: center; margin: 0 auto; max-width: 18ch; }
.title--light { color: #fff; }
.kicker { font-size: 14px; letter-spacing: .04em; color: var(--ink-soft); }

/* Soft buttons: a real marble face under a milky glaze */
.soft { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: .01em; color: var(--ink);
  background: linear-gradient(rgb(255 255 255 / .55), rgb(255 255 255 / .55)), url("../img/tex-calm-sm.webp") center / cover;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(29 34 53 / .06), 0 0 0 1px rgb(29 34 53 / .08), var(--shadow-near);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.soft:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 0 0 1px rgb(29 34 53 / .1), var(--shadow-far); }
.soft:active { transform: scale(.97); transition-duration: 100ms; }
.soft--glass { color: #fff; background: rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 0 1px rgb(255 255 255 / .22); }
.soft--glass:hover { background: rgb(255 255 255 / .22); }

/* Header: frosted, floats over everything */
.bar { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 40; display: flex; align-items: center; gap: 28px; height: 60px; padding: 0 12px 0 20px; border-radius: 999px;
  background: rgb(251 251 250 / .66); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 0 0 1px rgb(29 34 53 / .06); transition: box-shadow .3s ease, transform .5s var(--ease); }
.bar.scrolled { box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 0 0 1px rgb(29 34 53 / .06), var(--shadow-near); }
.bar.tucked { transform: translateY(calc(-100% - 16px)); }
.brand img { width: 108px; }
.nav { display: flex; gap: 26px; margin-left: 12px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-soft); transition: color .2s; }
.nav a:hover { color: var(--ink); }
.lang { display: flex; margin-left: auto; font-size: 13px; font-weight: 500; }
.lang button { background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink-soft); }
.lang button[aria-pressed="true"] { color: var(--ink); }
.nav-contact { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-size: 14px; transition: transform .1s ease-out, background-color .2s; }
.nav-contact:hover { background: var(--navy); }
.nav-contact:active, .lang button:active { transform: scale(.96); }

/* Hero */
.hero { position: relative; display: grid; grid-template-columns: 5fr 7fr; min-height: 100svh; padding: 96px var(--gutter) 32px; gap: clamp(20px, 3vw, 40px); align-items: stretch; isolation: isolate; }
.hero-stone { position: absolute; inset: 0 0 auto; height: 100%; z-index: -1; background: linear-gradient(rgb(251 251 250 / .5), rgb(251 251 250 / .85) 85%, var(--page)), url("../img/tex-calm.webp") center / cover; }
.hero-copy { display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; padding: clamp(28px, 3vw, 48px); border-radius: var(--radius); background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 var(--glass-line), 0 0 0 1px rgb(29 34 53 / .05), var(--shadow-far); }
.hero-sub { font: 400 clamp(20px, 1.8vw, 26px)/1.3 var(--display); color: var(--ink-soft); letter-spacing: -0.01em; }
.hero-copy .soft { align-self: flex-start; }
.hero-copy .kicker { margin-bottom: auto; }
.steps { list-style: none; padding: 0; margin-top: clamp(24px, 6vh, 64px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.step { display: block; width: 100%; background: none; border: 0; padding: 8px 0; text-align: left; cursor: pointer; transition: transform 100ms ease-out; }
.step:active { transform: scale(.97); }
.bar-line { display: block; height: 3px; border-radius: 3px; background: rgb(29 34 53 / .14); overflow: hidden; margin-bottom: 10px; }
.bar-line i { display: block; height: 100%; background: var(--cyan); transform: scaleX(var(--p, 0)); transform-origin: left; }
.step b { font: 500 15px var(--display); color: var(--ink-soft); transition: color .3s; }
.steps li.on .step b { color: var(--ink); }
.hero-plate { position: relative; border-radius: var(--radius); overflow: hidden; background: #2A2B30; box-shadow: var(--shadow-far); min-height: 60svh; }
.hero-plate > video, .hero-plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease; }
.film-toggle { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgb(20 24 38 / .4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; transition: transform 100ms ease-out; }
.film-toggle:active { transform: scale(.94); }
.film-toggle svg { width: 15px; height: 15px; }
.film-toggle .i-play, .film-toggle[aria-pressed="true"] .i-pause { display: none; }
.film-toggle[aria-pressed="true"] .i-play { display: block; }
.plate-note { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-size: 13px; letter-spacing: .02em; color: #fff; padding: 8px 14px; border-radius: 999px; background: rgb(20 24 38 / .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Stone */
.stone { position: relative; padding: clamp(120px, 14vw, 200px) 0 clamp(80px, 9vw, 120px); overflow: hidden; isolation: isolate; }
.stone-bg { position: absolute; inset: -12% 0; z-index: -1; background: linear-gradient(rgb(251 251 250 / .25), rgb(251 251 250 / .4)), url("../img/tex-grey.webp") center / cover; }
.stone-glass { width: min(640px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); text-align: center; background: rgb(251 251 250 / .72); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 1px 0 var(--glass-line), var(--shadow-far); }
.stone-glass p { margin-top: 18px; color: var(--ink-soft); }
.slabs { display: flex; gap: clamp(16px, 2vw, 28px); padding: clamp(56px, 7vw, 96px) var(--gutter) 0; justify-content: center; align-items: flex-end; }
.slab { flex: 0 1 260px; }
.slab-face { aspect-ratio: 3 / 4.4; border-radius: 16px; background: var(--tex) center / cover; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 0 1px rgb(29 34 53 / .06), var(--shadow-far); }
.slab--tall .slab-face { aspect-ratio: 3 / 5.2; }
.slab--low .slab-face { aspect-ratio: 3 / 3.8; }
.slab figcaption { margin-top: 12px; font-size: 14px; color: var(--ink); padding: 8px 14px; border-radius: 999px; display: inline-block; background: rgb(251 251 250 / .75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stone-note { text-align: center; margin-top: 36px; font-size: 13px; color: var(--ink); opacity: .8; }

/* Work chapters */
.work { padding: clamp(110px, 12vw, 180px) var(--gutter) clamp(80px, 9vw, 120px); }
.work > .title { margin-bottom: clamp(48px, 6vw, 96px); }
.chapter { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; margin-bottom: clamp(96px, 12vw, 180px); isolation: isolate; }
.chapter-slab { grid-column: 1 / 7; grid-row: 1; align-self: stretch; margin: 12% 0 -8% 0; border-radius: var(--radius); background: var(--tex) center / cover; z-index: -1; box-shadow: var(--shadow-near); }
.chapter-frame { grid-column: 3 / 8; grid-row: 1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-far); aspect-ratio: 4 / 5; }
.chapter-frame--wide { grid-column: 2 / 10; aspect-ratio: 16 / 10; }
.chapter-frame img { width: 100%; height: 100%; object-fit: cover; }
.caption { grid-column: 8 / 12; grid-row: 1; align-self: end; margin: 0 0 8% -10%; padding: 22px 26px; border-radius: 18px; display: grid; gap: 4px; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 var(--glass-line), 0 0 0 1px rgb(29 34 53 / .05), var(--shadow-far); }
.chapter-frame--wide + .caption { grid-column: 9 / 13; margin-left: -20%; }
.caption b { font: 500 24px var(--display); letter-spacing: -0.01em; }
.caption span { color: var(--ink-soft); font-size: 15px; }
.chapter--flip .chapter-slab { grid-column: 7 / 13; }
.chapter--flip .chapter-frame { grid-column: 6 / 11; }
.chapter--flip .chapter-frame--wide { grid-column: 4 / 12; }
.chapter--flip .caption { grid-column: 2 / 6; margin: 0 -10% 8% 0; }
.chapter--flip .chapter-frame--wide + .caption { grid-column: 1 / 5; margin-right: -20%; margin-left: 0; }
.more { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.more figure { border-radius: 14px; overflow: hidden; position: relative; aspect-ratio: 3 / 4; }
.more img { width: 100%; height: 100%; object-fit: cover; }
.more figcaption { position: absolute; left: 8px; bottom: 8px; font-size: 12px; padding: 6px 12px; border-radius: 999px; background: rgb(251 251 250 / .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Shop: cards stack like slabs */
.shop { padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(80px, 9vw, 140px); }
.shop > .title { margin-bottom: clamp(40px, 5vw, 72px); }
.stack { display: grid; gap: 24px; max-width: 1120px; margin: 0 auto; }
.card { position: sticky; top: calc(96px + var(--i) * 18px); height: min(72svh, 640px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-far); transform-origin: 50% 0; background: #2A2B30; }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card-glass { position: absolute; left: 20px; bottom: 20px; max-width: 380px; padding: 20px 24px; border-radius: 18px; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 var(--glass-line), var(--shadow-near); }
.card-glass b { font: 500 26px var(--display); letter-spacing: -0.015em; }
.card-glass p { margin-top: 4px; color: var(--ink-soft); font-size: 15px; }

/* People */
.people { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); padding: clamp(80px, 9vw, 140px) var(--gutter); align-items: center; }
.people-lead p { margin-top: 16px; color: var(--ink-soft); }
.people-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-far); }
.people-photo img { width: 100%; }
.crew { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 2.4fr; gap: 16px; align-items: start; margin-top: clamp(16px, 3vw, 40px); }
.crew figure { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-near); }
.crew figure:not(.crew-team) img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.crew figure:nth-child(2) { margin-top: 64px; }
.crew-team { position: relative; align-self: center; }
.crew-team figcaption { position: absolute; left: 12px; bottom: 12px; font-size: 13px; padding: 7px 14px; border-radius: 999px; background: rgb(251 251 250 / .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Close */
.close { position: relative; min-height: 88svh; display: grid; place-items: center; padding: 120px var(--gutter); overflow: hidden; isolation: isolate; }
.close-bg { position: absolute; inset: -10%; z-index: -1; background: linear-gradient(rgb(29 34 53 / .62), rgb(29 34 53 / .78)), url("../img/tex-grey.webp") center / cover; }
.close-glass { text-align: center; color: #fff; display: grid; justify-items: center; gap: 18px; padding: clamp(32px, 5vw, 64px); border-radius: 28px; background: rgb(255 255 255 / .08); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 0 0 1px rgb(255 255 255 / .12); }
.close-glass > p { font-size: 19px; opacity: .9; }
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.close-address { font-size: 14px; opacity: .8; text-underline-offset: 4px; }

.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 32px var(--gutter); background: var(--ink); color: #D3D8E2; font-size: 13px; }
.foot img { width: 104px; }
.foot a { text-decoration: none; }
.foot p { margin-left: auto; }

/* Reveal defaults: visible without JS; studio.js hands them to GSAP */
.js [data-reveal], .js [data-reveal-group] > * { opacity: 0; transform: translateY(40px); }

/* Phone */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .bar { top: 8px; left: 8px; right: 8px; height: 54px; gap: 10px; padding: 0 8px 0 16px; }
  .nav { display: none; }
  .brand img { width: 96px; }
  .hero { grid-template-columns: 1fr; padding: 74px 12px 16px; }
  .hero-plate { order: -1; min-height: 52svh; }
  .hero-copy { padding: 24px 20px; gap: 18px; }
  .display { font-size: clamp(42px, 12vw, 56px); }
  .stone { padding-top: 96px; }
  .slabs { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .slab { flex: 0 0 58vw; scroll-snap-align: center; }
  .chapter { grid-template-columns: 1fr; margin-bottom: 72px; }
  .chapter .chapter-slab, .chapter--flip .chapter-slab { grid-column: 1; margin: 18% -4% -6% 18%; }
  .chapter .chapter-frame, .chapter--flip .chapter-frame { grid-column: 1; margin-right: 12%; }
  .chapter .chapter-frame--wide, .chapter--flip .chapter-frame--wide { margin-right: 0; aspect-ratio: 4 / 3; }
  .chapter .caption, .chapter--flip .caption, .chapter-frame--wide + .caption, .chapter--flip .chapter-frame--wide + .caption { grid-column: 1; grid-row: 2; margin: -36px 8px 0 24px; }
  .more { grid-template-columns: repeat(2, 1fr); }
  .card { height: 64svh; top: calc(78px + var(--i) * 12px); }
  .people { grid-template-columns: 1fr; }
  .crew { grid-template-columns: 1fr 1fr; }
  .crew-team { grid-column: 1 / -1; }
  .crew figure:nth-child(2) { margin-top: 32px; }
  .foot p { margin-left: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar, .hero-copy, .stone-glass, .caption, .card-glass, .slab figcaption, .more figcaption, .crew-team figcaption, .plate-note, .film-toggle { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .plate-note, .film-toggle { background: var(--ink); }
  .close-glass, .soft--glass { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .hero-copy, .stone-glass, .caption, .card-glass { background: var(--page); box-shadow: 0 0 0 1px var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}