/* ==========================================================================
   Archlane · site styles (Home, About, Works, Contact)
   Built from the 1416px desktop artboards; every section reflows down to 320px.
   ========================================================================== */

:root {
  --ink: #1c1916;
  --ink-soft: #2e2a26;
  --muted: #736d65;
  --line: #d9d4cb;
  --paper: #f4f3ef;
  --night: #1f140e;
  --night-line: rgba(233, 219, 200, .18);
  --night-text: #ab9d8d;
  --cream: #eee6db;
  --gold: #b8976a;
  --white: #fff;

  --sans: "Jost", "Century Gothic", "Futura", "Avenir Next", system-ui, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --heading: "Syne", "Jost", "Century Gothic", system-ui, sans-serif;   /* every heading, site-wide */

  --gutter: clamp(20px, 6.36vw, 120px);   /* 90px at the 1416px artboard */
  --max: 1680px;
  --nav-h: 72px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --error: #a3432c;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--heading); }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }

.shell {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: var(--white);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transition: top .2s;
}
.skip:focus { top: 12px; }

/* Shared small parts */
.eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: .45; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 6px;
}
.arrow-link svg { width: 18px; height: 11px; transition: transform .45s var(--ease); }
.arrow-link:hover svg, .arrow-link:focus-visible svg { transform: translateX(6px); }

/* Brand lockup: the studio's logo exactly as drawn - mark over wordmark, one shape.
   Sized by height so it always sits inside the nav bar with room to breathe. */
.brand { display: inline-flex; color: var(--ink); }
.brand__logo { display: block; height: 52px; width: auto; aspect-ratio: 144.58 / 100; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow .35s var(--ease);
}
.nav.is-scrolled, .nav.is-open { box-shadow: 0 1px 0 rgba(28, 25, 22, .08); }
.nav__in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.nav__links { display: flex; gap: clamp(28px, 4.3vw, 64px); }
.nav__links a {
  position: relative; padding-block: 6px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: .16em; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current="page"] { color: var(--ink); }

.burger { display: none; width: 44px; height: 44px; margin-right: -10px; position: relative; }
.burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink);
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }

.drawer {
  display: flex; flex-direction: column;
  padding: 4px var(--gutter) 24px;
  border-top: 1px solid var(--line);
  background: var(--white);
}
.drawer[hidden] { display: none; }
.drawer a {
  padding-block: 16px; border-bottom: 1px solid var(--line);
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  animation: drawerIn .45s var(--ease) both;
}
.drawer a:nth-child(2) { animation-delay: .05s; }
.drawer a:nth-child(3) { animation-delay: .1s; }
.drawer a[aria-current="page"] { color: var(--muted); }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .nav__links { display: none; }
  .burger { display: block; }
  .brand__logo { height: 44px; }
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
/* A screen-filling panel under the nav. The frame always runs the full content
   width, edge to edge with the logo and the menu; on short screens it gets
   shallower rather than narrower (the film is cover-cropped, never squashed). */
.hero {
  --hero-pad: clamp(16px, 3vw, 44px);
  --panel-h: calc(100vh - var(--nav-h));
  display: flex; align-items: center;
  min-height: var(--panel-h);
  padding-block: 0 var(--hero-pad);
}
@supports (height: 100svh) { .hero { --panel-h: calc(100svh - var(--nav-h)); } }
.hero > .shell { container-type: inline-size; }
.hero__frame {
  position: relative; overflow: hidden;
  width: 100%;
  aspect-ratio: 1234 / 635;
  height: min(calc(100cqw * 635 / 1234), calc(var(--panel-h) - var(--hero-pad)));
  background: #c8b095;
  box-shadow: 3px 7px 12px -3px rgba(40, 26, 14, .45);
}
@supports (width: 1cqw) { .hero__frame { aspect-ratio: auto; } }
.hero__media { position: absolute; inset: 0; animation: heroIn 2.4s var(--ease) both; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: translate3d(0, var(--shift, 0px), 0) scale(1.06);
  will-change: transform;
}
@keyframes heroIn { from { opacity: 0; transform: scale(1.06); } }

/* The film sits on the still and only fades in once frames are actually playing */
.hero__video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__video.is-playing { opacity: 1; }

.hero__title {
  position: absolute; left: 50%; top: 15%;
  width: 92%;
  transform: translateX(-50%);
  padding-left: .3em;                 /* balances the trailing letter-space */
  text-align: center;
  font-size: clamp(14px, 1.78vw, 30px);
  font-weight: 300; line-height: 1.7;
  letter-spacing: .3em; word-spacing: .55em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 22px rgba(90, 58, 24, .35);
}
.hero__title .w {
  display: inline-block;
  animation: wordIn 1.3s var(--ease) both;
  animation-delay: calc(.55s + var(--i) * .13s);
}
@keyframes wordIn { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }

@media (max-width: 1024px) {
  .hero__frame { height: min(calc(100cqw / 1.5), calc(var(--panel-h) - var(--hero-pad))); }
}
@media (max-width: 640px) {
  /* Phones: a tall card that fills the screen */
  .hero__frame { aspect-ratio: auto; height: min(calc(var(--panel-h) - var(--hero-pad)), 170vw); }
  .hero__img { object-position: 50% 50%; }
  .hero__title { top: 8%; width: 88%; font-size: 15px; line-height: 2.1; letter-spacing: .26em; word-spacing: .3em; }
}

/* ==========================================================================
   2 · FILM LOOP
   ========================================================================== */
/* Edge to edge at the film's own 16:9, never taller than the screen under the nav
   (short screens crop top and bottom). The film fades in over its first frame. */
.loop {
  position: relative; overflow: hidden; background: #2a211c;
  height: min(56.25vw, calc(100vh - var(--nav-h)));
}
@supports (height: 100svh) { .loop { height: min(56.25vw, calc(100svh - var(--nav-h))); } }
.loop__poster, .loop__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loop__video { opacity: 0; transition: opacity 1s var(--ease); }
.loop__video.is-playing { opacity: 1; }

/* A soft shade under the handwriting (the sky behind it is bright) and a touch at the foot */
.loop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 24% at 50% 55%, rgba(20, 14, 10, .32), rgba(20, 14, 10, 0)),
    linear-gradient(rgba(20, 14, 10, .55), rgba(20, 14, 10, .16) 34%, rgba(20, 14, 10, 0) 55%, rgba(20, 14, 10, .2));
}
.loop__title {
  position: absolute; z-index: 1; left: 50%; top: 9%;
  width: min(72%, 1180px); transform: translateX(-50%);
}
.loop__title img { width: 100%; filter: invert(1) drop-shadow(0 0 3px rgba(0, 0, 0, .5)) drop-shadow(0 2px 14px rgba(0, 0, 0, .4)); }
.loop__play .reel__label { font-weight: 500; text-shadow: 0 0 8px rgba(0, 0, 0, .6), 0 1px 18px rgba(0, 0, 0, .5); }
.loop__play {
  --ring: clamp(54px, 5.1vw, 86px);
  position: absolute; z-index: 1; left: 50%; top: calc(52% - var(--ring) / 2);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--white);
}
@media (max-width: 600px) {
  .loop__title { top: 8%; width: 90%; }
  .loop__play { --ring: 46px; gap: 6px; }
  .loop__play .reel__label { font-size: 10.5px; }
  .loop__title img { filter: invert(1) drop-shadow(0 0 2px rgba(0, 0, 0, .7)) drop-shadow(0 1px 8px rgba(0, 0, 0, .45)); }
}

/* ==========================================================================
   2 · SHOWREEL (backup: its markup is parked in a <template> on the home page)
   ========================================================================== */
/* Always full width; never taller than the screen under the nav. On wide, short
   screens the art is cropped, weighted towards the top (--crop-y) so the handwriting
   and the torn window stay in view and the pencil sketch below takes the trim. */
.reel { background: linear-gradient(#dddddd, #c8c8c8); overflow: hidden; container-type: inline-size; }
.reel__stage {
  --crop-y: .22;
  position: relative; width: 100%;
  aspect-ratio: 1416 / 790;
  height: min(calc(100cqw * 790 / 1416), calc(100svh - var(--nav-h)));
  container-type: size;
}
@supports (width: 1cqw) and (height: 1svh) { .reel__stage { aspect-ratio: auto; } }
.reel__paper {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% calc(var(--crop-y) * 100%);
}

/* Placement measured off the artboard: 189px from the left, 105px down, 1006px wide */
.reel__title { position: absolute; left: 48.9%; top: 13.3%; width: 71.05%; transform: translateX(-50%); }
.reel__title img { width: 100%; }

/* "Written on" as it scrolls into view (the film loop's copy of the line too) */
.js [data-write] img {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%;
          mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  transition: -webkit-mask-position 2.8s cubic-bezier(.45, .05, .35, 1), mask-position 2.8s cubic-bezier(.45, .05, .35, 1);
}
.js [data-write].is-in img { -webkit-mask-position: 0 0; mask-position: 0 0; }

.reel__play {
  --ring: clamp(54px, 5.1vw, 86px);
  position: absolute; left: 49.65%; top: calc(47.3% - var(--ring) / 2);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--white);
}
.reel__ring {
  position: relative;
  width: var(--ring); height: var(--ring);
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .92); border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  transition: transform .5s var(--ease), background .4s var(--ease);
}
.reel__ring svg { width: 44%; margin-left: 8%; }
.reel__ring::after {                 /* slow pulse, so it reads as pressable */
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .8);
  animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
:is(.reel__play, .loop__play):is(:hover, :focus-visible) .reel__ring { transform: scale(1.08); background: rgba(255, 255, 255, .2); }
:is(.reel__play, .loop__play):focus-visible { outline: none; }
:is(.reel__play, .loop__play):focus-visible .reel__ring { outline: 1.5px solid var(--white); outline-offset: 6px; }
.reel__label {
  font-size: clamp(11px, 1vw, 15px); letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

/* Pin the handwriting and play button to the artwork itself, wherever the cover-crop
   lands: --iw / --ih are the rendered size of the paper image inside the stage.
   Horizontally the crop is centred; vertically it follows --crop-y (object-position). */
@supports (width: 1cqw) {
  .reel__title, .reel__play {
    --iw: max(100cqw, 100cqh * 1.7924);
    --ih: max(100cqh, 100cqw / 1.7924);
  }
  .reel__title {
    left: calc(50cqw + (.4887 - .5) * var(--iw));
    top: calc(var(--crop-y) * (100cqh - var(--ih)) + .1329 * var(--ih));
    width: calc(.7105 * var(--iw));
  }
  .reel__play {
    left: calc(50cqw + (.4965 - .5) * var(--iw));
    top: calc(var(--crop-y) * (100cqh - var(--ih)) + .4734 * var(--ih) - var(--ring) / 2);
  }
}

/* Narrower screens: crop in on the torn window, keep the handwriting above it */
@media (max-width: 900px) {
  .reel__stage { height: min(calc(100cqw / 1.45), calc(100svh - var(--nav-h))); }
  .reel__title { left: 50%; top: 7%; width: 88%; }
  .reel__play { left: 50%; }
}
@media (max-width: 600px) {
  .reel__stage { height: min(calc(100cqw / 1.15), calc(100svh - var(--nav-h))); }
  .reel__title { top: 6%; width: 94%; }
  /* smaller ring keeps the label over the forest, not the white torn edge */
  .reel__play { --ring: 46px; gap: 6px; }
  .reel__label { font-size: 10.5px; text-shadow: 0 0 6px rgba(0, 0, 0, .55), 0 1px 14px rgba(0, 0, 0, .5); }
}

/* ==========================================================================
   3 · SERVICES
   ========================================================================== */
.services {
  display: grid;
  grid-template-columns: 34% 1fr;      /* 482 / 1416 */
  min-height: clamp(600px, 55.8vw, 940px);
  min-height: max(600px, calc(100svh - var(--nav-h)));
  background: var(--white);
}
/* The whole film is the way into the Work page. It's cropped around the towers, which
   sit a little below centre; the cloudy top is darkened just enough to carry the label. */
.services__media { position: relative; display: block; overflow: hidden; background: #6b6763; }
.services__media :is(img, video) {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  transition: transform 1.8s var(--ease), opacity 1s var(--ease);
}
.services__media::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 32%; pointer-events: none;
  background: linear-gradient(rgba(28, 25, 22, .42), rgba(28, 25, 22, 0));
}
.services__media:is(:hover, :focus-visible) :is(img, video) { transform: scale(1.035); }

/* Section films (services, about) fade in over their first frame once playing */
:is(.services__video, .about__video) { opacity: 0; }
:is(.services__video, .about__video).is-playing { opacity: 1; }
.services__tag {
  position: absolute; left: 50%; top: 5%; z-index: 1; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  padding-block: 4px;
  font-size: clamp(15px, 1.2vw, 20px); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--white); text-shadow: 0 1px 14px rgba(20, 16, 12, .45);
  background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.services__tag svg { flex: 0 0 auto; width: 20px; height: 12px; transition: transform .5s var(--ease); }
.services__media:hover .services__tag, .services__media:focus-visible .services__tag { background-size: 100% 1px; }
.services__media:hover .services__tag svg, .services__media:focus-visible .services__tag svg { transform: translateX(4px); }

.services__body {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(56px, 7vw, 110px) clamp(24px, 5.4vw, 80px) clamp(56px, 7vw, 110px) clamp(24px, 8.2vw, 120px);
}

.services__title {
  font-weight: 500;
  font-size: clamp(24px, 2.55vw, 42px); line-height: 1.24;
  letter-spacing: .02em; text-transform: uppercase; text-align: center;
  color: #111;
}
.services__block { width: 100%; max-width: 960px; margin-top: clamp(56px, 10.2vw, 150px); }
.services__label {
  margin-bottom: 12px;
  font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; text-align: center;
  color: #4a4540;
}
.services__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  row-gap: clamp(34px, 4.7vw, 66px); column-gap: 16px;
  padding: clamp(28px, 2.5vw, 38px) clamp(8px, 1vw, 14px);
  border-block: 1px solid #6c6864;
}
.services__list li {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #2b2724;
}
.services__list li:nth-child(3n + 2) { text-align: center; }
.services__list li:nth-child(3n) { text-align: right; }

@media (max-width: 1100px) {
  .services { grid-template-columns: 38% 1fr; }
  .services__list { grid-template-columns: repeat(2, 1fr); }
  .services__list li:nth-child(n) { text-align: left; }
  .services__list li:nth-child(2n) { text-align: right; }
}
@media (max-width: 720px) {
  .services { grid-template-columns: 1fr; min-height: 0; }
  .services__media { aspect-ratio: 4 / 5; max-height: 78svh; width: 100%; }
  .services__media :is(img, video) { object-position: 50% 60%; }
  .services__body { padding: 64px var(--gutter) 72px; }
  .services__title br { display: none; }
  .services__block { margin-top: 48px; }
}
@media (max-width: 460px) {
  .services__list { grid-template-columns: 1fr; row-gap: 20px; padding-block: 26px; }
  .services__list li:nth-child(n) { text-align: center; }
}

/* ==========================================================================
   4 · ABOUT
   ========================================================================== */
.about {
  background: var(--paper);
  padding-block: clamp(48px, 4.3vw, 72px) clamp(44px, 3.2vw, 60px);
  border-top: 1px solid #e3e0d8;
}
.about__in {
  display: grid;
  grid-template-columns: minmax(0, 604fr) minmax(0, 542fr);
  column-gap: clamp(32px, 6.36vw, 110px);
  align-items: center;
}
.about__media {
  position: relative;
  aspect-ratio: 599 / 255; overflow: hidden; border-radius: 4px;
  background: #8b7a66;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.about__media :is(img, video) { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease), opacity 1s var(--ease); }
.about__media video { position: absolute; inset: 0; }
.about__media:hover :is(img, video) { transform: scale(1.04); }
.about__copy { max-width: 420px; }
.about__title {
  margin: 14px 0 18px;
  font-weight: 500;
  font-size: clamp(26px, 2.2vw, 36px); line-height: 1.2; letter-spacing: -.01em;
  color: var(--ink-soft);
}
.about__copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.75; color: var(--muted); max-width: 390px; }
.about__copy .arrow-link { margin-top: 24px; }

@media (max-width: 820px) {
  .about__in { grid-template-columns: 1fr; row-gap: 36px; }
  .about__media { aspect-ratio: 16 / 10; }
  .about__media :is(img, video) { object-position: 60% 50%; }
  .about__copy { max-width: 560px; }
}

/* ==========================================================================
   5 · CONTACT
   ========================================================================== */
.cta {
  background: #dcd7cc url("../assets/img/contact-bg.webp") 100% 100% / cover no-repeat;
  padding-block: clamp(40px, 3.3vw, 56px) clamp(44px, 3.8vw, 64px);
  color: var(--ink-soft);
}
.cta__in {
  display: grid;
  grid-template-columns: 1fr minmax(0, 405px);   /* info column starts 920px across */
  align-items: start; gap: 40px;
}
.cta__title {
  margin: 12px 0 14px;
  font-weight: 500;
  font-size: clamp(28px, 2.4vw, 40px); line-height: 1.15; letter-spacing: -.01em;
}
.cta__copy > p:not(.eyebrow) { max-width: 340px; font-size: 14px; line-height: 1.7; color: #756e64; }
.cta__copy .arrow-link { margin-top: 26px; }

.cta__info { display: grid; gap: 16px; padding-top: 42px; }
.cta__info li { display: flex; align-items: center; gap: 18px; font-size: 14px; color: #4a443d; }
.cta__info svg {
  flex: none; width: 18px; height: 18px;
  fill: none; stroke: #6f685f; stroke-width: 1.4; stroke-linejoin: round;
}
.cta__info a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.cta__info a:hover, .cta__info a:focus-visible { background-size: 100% 1px; }

@media (max-width: 760px) {
  .cta { background-position: 78% 100%; padding-block: 56px 64px; }
  .cta__in { grid-template-columns: 1fr; gap: 36px; }
  .cta__info { padding-top: 0; }
}

/* ==========================================================================
   Scroll-snap sections (every page)
   ========================================================================== */
/* Home: About grows to fill the last screen; Contact sits at its foot */
.panel { display: flex; flex-direction: column; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }
.panel > .about { flex: 1 0 auto; display: flex; align-items: center; }

/* On big screens snapping is "mandatory": each scroll glides to the next section
   (a section taller than the screen still scrolls freely inside). Phones and short
   windows get "proximity", which only settles when you stop near a section, so
   long content is never trapped. .snap--soft keeps proximity everywhere, for pages
   whose height changes in place (the Works tabs), where mandatory would jump. */
html.snap { scroll-snap-type: y proximity; }
@media (min-width: 900px) and (min-height: 620px) {
  html.snap:not(.snap--soft) { scroll-snap-type: y mandatory; }
}
.snap main > :is(section, .panel) { scroll-snap-align: start; }
/* Once main.js is running there, its eased section glide replaces native snapping */
html.snap.snap--glide { scroll-snap-type: none; scroll-behavior: auto; }

/* The footer is a resting place, never a destination: it only aligns on a page that
   already has sections of its own to snap between. Were it the sole snap target under
   "mandatory", the scroll would have nowhere to land but its end edge and would pin the
   page to its own bottom on load, unreachable by scrolling back up or reloading.
   Browsers without :has() simply skip the rule, which errs the safe way. */
.snap:has(main > :is(section, .panel)) .foot { scroll-snap-align: end; }

/* ==========================================================================
   6 · FOOTER
   ========================================================================== */
.foot { background: var(--night); color: var(--night-text); padding-block: 36px 28px; }
.foot__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px 40px; }

.foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(20px, 2.6vw, 44px); }
.foot__nav a { position: relative; padding-block: 4px; font-size: 12px; letter-spacing: .06em; transition: color .3s; }
.foot__nav a:hover, .foot__nav a:focus-visible, .foot__nav a[aria-current="page"] { color: var(--cream); }
.foot__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 10px; height: 1px; background: var(--gold); }

@media (max-width: 900px) {
  .foot__top { grid-template-columns: 1fr auto; }
  .foot__nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}
.brand--foot { flex-direction: column; align-items: flex-start; gap: 10px; color: var(--cream); }
.brand--foot .brand__logo { height: 66px; }
.brand__tag { font-size: 7.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }

.social { display: flex; gap: 16px; }
.social a { display: block; width: 20px; height: 20px; color: var(--cream); opacity: .85; transition: opacity .3s, transform .4s var(--ease); }
.social a:hover, .social a:focus-visible { opacity: 1; transform: translateY(-2px); }
.social svg { width: 100%; height: 100%; }

/* The artboard's rule breaks in the middle: long on the left, short on the right */
.foot__rule { display: flex; justify-content: space-between; margin: 32px 0 18px; }
.foot__rule span { height: 1px; background: var(--night-line); }
.foot__rule span:first-child { width: 41%; }
.foot__rule span:last-child { width: 14%; }

.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 11px; letter-spacing: .02em; }

@media (max-width: 560px) {
  .foot__rule span:first-child { width: 100%; }
  .foot__rule span:last-child { display: none; }
  .foot__base { flex-direction: column; }
}

/* ==========================================================================
   INNER PAGES · shared
   ========================================================================== */
.page-title, .section-title {
  font-weight: 500;
  line-height: 1.14; letter-spacing: .01em; text-transform: uppercase;
  color: var(--ink);
}
.page-title { font-size: clamp(32px, 3.4vw, 54px); }
.section-title { font-size: clamp(26px, 2.5vw, 40px); }

/* Page headlines rise out of a mask, line by line, on load */
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: inline-block; animation: lineUp 1.2s var(--ease) both; animation-delay: calc(.15s + var(--i) * .12s); }
@keyframes lineUp { from { transform: translateY(105%); } }

/* Photo-album corner mounts, as on the About artboard. Four triangles, one pseudo-element. */
.mounted { position: relative; }
.mounted::after {
  --c: clamp(30px, 3.4vw, 56px);
  --m: rgba(118, 116, 113, .92), rgba(206, 204, 200, .9) calc(50% - .5px), transparent 50%;
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(135deg, var(--m)) 0 0 / var(--c) var(--c) no-repeat,
    linear-gradient(225deg, var(--m)) 100% 0 / var(--c) var(--c) no-repeat,
    linear-gradient(45deg, var(--m)) 0 100% / var(--c) var(--c) no-repeat,
    linear-gradient(315deg, var(--m)) 100% 100% / var(--c) var(--c) no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3));
}

/* ==========================================================================
   ABOUT · 1 · INTRO
   ========================================================================== */
.intro { padding-block: clamp(20px, 2.4vw, 40px) clamp(80px, 9vw, 150px); }
.intro__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7.2fr);
  column-gap: clamp(36px, 4.4vw, 80px);
  align-items: center;
}
.intro__text { margin-top: clamp(24px, 2.4vw, 36px); max-width: 520px; }
.intro__text p { font-size: 15px; line-height: 1.9; color: #4f4943; }
.intro__text p + p { margin-top: 18px; }
.intro__text strong { font-weight: 500; color: var(--ink); }
.intro__media img { width: 100%; aspect-ratio: 786 / 635; object-fit: cover; }

@media (max-width: 900px) {
  .intro__in { grid-template-columns: 1fr; row-gap: 40px; }
  .intro__media { order: -1; }
  .intro__media img { aspect-ratio: 4 / 3; }
}
/* Side by side, the intro is exactly one screen under the nav: the render keeps its width
   and gives up height (cropped, never squashed) once the screen is shorter than it */
@media (min-width: 901px) {
  .intro {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - var(--nav-h));
    padding-block: clamp(16px, 3vh, 40px);
  }
  .intro__media img { max-height: calc(100vh - var(--nav-h) - 2 * clamp(16px, 3vh, 40px)); }
  .intro__text { margin-top: clamp(16px, 3vh, 36px); }
  .intro__text p { line-height: 1.75; }
  .intro__text p + p { margin-top: clamp(10px, 1.8vh, 18px); }
}

/* ==========================================================================
   ABOUT · 2 · VALUES
   ========================================================================== */
.values { padding-bottom: clamp(80px, 9vw, 150px); }
.values__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 5vw, 76px) clamp(32px, 6vw, 110px);
  margin-top: clamp(52px, 7vw, 110px);
}
.value { position: relative; padding-top: 24px; border-top: 1px solid var(--line); }
/* a short dark stroke draws along each rule as the value comes in */
.value::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease) calc(var(--d, 0s) + .25s);
}
.value.is-in::before, html:not(.js) .value::before { transform: scaleX(1); }
.value__name {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.value__name svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ink-soft); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.value p { max-width: 36ch; font-size: 14px; line-height: 1.85; color: var(--muted); }

@media (max-width: 900px) { .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .values__grid { grid-template-columns: 1fr; gap: 40px; } .section-title br { display: none; } }

/* ==========================================================================
   ABOUT · 3 · TEAM
   ========================================================================== */
.team { padding-bottom: clamp(80px, 9vw, 150px); }
.team__panel {
  background: #060606; color: #f2efea;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 7vw, 140px) clamp(56px, 6.6vw, 104px);
}
.team__title { text-align: center; font-size: clamp(22px, 2.3vw, 36px); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; }
.team__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px clamp(20px, 2.2vw, 34px);
  max-width: 1060px; margin: clamp(40px, 5vw, 76px) auto 0;
}
.person__photo { aspect-ratio: 319 / 303; overflow: hidden; background: #151515; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform 1.6s var(--ease); }
.person:hover .person__photo img { transform: scale(1.04); }
.person__name {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(242, 239, 234, .6);
  font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}
.person__role { margin-top: 10px; font-size: 13px; color: #b8b1a7; }

@media (max-width: 760px) {
  .team__grid { grid-template-columns: minmax(0, 340px); justify-content: center; }
}

/* Laptops and up: Values and Team are each exactly one screen under the nav, content
   centred. Spacing follows the screen height, and the portraits are capped so the whole
   panel fits: their height is what's left of the screen after every vh and px around them
   (the 21vh and 150px below), and three of them at 319:303 plus two gaps make the grid width. */
@media (min-width: 900px) {
  .values, .team {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - var(--nav-h));
    padding-block: clamp(16px, 3vh, 40px);
  }
  .values__grid { margin-top: clamp(28px, 6vh, 90px); row-gap: clamp(28px, 5.5vh, 76px); }
  .value { padding-top: clamp(14px, 2.4vh, 24px); }
  .value__name { margin-bottom: clamp(8px, 1.6vh, 16px); }
  .value p { line-height: 1.7; }

  .team__panel { padding-block: clamp(28px, 5vh, 80px) clamp(32px, 5.5vh, 88px); }
  .team__grid {
    margin-top: clamp(24px, 4.5vh, 64px);
    max-width: min(1280px, calc((100vh - var(--nav-h) - 21vh - 150px) * 3.16 + 68px));
  }
}

/* ==========================================================================
   ABOUT · 4 · FAQ
   ========================================================================== */
.faq { padding-bottom: clamp(80px, 9vw, 150px); }
.faq__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 120px); align-items: start; }
.faq__head p { max-width: 470px; margin-top: 28px; font-size: 15px; line-height: 1.8; color: var(--muted); }

.qa { border-bottom: 1px solid #bdb7ae; }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 0 26px; list-style: none; cursor: pointer;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.qa:first-child summary { padding-top: 6px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 1.2px solid; border-bottom: 1.2px solid;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .45s var(--ease);
}
.qa[open] summary::after { transform: translateY(2px) rotate(225deg); }
.qa__a p { max-width: 60ch; padding: 0 40px 28px 0; font-size: 14.5px; line-height: 1.8; color: var(--muted); }
.qa__a a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Smooth open where the browser can animate to height:auto; elsewhere it simply snaps open */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .qa::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--ease), content-visibility .55s allow-discrete; }
  .qa[open]::details-content { block-size: auto; }
}

@media (max-width: 860px) { .faq__in { grid-template-columns: 1fr; } }

/* ==========================================================================
   WORKS
   ========================================================================== */
.works__head { padding-block: clamp(20px, 2.4vw, 40px) clamp(24px, 2.6vw, 40px); }
.works__title {
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 50px); line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
  color: #4a3a2e;
}

.filter { position: relative; display: flex; justify-content: center; gap: clamp(44px, 7vw, 120px); margin-top: clamp(24px, 3vw, 44px); }
.filter__tab {
  padding: 10px 2px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); transition: color .3s;
}
.filter__tab:hover, .filter__tab[aria-selected="true"] { color: var(--ink); }
.filter__bar {
  position: absolute; left: 0; bottom: 0; height: 1px; width: var(--w, 0); background: var(--ink);
  transform: translateX(var(--x, 0)); transition: transform .6s var(--ease), width .6s var(--ease);
}

/* The "viewing room": renders sit on the studio's dark ground, as blocked out in the artboard */
.viewing {
  margin-inline: clamp(0px, 1.4vw, 24px);
  padding: clamp(18px, 3vw, 56px);
  min-height: 50vh;
  background: var(--night);
}
.gallery { --gap: clamp(14px, 1.8vw, 30px); columns: 2; column-gap: var(--gap); }
.gallery.is-laid-out { columns: auto; display: flex; align-items: flex-start; gap: var(--gap); }
.gallery__col { flex: 1; min-width: 0; }
.gallery:focus-visible { outline-color: var(--cream); outline-offset: 10px; }
.js .gallery[hidden] { display: none; }
.shot { break-inside: avoid; margin-bottom: clamp(22px, 2.4vw, 40px); }
.shot__open { display: block; overflow: hidden; background: #2b1e16; cursor: zoom-in; }
.shot__open img { width: 100%; transition: transform 1.6s var(--ease), filter .6s var(--ease); }
.shot__open:hover img, .shot__open:focus-visible img { transform: scale(1.03); }
.shot__open:focus-visible { outline-color: var(--cream); }
.shot figcaption {
  display: flex; justify-content: space-between; gap: 16px; padding-top: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--night-text);
}
.shot figcaption:empty { display: none; }       /* captions are optional; renders aren't numbered */
.gallery.is-entering .shot { animation: shotIn .9s var(--ease) both; animation-delay: calc(var(--n, 0) * 70ms); }
@keyframes shotIn { from { opacity: 0; transform: translateY(18px); } }

@media (min-width: 1800px) { .gallery { columns: 3; } }
@media (max-width: 700px) { .gallery { columns: 1; } }

/* Contact strip between the gallery and the footer */
.next { padding-block: clamp(56px, 6vw, 96px); }
.next__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.next__title { font-weight: 500; font-size: clamp(26px, 2.4vw, 40px); line-height: 1.15; color: var(--ink-soft); }

/* ---------- Render viewer ---------- */
html:has(dialog[open]) { overflow: hidden; }
.lightbox {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(20, 13, 9, .97); color: var(--cream); overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; animation: fadeIn .45s var(--ease); }
.lightbox::backdrop { background: transparent; }
@keyframes fadeIn { from { opacity: 0; } }
.lightbox__stage { display: grid; gap: 14px; max-width: calc(100vw - 2 * clamp(16px, 8vw, 140px)); }
.lightbox__img {
  max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; margin-inline: auto;
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.lightbox__img.is-swapping { opacity: 0; transform: scale(.985); }
.lightbox__cap { display: flex; justify-content: space-between; gap: 24px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--night-text); }
.lightbox__close {
  position: absolute; top: 18px; right: clamp(16px, 3vw, 40px);
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 0;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
.lightbox__close span { font-size: 20px; line-height: 0; }
.lightbox__nav {
  position: absolute; top: 50%; width: 54px; height: 54px; margin-top: -27px;
  display: grid; place-items: center;
  border: 1px solid rgba(238, 230, 219, .28); border-radius: 50%;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.lightbox__nav:hover, .lightbox__nav:focus-visible { background: rgba(238, 230, 219, .1); border-color: rgba(238, 230, 219, .7); }
.lightbox__nav svg { width: 20px; height: 12px; }
.lightbox__nav--prev { left: clamp(10px, 2.4vw, 40px); }
.lightbox__nav--next { right: clamp(10px, 2.4vw, 40px); }
.lightbox__nav[hidden] { display: none; }

@media (max-width: 700px) {
  .lightbox__stage { max-width: calc(100vw - 32px); }
  .lightbox__nav { top: auto; bottom: 20px; margin-top: 0; }
  .lightbox__nav--prev { left: calc(50% - 64px); }
  .lightbox__nav--next { right: calc(50% - 64px); }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px clamp(40px, 6vw, 110px); align-items: start;
  padding-top: clamp(28px, 4.4vw, 76px);
}
.details {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 3vw, 44px) clamp(20px, 2.4vw, 40px);
  max-width: 580px; margin-top: clamp(28px, 3vw, 44px);
}
.details dt { margin-bottom: 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.details dd { margin: 0; font-size: 13.5px; line-height: 1.85; color: #4f4943; }
.details address { font-style: normal; }
.details dd a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.details dd a:hover, .details dd a:focus-visible { background-size: 100% 1px; }
.social--ink { gap: 18px; padding-top: 2px; }
.social--ink a { width: 19px; height: 19px; color: var(--ink); opacity: 1; background: none; }

/* ---------- Form: hairline fields, labels that float up out of the way ---------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); }
.field { --rule: #bfb9b0; position: relative; padding-top: 20px; }
.field--wide { grid-column: 1 / -1; }
.field.is-invalid { --rule: var(--error); }
.field input, .field textarea {
  display: block; width: 100%; padding: 10px 0; border: 0; border-radius: 0; outline: 0;
  font: inherit; font-size: 15px; color: var(--ink);
  background:
    linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field textarea:focus { background-size: 100% 1px, 100% 1px; }
.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #fff inset; }
.field label {
  position: absolute; left: 0; top: 30px; pointer-events: none;
  font-size: 14px; color: #9a938a; transform-origin: 0 0;
  transition: transform .4s var(--ease), color .3s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-24px) scale(.8); color: var(--muted); }
.field__opt { font-size: .85em; opacity: .75; }
.field__error { min-height: 1.9em; padding-top: 6px; font-size: 12px; color: var(--error); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { grid-column: 1 / -1; display: grid; justify-items: center; gap: 14px; margin-top: 8px; }
.pill {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 14px 36px; border: 1px solid var(--ink-soft); border-radius: 999px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
  background: rgba(255, 255, 255, .7);
  transition: color .45s var(--ease);
}
.pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-soft);
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.pill:hover, .pill:focus-visible { color: var(--white); }
.pill:hover::before, .pill:focus-visible::before { transform: none; }
.pill[aria-busy="true"] { pointer-events: none; opacity: .6; }
.form__status { min-height: 1.5em; max-width: 44ch; font-size: 13px; line-height: 1.5; text-align: center; color: var(--muted); }
.form__status.is-error { color: var(--error); }

/* ---------- The villa the page settles onto ---------- */
.contact__scene { position: relative; margin-top: clamp(-96px, -5vw, -20px); pointer-events: none; }
.contact__scene img {
  width: 100%; height: clamp(220px, 21.8vw, 440px); object-fit: cover; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%);
          mask-image: linear-gradient(to bottom, transparent, #000 42%);
}

@media (max-width: 960px) {
  .contact__in { grid-template-columns: 1fr; }
  .contact__scene { margin-top: 12px; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
  .details { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SHOWREEL PLAYER
   ========================================================================== */
.modal {
  /* as wide as fits, but always short enough to leave room for the Close button above it */
  width: min(1100px, 92vw, calc((100vh - 130px) * 16 / 9)); max-width: none; max-height: none;
  aspect-ratio: 16 / 9;
  padding: 0; border: 0; overflow: visible;
  background: #000; color: var(--white);
}
.modal[open] { animation: modalIn .5s var(--ease); }
.modal::backdrop { background: rgba(18, 11, 7, .88); }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal__slot, .modal__slot video, .modal__slot iframe { width: 100%; height: 100%; border: 0; }
.modal__close {
  position: absolute; right: 0; bottom: 100%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 0;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
.modal__close span { font-size: 20px; line-height: 0; }
.modal__empty {
  height: 100%; display: grid; place-items: center; padding: 24px; text-align: center;
  font-family: var(--serif); font-size: clamp(18px, 2.4vw, 26px); color: #d8cec1;
}

/* ==========================================================================
   SCROLL REVEALS
   ========================================================================== */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Mounted photos unroll top-down (a page-coloured cover slides off; clipping the element
   itself would stop IntersectionObserver ever seeing it), then their corners are pressed on */
.js [data-reveal="mount"] { opacity: 1; transform: none; }
.js [data-reveal="mount"]::before {
  content: ""; position: absolute; inset: -2px; z-index: 1; background: var(--white);
  transform-origin: 50% 100%; transition: transform 1.5s var(--ease);
}
.js [data-reveal="mount"].is-in::before { transform: scaleY(0); }
.js [data-reveal="mount"]::after { opacity: 0; transform: scale(1.05); transition: opacity .8s var(--ease) 1.1s, transform .8s var(--ease) 1.1s; }
.js [data-reveal="mount"].is-in::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal="mount"]::before { display: none; }
  .js [data-reveal="mount"]::after { opacity: 1; transform: none; }
  .js [data-write] img { -webkit-mask-image: none; mask-image: none; }
  .reel__ring::after { display: none; }
  .hero__video, .services__video, .about__video { display: none; }
}