/* Atlis Design — static rebuild of atlisdesign.com
   Edit the tokens below to restyle the whole site. */
:root {
  --bg: #0d0d0d;
  --bg-alt: #161616;
  --surface: #1e1e1e;
  --text: #f4f4f2;
  --muted: #a9a9a4;
  --line: #2c2c2c;
  --accent: #ffffff;
  --accent-text: #0d0d0d;
  --radius: 4px;
  --max: 1200px;
  --font-head: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.08; margin: 0 0 .5em; letter-spacing: .01em; text-transform: uppercase; }
b, strong { font-weight: 600; }
h1 { font-size: clamp(2rem, 5.5vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; color: #000; padding: 8px 12px; z-index: 100; }

.wrap { width: min(var(--max), 100% - 32px); margin-inline: auto; }
.section { padding: clamp(56px, 9vw, 120px) 0; }
.section.alt { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 22%, var(--bg-alt) 78%, var(--bg) 100%); }
.center { text-align: center; }
.narrow { max-width: 760px; margin-inline: auto; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor: pointer;
}
.btn:hover { background: transparent; color: var(--accent); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent); color: var(--accent-text); box-shadow: 0 10px 30px -12px rgba(255,255,255,.35); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row.center { justify-content: center; }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(13,13,13,.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
.site-header.scrolled { background: rgba(13,13,13,.9); border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.logo img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { text-decoration: none; font-size: .95rem; letter-spacing: .02em; opacity: .85; transition: opacity .3s var(--ease); }
.nav > a:not(.btn), .dropdown-menu a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease), opacity .3s var(--ease); }
.nav > a:not(.btn):hover, .nav > a[aria-current="page"] { opacity: 1; background-size: 100% 1px; }
.dropdown-menu a:hover { opacity: 1; background-color: rgba(255,255,255,.05); }
.dropdown { position: relative; }
.dropdown > button {
  background: none; border: 0; color: inherit; font: inherit; font-size: .95rem; cursor: pointer; opacity: .85; padding: 0;
}
.dropdown-menu {
  display: block; visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
  position: absolute; top: calc(100% + 14px); left: -18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 0; min-width: 210px;
}
.dropdown-menu a { display: block; padding: 7px 18px; }
/* Invisible bridge over the gap so the menu stays open while the pointer moves down to it. */
.dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.dropdown:hover .dropdown-menu, .dropdown:has(:focus-visible) .dropdown-menu, .dropdown.open .dropdown-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav .btn { padding: 9px 18px; opacity: 1; text-decoration: none; }
.menu-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 1.8rem; cursor: pointer; }

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 16px;
  }
  .nav.open { display: flex; }
  .nav a, .dropdown > button { font-size: 1.15rem; padding: 6px 0; }
  .dropdown-menu { position: static; visibility: visible; opacity: 1; transform: none; border: 0; background: none; padding: 0 0 0 14px; }
  .nav > a:not(.btn), .dropdown-menu a { background-image: none; }
  .dropdown-menu::before { display: none; }
  .dropdown-menu a { padding: 4px 0; font-size: 1rem; }
}

/* Hero */
.hero {
  position: relative; min-height: 88vh; display: grid; place-items: center; text-align: center;
  background: #000 center/cover no-repeat; overflow: hidden;
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(0,0,0,.35) 40%, rgba(13,13,13,.8) 80%, var(--bg) 100%); }
.hero > * { position: relative; }
.hero .tagline { font-family: var(--font-head); font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 2em; }
.page-hero { min-height: 60vh; }

/* Split feature rows */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.split.reverse > :first-child { order: 2; }
.split img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } }

/* Grids */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.tight { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid a, .grid figure { display: block; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease-out), filter .8s var(--ease-out); }
.grid a:hover img, .masonry a:hover img { transform: scale(1.05); }
.masonry img { transition: transform .8s var(--ease-out); }
.masonry { columns: 3 280px; column-gap: 12px; }
.masonry a { display: block; margin-bottom: 12px; break-inside: avoid; border-radius: var(--radius); overflow: hidden; }
.masonry img { width: 100%; height: auto; }
.gallery-title { margin: 56px 0 18px; font-size: 1.4rem; }

/* Category cards */
.cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card, .price-card { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.card:hover, .price-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
.card img, .price-card img { transition: transform 1s var(--ease-out); }
.card:hover img, .price-card:hover img { transform: scale(1.05); }
.card { background: linear-gradient(180deg, #222 0%, var(--surface) 60%); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card img, .card .ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card .ph { background: linear-gradient(135deg, #2a2a2a, #111); display: grid; place-items: center; color: var(--muted); font-family: var(--font-head); font-size: 1.4rem; }
.card h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1; margin: 0; }
.card .body { padding: 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .body p { color: var(--muted); margin: 0 0 14px; }
.card .btn { align-self: flex-start; padding: 10px 22px; margin-top: auto; }

/* Photos page tiles: editorial grid, photo fills the tile, name sits on a gradient */
.tiles { display: grid; gap: 14px; margin-top: 44px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(200px, 22vw, 300px); grid-auto-flow: dense; }
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface); text-decoration: none; isolation: isolate; }
.tile.feature { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 2; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out), filter .6s var(--ease); z-index: -2; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.4) 58%, rgba(0,0,0,.9) 100%); transition: opacity .5s var(--ease); }
.tile-text { text-shadow: 0 1px 12px rgba(0,0,0,.45); position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 2vw, 26px); display: flex; flex-direction: column; gap: 4px; }
.tile-name { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; line-height: 1; font-size: clamp(1.4rem, 2.2vw, 2rem); }
.tile.feature .tile-name { font-size: clamp(2rem, 4vw, 3.4rem); }
.tile-sub { color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.4; max-width: 34ch; }
.tile-go { font-weight: 500; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px;
  opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.tile-go span { display: inline-block; transition: transform .45s var(--ease); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); }
.tile:hover .tile-go, .tile:focus-visible .tile-go { opacity: 1; transform: none; }
.tile:hover .tile-go span { transform: translateX(4px); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tile-cta { background: radial-gradient(120% 140% at 0% 100%, #2b2b2b 0%, #161616 55%, #0f0f0f 100%); border: 1px solid var(--line); }
.tile-cta::after { display: none; }
.tile-cta .tile-text { top: 0; justify-content: center; }
.tile-cta .tile-go { opacity: 1; transform: none; }
.tile-cta:hover { border-color: rgba(255,255,255,.35); }
@media (hover: none) { .tile-go { opacity: 1; transform: none; } }
@media (max-width: 980px) {
  .tiles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(190px, 38vw, 300px); }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; grid-auto-rows: 240px; gap: 12px; }
  .tile.feature, .tile.wide { grid-column: auto; }
  .tile.feature { grid-row: span 2; }
  .tile-cta { grid-row: auto; min-height: 200px; }
}

/* Home page */
.hero-sub { max-width: 40ch; margin: -1em auto 2em; color: rgba(255,255,255,.85); }
.hero .btn-row { justify-content: center; }
.eyebrow { font-size: .8rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .6em; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-head h2 { margin: 0; }
.text-link { text-decoration: none; font-weight: 500; white-space: nowrap; opacity: .85; transition: opacity .3s var(--ease); }
.text-link:hover { opacity: 1; }
.text-link span { display: inline-block; transition: transform .35s var(--ease); }
.text-link:hover span { transform: translateX(4px); }
.proof { display: grid; gap: 10px; grid-template-columns: repeat(6, 1fr); }
.proof a { display: block; overflow: hidden; border-radius: var(--radius); }
.proof img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform .9s var(--ease-out); }
.proof a:hover img { transform: scale(1.05); }
.tiles.services { margin-top: 0; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(300px, 34vw, 460px); }
.contact-band { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
@media (max-width: 980px) {
  .proof { grid-template-columns: repeat(3, 1fr); }
  .tiles.services { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(240px, 50vw, 380px); }
}
@media (max-width: 760px) { .contact-band { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .proof { grid-template-columns: repeat(2, 1fr); }
  .tiles.services { grid-template-columns: 1fr; grid-auto-rows: 340px; }
}

/* Testimonials */
.quotes { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); margin-top: 18px; }
.quotes figure { margin: 0; padding: clamp(26px, 4vw, 44px); border-radius: var(--radius); border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 0% 0%, #1f1f1f 0%, #141414 60%, #101010 100%); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.quotes blockquote { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45; font-weight: 300; }
.quotes figcaption { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; }
.quotes figcaption strong { font-weight: 600; letter-spacing: .02em; }
.quotes figcaption span { color: var(--muted); }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }

/* Video */
.vid-svcs { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.vid-svc { padding: 28px 24px 30px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, #1d1d1d, #131313);
  display: flex; flex-direction: column; gap: 4px; transition: transform .5s var(--ease-out), border-color .4s var(--ease); }
.vid-svc:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.25); }
.vid-svc h3 { font-size: 1.35rem; margin: 12px 0 2px; line-height: 1.15; }
.vid-svc p { margin: 10px 0 0; font-size: .95rem; line-height: 1.55; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.08)); }
.timeline li { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 22px; padding: 0 0 34px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline .step-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid rgba(255,255,255,.4);
  color: var(--text, #fff); letter-spacing: .04em; position: relative; z-index: 1; transition: background .4s var(--ease), color .4s var(--ease); }
.timeline li:hover .step-n { background: #fff; color: #111; }
.timeline h3 { font-size: 1.3rem; margin: 6px 0 4px; }
.timeline p { margin: 0; }
.reels { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.reel { position: relative; aspect-ratio: 9/17.5; background: #000; border-radius: var(--radius); overflow: hidden; }
.reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) { .reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .reel { scroll-snap-align: start; } }
.video-item .logo-kind { display: block; margin-bottom: 6px; }
@media (max-width: 1000px) { .vid-svcs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vid-svcs { grid-template-columns: 1fr; } }

/* Concerts: artist index */
.artist-index { border-top: 1px solid var(--line); }
.artist { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; column-gap: 18px; padding: 20px 4px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: padding .45s var(--ease-out); }
.artist-name { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.1;
  transition: transform .45s var(--ease-out), letter-spacing .45s var(--ease-out); }
.artist-meta { color: var(--muted); font-size: .92rem; text-align: right; }
.artist-go { font-size: 1.2rem; opacity: .5; transition: transform .45s var(--ease-out), opacity .3s var(--ease); }
/* The three preview photos sit in a collapsed row that opens on hover or keyboard focus. */
.artist-peek { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.peek-row { overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-height: 0; max-width: 840px; }
.peek-row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); margin-top: 18px;
  opacity: 0; transform: translateY(26px) scale(.94); transition: opacity .45s var(--ease), transform .7s var(--ease-out); }
.peek-row img:nth-child(2) { transition-delay: .06s; }
.peek-row img:nth-child(3) { transition-delay: .12s; }
.artist:hover .artist-peek, .artist:focus-visible .artist-peek { grid-template-rows: 1fr; }
.artist:hover .peek-row img, .artist:focus-visible .peek-row img { opacity: 1; transform: none; }
.artist:hover .artist-name { transform: translateX(10px); }
.artist:hover .artist-go { opacity: 1; transform: translateY(4px); }
.artist-index:hover .artist:not(:hover) { opacity: .45; }
.artist { transition: padding .45s var(--ease-out), opacity .35s var(--ease); }
/* Touch screens have no hover, so they get small always-on thumbnails instead. */
@media (hover: none) {
  .artist { grid-template-columns: 1fr auto; row-gap: 4px; }
  .artist-meta { grid-column: 1; grid-row: 2; text-align: left; }
  .artist-go { display: none; }
  .artist-peek { grid-column: 2; grid-row: 1 / span 2; grid-template-rows: 1fr; align-self: center; }
  .peek-row { grid-template-columns: repeat(3, 44px); gap: 4px; }
  .peek-row img { margin: 0; aspect-ratio: 3/4; opacity: 1; transform: none; }
}
.artist-section { padding-top: clamp(48px, 7vw, 88px); scroll-margin-top: 70px; }
.show-title { font-size: 1.15rem; margin: 26px 0 14px; scroll-margin-top: 80px; }
.show-title .muted { font-weight: 400; text-transform: none; }

/* Travel */
.travel-hero .eyebrow { color: rgba(255,255,255,.8); }
.travel-hero .hero-sub { margin: 0 auto 2em; }
.svc-cards { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.svc-card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
.svc-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.svc-card .body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 4px; }
.svc-n { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.02em; }
.svc-card h3 { font-size: 1.5rem; margin: 6px 0 0; }
.svc-card p { margin: 10px 0 0; font-size: .95rem; line-height: 1.55; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; background: rgba(255,255,255,.03); }
.travel-for { align-items: center; }
@media (max-width: 860px) { .svc-cards { grid-template-columns: 1fr; } .svc-card img { aspect-ratio: 16/10; } }

/* Logos */
.logo-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.logo-card { margin: 0; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.logo-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
.logo-card.feature { grid-column: span 1; }
.logo-card a { display: block; overflow: hidden; }
.logo-card img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 10%; transition: transform .8s var(--ease-out); }
.logo-card:hover img { transform: scale(1.04); }
.logo-card figcaption { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.logo-card strong { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; }
.logo-card figcaption > span:last-child { color: var(--muted); font-size: .92rem; line-height: 1.5; margin-top: 4px; }
.logo-kind { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 981px) {
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
  .logo-card.feature { grid-column: span 2; }
  .logo-card.feature img { aspect-ratio: 16/10; padding: 8% 14%; }
}
@media (max-width: 760px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .logo-grid { grid-template-columns: 1fr; } }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); counter-reset: none; }
.steps li { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #1b1b1b, #131313); }
.steps h3 { font-size: 1.25rem; margin: 10px 0 6px; }
.steps p { margin: 0; font-size: .95rem; }
.step-n { font-size: .8rem; letter-spacing: .16em; color: var(--muted); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* Video */
.video-list { display: grid; gap: 72px; }
.video-item { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.video-item:nth-child(even) > :first-child { order: 2; }
@media (max-width: 860px) { .video-item { grid-template-columns: 1fr; } .video-item:nth-child(even) > :first-child { order: 0; } }
.embed { position: relative; aspect-ratio: 16/9; background: #000; border-radius: var(--radius); overflow: hidden; }
.embed.vertical { aspect-ratio: 9/16; max-width: 360px; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed .todo { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--muted); font-size: .9rem; border: 1px dashed var(--line); }

/* Pricing */
.price-list { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.price-list.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.price-list.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.price-card { border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.price-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.price-card .body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.price-card h3 { font-size: 1.35rem; margin: 0 0 6px; }
.price-card .blurb { color: var(--muted); font-size: .95rem; line-height: 1.5; margin: 0 0 18px; }
.price { font-family: var(--font-head); font-size: 2.3rem; font-weight: 700; line-height: 1; margin: 0 0 18px; display: flex; align-items: baseline; gap: 8px; }
.price span { font-family: var(--font-body); font-size: .85rem; font-weight: 400; color: var(--muted); letter-spacing: .02em; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 16px; border-radius: var(--radius-sm, 8px); overflow: hidden;
  background: var(--line); border: 1px solid var(--line); }
.specs div { background: rgba(10,10,12,.55); padding: 10px 12px; }
.specs dt { font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 2px 0 0; font-size: .95rem; font-weight: 500; line-height: 1.3; }
.specs div:last-child:nth-child(odd) { grid-column: span 2; }
.fine { list-style: none; padding: 0; margin: 0 0 18px; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.fine li { padding-left: 14px; position: relative; margin-bottom: 4px; }
.fine li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.35); }
.price-card .btn { align-self: flex-start; margin-top: auto; padding: 11px 24px; }
/* Forms */
form .field { margin-bottom: 20px; }
form label { display: block; font-weight: 500; margin-bottom: 6px; }
form .hint { display: block; font-size: .85rem; color: var(--muted); margin-top: -2px; margin-bottom: 6px; }
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { form .row { grid-template-columns: 1fr; } }
input, textarea, select {
  width: 100%; padding: 13px 14px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { min-height: 160px; resize: vertical; }
textarea[rows] { min-height: 0; }
select option { background: #16161a; color: var(--text); }
.booking-form fieldset { border: 0; padding: 0; margin: 0 0 clamp(36px, 5vw, 56px); }
.booking-form legend { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; margin-bottom: 18px; padding: 0; }
.booking-form .row { margin-bottom: 28px; }
.booking-form .row .field { margin-bottom: 0; display: flex; flex-direction: column; }
.booking-form .row .field input, .booking-form .row .field select { margin-top: auto; }
.inline-form { display: flex; gap: 10px; max-width: 520px; margin: 24px auto 10px; }
.inline-form input { flex: 1; }
@media (max-width: 520px) { .inline-form { flex-direction: column; } }
.form-status { margin-top: 12px; min-height: 1.5em; color: var(--muted); }

/* Lists / misc */
.anchor-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.anchor-buttons .btn { padding: 10px 18px; font-size: .9rem; }
.offer-list { list-style: none; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 32px 0 0; }
.offer-list li { background: var(--surface); padding: 24px; border-radius: var(--radius); }
.offer-list strong { display: block; font-family: var(--font-head); font-size: 1.25rem; margin-bottom: 8px; }
.post { max-width: 760px; margin-inline: auto; }
.post .meta { color: var(--muted); font-size: .9rem; margin-bottom: 24px; }
.quote { font-family: var(--font-head); font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.3; }

/* Footer */
.site-footer { background: linear-gradient(180deg, var(--bg) 0%, #070707 100%); border-top: 1px solid var(--line); padding: 56px 0 40px; text-align: center; }
.site-footer .logo img { height: 40px; margin: 0 auto 18px; }
.socials { display: flex; justify-content: center; gap: 22px; margin: 18px 0; padding: 0; list-style: none; }
.socials a { transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; text-decoration: none; }
.socials a:hover { background: var(--text); color: var(--bg); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer small { color: var(--muted); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); display: grid; visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility 0s .35s; place-items: center; z-index: 200; padding: 24px; }
.lightbox.open { visibility: visible; opacity: 1; transition-delay: 0s; }
.lightbox.open img { animation: lb-in .45s var(--ease-out); }
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } }
.lightbox img { max-height: 88vh; max-width: 100%; width: auto; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer; padding: 10px 16px; }
.lightbox .close { top: 10px; right: 14px; }
.lightbox .prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 6px; top: 50%; transform: translateY(-50%); }

/* Glass
   Dark frosted-glass layer over the base styles: a soft ambient glow sits behind the page,
   and panels, cards, the floating nav and buttons are translucent with a blurred backdrop,
   a hairline border and a faint top highlight. Tune it with the --glass tokens. */
:root {
  --bg: #08080a;
  --bg-alt: #0c0c0f;
  --surface: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.09);
  --radius: 18px;
  --radius-sm: 12px;
  --glass: rgba(255,255,255,.045);
  --glass-hover: rgba(255,255,255,.075);
  --glass-line: rgba(255,255,255,.1);
  --glass-line-hover: rgba(255,255,255,.24);
  --glass-blur: blur(22px) saturate(160%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -32px rgba(0,0,0,.9);
  --hdr: 76px;
}
html { background: var(--bg); }
body { background: transparent; position: relative; }
/* Ambient light for the glass to pick up, fixed so it stays put while the page scrolls. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(55vw 45vw at 8% -5%, rgba(130,135,160,.16), transparent 62%),
    radial-gradient(45vw 40vw at 95% 25%, rgba(170,150,125,.10), transparent 60%),
    radial-gradient(60vw 50vw at 40% 105%, rgba(95,105,140,.14), transparent 62%),
    var(--bg);
}
/* Fine film grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section.alt { background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.018) 25%, rgba(255,255,255,.018) 75%, transparent 100%); }

/* Panels */
.card, .price-card, .svc-card, .logo-card, .vid-svc, .steps li, .offer-list li, .quotes figure, .chips li, .tile-cta,
.dropdown-menu, .contact-band form, .site-footer .wrap {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.card, .price-card, .svc-card, .logo-card, .vid-svc, .steps li, .offer-list li, .quotes figure {
  transition: transform .5s var(--ease-out), border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .5s var(--ease-out);
}
.card:hover, .price-card:hover, .svc-card:hover, .logo-card:hover, .vid-svc:hover, .steps li:hover, .offer-list li:hover, .quotes figure:hover {
  background-color: var(--glass-hover); border-color: var(--glass-line-hover);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 70px -30px rgba(0,0,0,.95);
}
.card { background-image: none; }
.logo-card a { border-radius: calc(var(--radius) - 6px); margin: 6px 6px 0; }
.contact-band form { padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); }
.chips li { border-radius: 999px; }

/* Media keeps a tighter radius and a hairline edge */
.grid a, .grid figure, .masonry a, .proof a, .peek-row img, .split img, .embed, .reel, .tile { border-radius: var(--radius-sm); }
.embed, .reel, .tile { box-shadow: 0 0 0 1px var(--glass-line), 0 30px 60px -36px rgba(0,0,0,.9); }
.grid a, .masonry a, .proof a { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }

/* Floating glass nav */
.site-header { top: 0; padding-top: 12px; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.scrolled { background: transparent; }
.site-header .wrap {
  min-height: 64px; padding: 0 10px 0 22px; border-radius: 999px;
  background: rgba(18,18,22,.42); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
.site-header.scrolled .wrap { background: rgba(14,14,18,.72); border-color: rgba(255,255,255,.14); }
.logo img { height: 38px; }
.nav .btn { padding: 9px 20px; }
/* Heroes slide up under the floating nav */
main > .hero:first-child { margin-top: calc(-1 * var(--hdr)); }
/* Heroes dissolve into the ambient background instead of ending on a hard edge */
.hero { -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
.dropdown-menu { border-radius: 16px; padding: 8px; top: calc(100% + 18px); background: rgba(18,18,22,.7); }
.dropdown-menu a { border-radius: 10px; padding: 8px 14px; background-image: none; }
.dropdown-menu a:hover { background-color: rgba(255,255,255,.08); }
@media (max-width: 900px) {
  .nav { top: calc(100% + 8px); left: 0; right: 0; border-radius: 22px; padding: 18px 22px;
    background: rgba(14,14,18,.86); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  .site-header .wrap { position: relative; }
  .dropdown-menu { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 0 0 14px; }
}

/* Pill buttons */
.btn { border-radius: 999px; border-width: 1px; padding: 13px 28px; }
.btn.ghost {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.btn:hover { background: rgba(255,255,255,.1); }
.btn.ghost:hover { background: var(--accent); }
.anchor-buttons .btn { padding: 9px 18px; }

/* Rows, steps, forms */
.artist { border-radius: var(--radius-sm); padding-inline: 16px; border-bottom-color: var(--line);
  transition: padding .45s var(--ease-out), opacity .35s var(--ease), background-color .35s var(--ease); }
.artist:hover, .artist:focus-visible { background: var(--glass); }
.timeline .step-n { background: rgba(20,20,24,.7); border-color: var(--glass-line-hover);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
input, textarea, select { background: rgba(255,255,255,.04); border-color: var(--glass-line); border-radius: var(--radius-sm);
  transition: border-color .3s var(--ease), background-color .3s var(--ease); }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.07); }
.inline-form input { border-radius: 999px; padding-inline: 20px; }

/* Footer becomes a glass card */
.site-footer { background: transparent; border-top: 0; padding: 24px 0 28px; }
.site-footer .wrap { border-radius: 28px; padding: 44px 24px 34px; }
.socials a { background: rgba(255,255,255,.05); border-color: var(--glass-line); }

/* Lightbox frosts the page behind it */
.lightbox { background: rgba(6,6,8,.72); -webkit-backdrop-filter: blur(24px) saturate(120%); backdrop-filter: blur(24px) saturate(120%); }
.lightbox img { border-radius: var(--radius-sm); }

/* Browsers without backdrop-filter get solid panels instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .price-card, .svc-card, .logo-card, .vid-svc, .steps li, .offer-list li, .quotes figure, .dropdown-menu,
  .contact-band form, .site-footer .wrap, .site-header .wrap { background-color: #16161a; }
}

/* Floating header
   Bare logo on the left, glass menu pill on the right. */
:root { --hdr: 84px; }
.site-header .wrap, .site-header.scrolled .wrap {
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; min-height: 64px;
}
.logo { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; box-shadow: none; }
.logo img { height: 36px; filter: drop-shadow(0 1px 10px rgba(0,0,0,.45)); }
.nav { padding: 6px 6px 6px 24px; border-radius: 999px; min-height: 56px;
  background: rgba(18,18,22,.45); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: background .4s var(--ease); }
.site-header.scrolled .nav { background: rgba(14,14,18,.78); }
.menu-toggle { width: 52px; height: 52px; border-radius: 50%; font-size: 1.4rem; color: var(--text);
  background: rgba(18,18,22,.5); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@media (max-width: 900px) {
  .menu-toggle { display: grid; place-items: center; }
  .nav { min-height: 0; left: auto; right: 0; width: min(320px, 100%); background: rgba(14,14,18,.9);
    border-radius: 22px; padding: 18px 22px; }
  .dropdown-menu { background: none; }
}
@media (max-width: 640px) { .section-head { flex-wrap: wrap; } }

/* Breathing room
   Generous spacing everywhere: taller sections, wider gutters, looser grids and card padding.
   Delete this block to return to the tighter layout. */
.wrap { width: min(var(--max), 100% - clamp(40px, 8vw, 128px)); }
.section { padding: clamp(96px, 13vw, 200px) 0; }
main > .section:first-child { padding-top: clamp(80px, 11vw, 160px); }
main > .hero:first-child { padding-top: calc(var(--hdr) + 110px); padding-bottom: 130px; }
p { margin-bottom: 1.3em; }
h1, h2, h3 { margin-bottom: .7em; }
.eyebrow { margin-bottom: 1.1em; }
.section-head { margin-bottom: clamp(44px, 5vw, 72px); gap: 24px; }
.hero .tagline { margin-bottom: 2.6em; }
.hero-sub { margin-bottom: 2.6em; }
.btn-row { gap: 16px; }
.split, .contact-band { gap: clamp(44px, 8vw, 130px); }
.grid { gap: 22px; }
.grid.tight { gap: 14px; }
.masonry { column-gap: 20px; }
.masonry a { margin-bottom: 20px; }
.gallery-title { margin: 88px 0 28px; }
.cards, .svc-cards, .price-list, .quotes, .vid-svcs, .reels, .logo-grid, .steps { gap: clamp(26px, 3vw, 40px); }
.tiles { gap: 22px; margin-top: 64px; }
.tiles.services { margin-top: 0; }
.proof { gap: 16px; }
.card .body, .svc-card .body, .price-card .body { padding: clamp(28px, 3vw, 38px); }
.vid-svc, .steps li, .offer-list li { padding: clamp(30px, 3vw, 40px); }
.logo-card figcaption { padding: 28px 30px 32px; }
.price-card .blurb, .price { margin-bottom: 24px; }
.specs { margin-bottom: 22px; }
.fine { margin-bottom: 26px; }
.fine li { margin-bottom: 7px; }
.timeline li { gap: 30px; padding-bottom: 52px; }
.video-list { gap: clamp(90px, 10vw, 140px); }
.video-item { gap: clamp(36px, 5vw, 64px); }
.artist { padding-block: 28px; }
.artist-section { padding-top: clamp(80px, 10vw, 140px); }
.show-title { margin: 40px 0 22px; }
.chips { gap: 14px; }
.anchor-buttons { gap: 14px; margin-top: 40px; }
.offer-list { gap: 28px; margin-top: 48px; }
form .field { margin-bottom: 28px; }
form .row { gap: 22px; }
.contact-band form { padding: clamp(30px, 4vw, 52px); }
.site-footer { padding: 60px 0 40px; }
.site-footer .wrap { padding: 64px 32px 48px; }
@media (max-width: 640px) {
  .section { padding: 80px 0; }
  main > .hero:first-child { padding-top: calc(var(--hdr) + 72px); padding-bottom: 96px; }
}

/* Motion
   Page fades between pages (browsers that support view transitions), the hero eases in,
   and content rises into place as it scrolls into view. All of it is skipped for
   visitors who ask their system for reduced motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease); }

.hero { animation: hero-in 1.6s var(--ease-out) backwards; }
.hero > * { z-index: 1; }
.hero .wrap > * { animation: rise 1.1s var(--ease-out) both; }
.hero .wrap > :nth-child(2) { animation-delay: .15s; }
.hero .wrap > :nth-child(3) { animation-delay: .3s; }
@keyframes hero-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* Soft glow that drifts behind the hero text */
.hero::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(40% 35% at 30% 40%, rgba(255,255,255,.07), transparent 70%),
              radial-gradient(35% 30% at 70% 60%, rgba(255,255,255,.05), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(6%, -4%, 0) scale(1.08); } }

/* Scroll reveal: main.js tags elements with .reveal and adds .in when they enter view. */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .split .reveal:is(img) { transform: translateY(32px) scale(.98); }
.js .split .reveal.in:is(img) { transform: none; }

/* Thin gradient bar that tracks how far down the page you are */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(255,255,255,.15), #fff 60%, rgba(255,255,255,.6)); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

/* Scroll story
   Inspired by healingminds.pl: words light up as you read down the page, content blurs into focus,
   the hero drifts behind its text, and a photo opens from an arch.
   main.js drives the scroll-linked parts and skips them for reduced motion. */
.js .reveal { filter: blur(10px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { filter: none; }

/* Words light up one by one */
.w { opacity: .16; transition: opacity .35s linear; }
.w.on { opacity: 1; }

/* Big statement under the hero */
.statement-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 7vw, 120px); align-items: end; }
.statement-grid .eyebrow { grid-column: 1 / -1; }
.statement-text { grid-column: 1 / -1; font-size: clamp(1.9rem, 4.2vw, 3.6rem); line-height: 1.12; font-weight: 300; letter-spacing: -.01em; max-width: 22ch; margin-bottom: .9em; }
.statement-text em { font-style: normal; font-weight: 600; }
.statement-side { grid-column: 2; max-width: 38ch; font-size: 1.05rem; }
@media (max-width: 760px) { .statement-side { grid-column: 1 / -1; } }

/* Hero: the photo sits on its own layer so it can drift and settle as you scroll */
.hero-bg { position: absolute; inset: -8% 0; z-index: 0; background: center/cover no-repeat; will-change: transform; }
.hero::before { z-index: 1; }
.hero::after { z-index: 1; }
.hero > .wrap { z-index: 2; will-change: transform, opacity, filter; }

/* A full-bleed photo that opens from an arch as it scrolls into view */
.arch { position: relative; min-height: 100vh; display: grid; align-items: end; color: #fff; margin: clamp(40px, 6vw, 90px) 0; isolation: isolate; }
.arch-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #000;
  clip-path: inset(0 var(--ax, 0px) 0 var(--ax, 0px) round 50% 50% 0 0 / var(--ar, 0px) var(--ar, 0px) 0 0); }
.arch-media img { position: relative; top: -7.5%; width: 100%; height: 115%; object-fit: cover; transform: translateY(var(--ay, 0px)); will-change: transform; }
.arch-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 30%, rgba(0,0,0,.78) 100%); }
.arch-text { padding-bottom: clamp(60px, 9vw, 130px); }
.arch-text h2 { font-size: clamp(2.2rem, 5.4vw, 4.6rem); max-width: 12ch; }
.arch-text p:not(.eyebrow) { max-width: 46ch; color: rgba(255,255,255,.85); font-size: 1.05rem; }
.arch-text .eyebrow { color: rgba(255,255,255,.7); }

/* Service cards: staggered, and the one under the pointer widens to show its details */
@media (min-width: 981px) {
  .tiles.services { display: flex; gap: 18px; align-items: flex-start; height: clamp(420px, 40vw, 560px); }
  .tiles.services .tile { flex: 1 1 0; height: 86%; transition: flex-grow .8s var(--ease-out), height .8s var(--ease-out), transform .2s linear; }
  .tiles.services .tile:nth-child(2) { margin-top: 5%; }
  .tiles.services .tile:nth-child(3) { margin-top: 2%; }
  .tiles.services .tile:nth-child(4) { margin-top: 7%; }
  .tiles.services .tile:hover, .tiles.services .tile:focus-visible { flex-grow: 1.7; height: 93%; }
  .tiles.services .tile-sub { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--ease-out), opacity .5s var(--ease); }
  .tiles.services .tile:hover .tile-sub, .tiles.services .tile:focus-visible .tile-sub, .tiles.services .tile-cta .tile-sub { max-height: 6em; opacity: 1; }
}

/* Gentle drift on images beside text */
.split > img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { filter: none; }
  .w { opacity: 1; }
  .arch-media { clip-path: none; }
}

/* Links page (hidden link-in-bio, /links) */
body.bare main { padding: 0; }
.links-page { position: relative; min-height: 100svh; display: flex; justify-content: center; padding: clamp(56px, 10vh, 96px) 20px 64px; overflow: hidden; }
.links-bg { position: absolute; inset: -40px; background-size: cover; background-position: center 30%; filter: blur(40px) saturate(130%); opacity: .35; transform: scale(1.1); }
.links-page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,.35), var(--bg) 80%); }
.links-inner { position: relative; z-index: 1; width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.links-logo img { width: min(240px, 70vw); height: auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,.5)); }
.links-tag { color: var(--muted); margin: 22px 0 40px; font-size: 15px; line-height: 1.6; }
.links-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 14px; }
.link-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); color: var(--text); text-decoration: none; text-align: left; transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease-out); opacity: 0; animation: link-in .7s var(--ease-out) forwards; }
.links-list li:nth-child(1) .link-card { animation-delay: .05s } .links-list li:nth-child(2) .link-card { animation-delay: .12s }
.links-list li:nth-child(3) .link-card { animation-delay: .19s } .links-list li:nth-child(4) .link-card { animation-delay: .26s }
.links-list li:nth-child(5) .link-card { animation-delay: .33s } .links-list li:nth-child(6) .link-card { animation-delay: .4s }
.links-list li:nth-child(7) .link-card { animation-delay: .47s }
.link-card:hover, .link-card:focus-visible { background: var(--glass-hover); border-color: var(--glass-line-hover); transform: translateY(-2px); }
.link-card strong { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.link-card small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.link-arrow { font-size: 18px; transition: transform .35s var(--ease-out); }
.link-card:hover .link-arrow { transform: translateX(4px); }
.links-social { margin: 40px 0 18px; }
.links-site { color: var(--muted); font-size: 13px; letter-spacing: .08em; text-decoration: none; }
.links-site:hover { color: var(--text); }
@keyframes link-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .link-card { animation: none; opacity: 1; } }

/* Home hero video: loops over the photo, which stays as the poster and fallback */
.hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Full-screen mobile menu
   Grows out of the menu bubble as a circle and covers the whole screen. */
@media (max-width: 900px) {
  .menu-toggle, .logo { position: relative; z-index: 2; }
  .menu-toggle { transition: background .3s var(--ease); }
  .menu-toggle[aria-expanded="true"] { background: rgba(255,255,255,.1); }
  .nav, .nav.open {
    display: flex; position: fixed; inset: 0; z-index: 1; width: auto; height: 100dvh; margin: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: calc(var(--hdr) + 24px) 24px 48px; overflow-y: auto; border: 0; border-radius: 0; box-shadow: none;
    background: rgba(10,10,13,.97); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    clip-path: circle(0 at var(--mx, calc(100% - 42px)) var(--my, 44px)); visibility: hidden;
    transition: clip-path .5s cubic-bezier(.65,0,.35,1), visibility 0s .5s;
  }
  .nav.open { clip-path: circle(150% at var(--mx, calc(100% - 42px)) var(--my, 44px)); visibility: visible; transition-delay: 0s; }
  .site-header.scrolled .nav { background: rgba(10,10,13,.97); }
  .nav > a, .dropdown > button { font-size: 1.9rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 8px 0; opacity: 1; }
  .nav .btn { margin-top: 18px; font-size: 1.05rem; padding: 14px 34px; }
  .dropdown { display: flex; flex-direction: column; align-items: center; }
  .dropdown > button { display: inline-flex; align-items: center; gap: 12px; }
  .dropdown > button .caret { display: inline-block; font-size: .7em; transition: transform .35s var(--ease); }
  .dropdown.open > button .caret { transform: rotate(180deg); }
  /* Services fold open below the button as a list. */
  .dropdown-menu, .dropdown:hover .dropdown-menu { display: flex; flex-direction: column; align-items: center; gap: 2px;
    max-height: 0; overflow: hidden; padding: 0; visibility: hidden;
    transition: max-height .45s var(--ease), padding .45s var(--ease), visibility 0s .45s; }
  .dropdown.open .dropdown-menu { max-height: 320px; padding: 4px 0 12px; visibility: visible; transition-delay: 0s; }
  .dropdown-menu a { padding: 6px 2px; font-size: 1.15rem; }
  .nav > *, .dropdown-menu a { opacity: 0; transform: translateY(14px); transition: opacity .3s var(--ease), transform .4s var(--ease-out); }
  .nav.open > *, .nav.open .dropdown-menu a { opacity: 1; transform: none; }
  .nav.open > :nth-child(1) { transition-delay: .18s; }
  .nav.open > :nth-child(2) { transition-delay: .24s; }
  .nav.open > :nth-child(3) { transition-delay: .30s; }
  .nav.open > :nth-child(4) { transition-delay: .36s; }
  .nav.open .dropdown-menu a { transition-delay: .22s; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .nav, .nav.open, .nav > *, .dropdown-menu a { transition: none; }
}

/* Concert b-roll plays over the arch photo on the home page. */
.arch-media .arch-video { position: absolute; left: 0; top: -7.5%; width: 100%; height: 115%; object-fit: cover; transform: translateY(var(--ay, 0px)); }
@media (prefers-reduced-motion: reduce) { .arch-video { display: none; } }