/* =========================================================================
   LUMEN — the design system for natetran.com
   Modeled on the Luma Dream Machine language: one continuous scroll where
   the ground morphs from near-black to metallic silver to tinted washes
   and back to black. Neutral grotesque sans + elegant italic serif for the
   emphasis words. Colorful imagery floats free on rounded cards. Pills as
   the only UI chrome. Expressive placement, strict focal order.
   Replaces the Constellation system entirely.
   -------------------------------------------------------------------------
   01 tokens    02 base + morphing ground   03 type      04 pills + chips
   05 nav       06 reveals                  07 cards     08 hero
   09 sections  10 rail carousel            11 reading   12 pricing/about
   13 contact   14 mega type + footer       15 a11y      16 responsive
   ========================================================================= */

/* ---------- 01 tokens ---------- */
:root {
  --dark: #0A0B0C;         /* near-black, slight green cast */
  --black: #0A0A0B;        /* footer */
  --silver: #D3D3D6;       /* the metallic ground */
  --ink-l: #161719;        /* text on light */
  --mut-l: #55575C;
  --faint-l: #83858B;
  --ink-d: #F2F3F0;        /* text on dark */
  --mut-d: #A9ABA7;
  --faint-d: #7D7F7B;
  --line-l: rgba(22, 23, 25, 0.16);
  --line-d: rgba(242, 243, 240, 0.18);
  --blue: #2B5BE3;
  --rose: #DE4B32;
  --amber: #E8A33D;
  --sans: "Switzer", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --wrap: 82rem;
  --r: 18px;
}

/* ---------- 02 base + the morphing ground ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #DDDDE0;
  color: var(--ink-l);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
::selection { background: #17181A; color: #EDEDEF; }
/* height:auto is the standard responsive-image safety net: images that
   carry HTML width/height attributes (added for layout-shift prevention)
   get a browser-mapped fixed pixel height that CSS width overrides don't
   touch by default, which stretches them once the box is narrower than
   the attribute width. More specific rules (.card img, .gal img, etc.)
   already set height:100% themselves and win the cascade, so this only
   fixes images that don't otherwise declare a height. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; }

/* fixed atmosphere layers: vignette + ripple rings + tint washes */
/* fixed soft-gray field with a bright white vignette, never shifts */
.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ground .vig {
  position: absolute; inset: 0; opacity: 1;
  background:
    radial-gradient(115% 95% at 50% 22%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 26%, rgba(255,255,255,0) 58%),
    radial-gradient(150% 130% at 50% 40%, #F4F4F5 0%, #E4E4E7 42%, #D2D2D6 74%, #C6C6CB 100%);
}
.ground .rings, .ground .tint { display: none; }

main, footer { position: relative; z-index: 1; }
.wrap { width: min(var(--wrap), calc(100% - clamp(2.2rem, 6vw, 5.5rem))); margin-inline: auto; }
.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: fixed; top: -4rem; left: 1rem; z-index: 300;
  background: #111214; color: #fff; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.75rem 1.2rem; border-radius: 999px; transition: top 0.3s var(--ease);
}
.skip:focus-visible { top: 1rem; }

/* sections declare their ground + mode */
section[data-bg], header[data-bg], footer[data-bg] { position: relative; }
.on-light { color: var(--ink-l); }
.on-dark { color: var(--ink-d); }
.on-light .muted, .on-light .body { color: var(--mut-l); }
.on-dark .muted, .on-dark .body { color: var(--mut-d); }

/* ---------- 03 type ---------- */
h1, h2, h3 { font-weight: 500; }
.hx {
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.04;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
}
.hx em, .h-title em, .hero-a em, .hero-b em, .mega em, .quote em, .pull em, .opening em, .big em, .close-band h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: -0.01em; line-height: 1;
}
.lede { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; max-width: 40rem; }
.body { max-width: 42rem; }
.body + .body { margin-top: 1.05rem; }
.body em { font-style: italic; }
.on-light .body b { color: var(--ink-l); }
.on-dark .body b { color: var(--ink-d); }
.cap {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.on-light .cap { color: var(--faint-l); }
.on-dark .cap { color: var(--faint-d); }
.center { text-align: center; }
.center .lede, .center .body { margin-inline: auto; }

/* ---------- 04 pills + chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0;
  padding: 0.72em 1.35em; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform 0.4s var(--spring), background 0.3s, color 0.3s, box-shadow 0.4s;
  white-space: nowrap;
}
.pill:hover { transform: scale(1.04); }
.pill:active { transform: scale(0.98); }
.pill-dark { background: #111214; color: #fff; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5); }
.pill-light { background: #fff; color: #111214; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.35); }
/* liquid glass: translucent, blurred, with a specular top edge */
.pill-ghost {
  background: rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 10px 30px -14px rgba(0, 0, 0, 0.45);
}
.pill-ghost:hover { background: rgba(255, 255, 255, 0.16); }
.on-light .pill-ghost {
  background: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 1px rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px rgba(22, 23, 25, 0.12),
    0 10px 30px -14px rgba(0, 0, 0, 0.18);
}
.on-light .pill-ghost:hover { background: rgba(255, 255, 255, 0.55); }
.pill-blue { background: var(--blue); color: #fff; }
.pill-rose { background: var(--rose); color: #fff; }
.pill-amber { background: var(--amber); color: #17130A; }
.pill .a { transition: transform 0.4s var(--ease); }
.pill:hover .a { transform: translateX(3px); }

.chip {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.4);
  transform: scale(var(--mag, 1));
  transform-origin: 50% 100%;
  transition: transform 0.18s ease-out, margin 0.18s ease-out;
  will-change: transform, margin;
  display: block;
}
.chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chip::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 -2px 5px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

/* the floating chip row that docks into the nav */
.chiprow {
  position: absolute; left: 50%; top: 42vh;
  transform: translateX(-50%) scale(1.15);
  display: flex; align-items: center; gap: 0.6rem; z-index: 100;
}
.chiprow .pill { font-size: 0.84rem; }
html.reduced .chiprow, .chiprow.static { position: static; transform: none; justify-content: center; margin-top: 1.6rem; }

/* ---------- 05 nav ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem clamp(1.1rem, 3vw, 2.4rem);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar .brand, .bar .nav .navlink { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.bar:not(.inv) .brand, .bar:not(.inv) .navlink { text-shadow: 0 1px 14px rgba(255, 255, 255, 0.5); }
.brand { display: flex; align-items: center; line-height: 1; }
.brand .wm { font-weight: 800; font-size: 1rem; letter-spacing: 0.13em; text-transform: uppercase; }
.bar .nav { display: flex; align-items: center; gap: 0.5rem; }
.bar .nav .navlink {
  font-size: 0.82rem; font-weight: 600; padding: 0.55em 1.05em; border-radius: 999px;
  transition: background 0.3s, color 0.3s;
}
.bar.inv { color: var(--ink-d); }
.bar:not(.inv) { color: var(--ink-l); }
.bar .navlink:hover { background: rgba(127, 127, 132, 0.16); }
.bar .navlink[aria-current="page"] { background: rgba(127, 127, 132, 0.14); }
.bar .pill { font-size: 0.82rem; padding: 0.62em 1.25em; }
.bar:not(.inv) .bar-cta { background: #111214; color: #fff; }
.bar.inv .bar-cta { background: #fff; color: #111214; }

/* ---------- 06 reveals ---------- */
.js [data-e] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
  filter: blur(6px);
}
.js [data-e].in { opacity: 1; transform: translateY(0); filter: blur(0); }

.whisper .w { display: inline-block; }
.js .whisper .w > i {
  display: inline-block; font-style: inherit; opacity: 0; filter: blur(10px);
  transform: translateY(0.25em);
  transition: opacity 0.9s var(--ease), filter 1.1s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--w, 0) * 70ms + var(--d, 0) * 90ms);
}
.js .whisper.in .w > i { opacity: 1; filter: blur(0); transform: translateY(0); }

/* ---------- 07 cards ---------- */
.card {
  border-radius: var(--r); overflow: hidden; display: block; position: relative;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--rot, 0deg)) translateY(var(--fy, 0px));
  transition: box-shadow 0.5s var(--ease);
  background: #101112;
}
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.card:hover { box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.55); }
a.card::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.card .card-cap {
  position: absolute; left: 0.9rem; bottom: 0.9rem; right: 0.9rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.card .card-cap .pill { font-size: 0.78rem; padding: 0.55em 1.1em; }
.card-note {
  position: absolute; color: #fff; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.02em; left: 1rem; top: 1rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* floating collage */
.float-zone { position: relative; }
.fl { position: absolute; will-change: transform; transition: box-shadow 0.5s var(--ease), filter 0.5s var(--ease); }
.fl img { transition: transform 0.6s var(--ease); }
.fl:hover { z-index: 4; box-shadow: 0 50px 100px -36px rgba(0, 0, 0, 0.6); }
.fl:hover img { transform: scale(1.07) rotate(1.2deg); }

/* work feature rows */
.feature { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: end; }
.feature .f-copy { padding-bottom: 0.6rem; }
.feature .f-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.55rem; }
.feature .f-copy p { max-width: 30rem; }
.feature .f-copy .pill { margin-top: 1.1rem; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); }

/* ---------- 08 hero ---------- */
.hero {
  position: relative; min-height: 100svh; overflow: clip;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(5.5rem, 12vh, 8rem) clamp(1.2rem, 3.5vw, 3rem) clamp(2.2rem, 5vh, 3.4rem);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg img, .hero-bg video {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.9;
}
.hero-bg video { transform: scale(1.18); transform-origin: 30% 32%; }
.hero-bg .hero-still { display: none; }
html.reduced .hero-bg video { display: none; }
html.reduced .hero-bg .hero-still { display: block; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,15,14,0.55) 0%, rgba(13,15,14,0.1) 34%, rgba(13,15,14,0.16) 62%, rgba(13,15,14,0.78) 100%);
}
.hero-a { align-self: flex-start; font-weight: 500; letter-spacing: -0.03em; line-height: 0.99; font-size: clamp(3rem, 8.4vw, 7.6rem); }
.hero-a .l2 { display: block; }
.hero-b { align-self: flex-end; text-align: right; font-weight: 500; letter-spacing: -0.03em; line-height: 0.96; font-size: clamp(3rem, 9vw, 8.2rem); margin-top: -0.4em; }
.hero-b .sm { display: block; font-size: 0.34em; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.25em; }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: auto; }
.hero-foot .lede {
  max-width: 27rem; font-size: 1.02rem; line-height: 1.72;
  color: rgba(210, 214, 209, 0.55);
}
.hero-foot .lede .hl { color: #F4F5F2; font-weight: 500; }
.hero-foot .cta-row { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 09 sections ---------- */
.section { padding-block: clamp(5.5rem, 13vh, 9.5rem); }
.sec-head { max-width: 52rem; margin-inline: auto; text-align: center; }
.sec-head .cap { display: block; margin-bottom: 1.1rem; }
.sec-head .hx { margin-inline: auto; }
.sec-head .body { margin: 1.6rem auto 0; }

/* ---------- 10 rail carousel ---------- */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 1rem; overflow-x: auto; padding: 1.6rem 0.2rem 1.8rem;
  scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }
.tcard {
  width: clamp(15rem, 22vw, 19rem); min-height: 15rem;
  border-radius: 20px; padding: 1.4rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  border: 1px solid var(--line-l);
  transition: border-color 0.4s, transform 0.5s var(--ease), background 0.4s;
  background: rgba(255, 255, 255, 0.05);
}
.tcard:hover { border-color: rgba(22, 23, 25, 0.4); transform: translateY(-5px); background: rgba(255, 255, 255, 0.22); }
.tcard .t-num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--faint-l); }
.tcard h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.tcard p { font-size: 0.9rem; color: var(--mut-l); line-height: 1.6; }
.tcard .t-img { margin-top: auto; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; }
.tcard .t-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tcard:hover .t-img img { transform: scale(1.06); }
.dragcur {
  position: fixed; z-index: 240; pointer-events: none;
  background: #111214; color: #fff; font-size: 0.78rem; font-weight: 600;
  padding: 0.55em 1.05em; border-radius: 999px;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s var(--spring);
}
.dragcur.on { transform: translate(-50%, -50%) scale(1); }

/* ---------- 11 reading (case studies + business pages) ---------- */
.banner {
  position: relative; overflow: clip;
  min-height: 82svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(7rem, 15vh, 10rem) 0 clamp(3.4rem, 8vh, 5.5rem);
}
.banner > .wrap { width: min(var(--wrap), calc(100% - clamp(2.2rem, 6vw, 5.5rem))); margin-inline: auto; }
.banner .cap { display: block; margin-bottom: 1.3rem; }
.h-title {
  font-weight: 500; letter-spacing: -0.035em; line-height: 0.98;
  font-size: clamp(3rem, 9.4vw, 8rem);
  margin-bottom: clamp(1.3rem, 3vh, 1.9rem);
}
.banner .lede { margin-bottom: 1.5rem; }
.cta-row { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.4rem; }
.tags span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.45em 0.95em; border-radius: 999px; border: 1px solid var(--line-d);
}
.on-light .tags span { border-color: var(--line-l); color: var(--mut-l); }
.meta { display: flex; gap: clamp(1.8rem, 4vw, 3.4rem); flex-wrap: wrap; border-top: 1px solid var(--line-d); padding-top: 1.4rem; max-width: 44rem; }
.on-light .meta { border-color: var(--line-l); }
.meta .k { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 0.4rem; }
.meta p { font-size: 0.9rem; max-width: 24rem; color: var(--mut-d); }
.on-light .meta p { color: var(--mut-l); }

.num { padding-block: clamp(2.4rem, 6vh, 4rem); }
.num .body, .num .clist { max-width: 44rem; }
.num-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(1.3rem, 3vh, 1.8rem); }
.num-head .i {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint-l); flex-shrink: 0;
}
.num-head h2 { font-weight: 500; letter-spacing: -0.025em; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.06; }
.num-head::after {
  content: ""; flex: 1; height: 1px; background: var(--line-l);
  align-self: center; margin-left: 1.1rem; min-width: 2rem;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ease) 0.2s;
}
.num-head.in::after, html:not(.js) .num-head::after { transform: scaleX(1); }

.pull, .quote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.34; letter-spacing: -0.01em;
  max-width: 44rem; padding-block: clamp(2.2rem, 5vh, 3.4rem);
}
.clist { list-style: none; }
.clist li { position: relative; padding-left: 1.6rem; color: var(--mut-l); }
.clist li + li { margin-top: 0.95rem; }
.clist li::before {
  content: ""; position: absolute; left: 0; top: 0.66em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--ink-l); opacity: 0.55;
}
.clist b { color: var(--ink-l); }

.dgroup { max-width: 44rem; padding: 1.35rem 0 1.35rem 1.5rem; border-left: 1px solid var(--line-l); transition: border-color 0.4s; }
.dgroup + .dgroup { margin-top: 0.4rem; }
.dgroup:hover { border-left-color: var(--ink-l); }
.dgroup h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
.dgroup p { color: var(--mut-l); font-size: 0.95rem; }

.m-item { max-width: 44rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line-l); }
.m-item:last-child { border-bottom: none; }
.m-item h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
.m-item p { color: var(--mut-l); font-size: 0.95rem; }

.frame {
  border-radius: var(--r); overflow: hidden; position: relative;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.4);
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  background: #101112;
}
.frame img { width: 100%; height: auto; }
.frame figcaption, .figcap { font-size: 0.78rem; font-weight: 500; color: var(--faint-l); line-height: 1.6; }
.frame figcaption { padding: 0.8rem 1.05rem; background: #fff; color: var(--mut-l); border-top: 1px solid var(--line-l); }
.figcap { margin-top: 0.85rem; }
.showcase { margin-top: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.two .frame { margin-top: clamp(1.1rem, 3vh, 1.6rem); }
.screens { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.9rem; margin-top: 1.3rem; }
.screens figure { text-align: center; }
.screens img {
  width: 100%; height: auto;
  border-radius: 16px; box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.45);
  transition: transform 0.5s var(--ease);
}
.screens figure:hover img { transform: translateY(-6px) rotate(-1deg); }
.screens figcaption { margin-top: 0.6rem; font-size: 0.74rem; font-weight: 600; color: var(--faint-l); }
.feat-col { display: flex; flex-direction: column; gap: 0.9rem; margin-top: clamp(1.1rem, 3vh, 1.6rem); }
.feat-card {
  padding: 1.2rem 1.3rem; border-radius: 16px;
  background: rgba(255, 255, 255, 0.5); border: 1px solid var(--line-l);
}
.feat-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; }
.feat-card p { color: var(--mut-l); font-size: 0.88rem; }

.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.gal.gal-wide figure { aspect-ratio: 3 / 2; }
.gal figure {
  overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; background: #101112;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.4);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.5s var(--ease);
}
.gal figure:hover { transform: rotate(0deg) scale(1.02); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gal figure:hover img { transform: scale(1.07); }
.caption { margin-top: 1.1rem; font-size: 0.78rem; font-weight: 600; color: var(--faint-l); }

.link-list { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; margin-top: 1.3rem; }
.link {
  font-weight: 600; border-bottom: 1px solid var(--line-l);
  padding-bottom: 2px; transition: border-color 0.3s, color 0.3s;
}
.link:hover { border-color: var(--ink-l); }
.on-dark .link { border-color: var(--line-d); }
.on-dark .link:hover { border-color: var(--ink-d); }
.inline-link { font-weight: 600; border-bottom: 1px solid var(--line-l); transition: border-color 0.3s; }
.inline-link:hover { border-color: var(--ink-l); }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.6rem; }
.shot {
  overflow: hidden; border-radius: var(--r);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.4);
}
.shot img { transition: transform 1.2s var(--ease); }
.shot:hover img { transform: scale(1.03); }
.close-band { text-align: center; }
.close-band h2 { font-weight: 500; letter-spacing: -0.03em; font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: 1.02; }
.close-band p { color: var(--mut-l); margin: 1.1rem auto 1.7rem; max-width: 34rem; }
.on-dark.close-band p { color: var(--mut-d); }

/* ---------- 12 pricing + about ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.7rem; }
.pcard {
  padding: 1.7rem 1.5rem; border-radius: 20px;
  border: 1px solid var(--line-l); background: rgba(255, 255, 255, 0.34);
  transition: transform 0.5s var(--ease), border-color 0.4s, background 0.4s;
}
.pcard:hover { transform: translateY(-5px); border-color: rgba(22, 23, 25, 0.4); background: rgba(255, 255, 255, 0.6); }
.pcard .kicker { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint-l); margin-bottom: 0.85rem; }
.pcard h3 { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.pcard p { color: var(--mut-l); font-size: 0.9rem; }
.pcard .price { margin-top: 1.1rem; font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink-l); }
.pkg-note { margin-top: 1.5rem; font-size: 0.78rem; font-weight: 600; color: var(--faint-l); line-height: 1.9; }

.story { max-width: 46rem; }
.story .opening {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.38;
  margin-bottom: clamp(1.7rem, 4vh, 2.4rem);
}
.story p + p { margin-top: 1.05rem; }
.beliefs { max-width: 46rem; margin-top: clamp(2.6rem, 6vh, 4rem); }
.belief { display: flex; gap: 1.4rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid var(--line-l); }
.belief:last-child { border-bottom: none; }
.belief .n { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--faint-l); flex-shrink: 0; min-width: 2rem; }
.belief p { font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.28; letter-spacing: -0.015em; }

.arc { position: relative; max-width: 46rem; padding-left: clamp(2rem, 4.5vw, 2.8rem); }
.arc-rail { position: absolute; left: 2px; top: 0; height: 100%; width: 12px; pointer-events: none; }
.arc-rail line { stroke: var(--line-l); stroke-width: 1; }
.arc-rail .arc-fill { stroke: var(--ink-l); stroke-width: 1.5; }
.tl-row { position: relative; padding: clamp(2.2rem, 5.5vh, 3.6rem) 0; border-bottom: 1px solid var(--line-l); }
.tl-row:last-child { border-bottom: none; }
.tl-row::before {
  content: ""; position: absolute; left: calc(-1 * clamp(2rem, 4.5vw, 2.8rem) + 3px); top: calc(clamp(2.2rem, 5.5vh, 3.6rem) + 0.4em);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--silver); border: 1px solid rgba(22, 23, 25, 0.3);
  transition: background 0.5s, border-color 0.5s;
}
.tl-row.lit::before { background: var(--ink-l); border-color: var(--ink-l); }
.tl-row .yr { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint-l); margin-bottom: 0.4rem; }
.tl-row h3 { font-weight: 600; font-size: clamp(1.35rem, 2.5vw, 1.8rem); letter-spacing: -0.02em; }
.tl-row .tag { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; color: var(--faint-l); margin: 0.35rem 0 0.6rem; }
.tl-row p { color: var(--mut-l); font-size: 0.94rem; max-width: 40rem; }

.stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: clamp(2.2rem, 5vh, 3.2rem); }
.stack-group {
  padding: 1.5rem 1.5rem 1.6rem; border-radius: 20px;
  background: rgba(250, 250, 251, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(22, 23, 25, 0.08),
    0 24px 60px -34px rgba(0, 0, 0, 0.4);
}
.sg-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #3A3C40; margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tag-chip {
  font-size: 0.82rem; font-weight: 500; color: #17181A;
  padding: 0.4rem 0.9rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(22, 23, 25, 0.12);
  transition: transform 0.35s var(--spring), background 0.3s;
}
.tag-chip:hover { transform: translateY(-2px); background: #fff; }

/* ---------- 13 contact ---------- */
.email-big {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem); letter-spacing: 0;
  border-bottom: 1px solid var(--line-d); padding-bottom: 4px;
  transition: border-color 0.4s, opacity 0.3s;
}
.email-big:hover { border-color: var(--ink-d); opacity: 0.85; }
.form-pane {
  max-width: 42rem; margin-inline: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px;
  padding: clamp(1.7rem, 4vh, 2.6rem) clamp(1.3rem, 3.6vw, 2.4rem);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.f3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.05rem; }
.f2 .field, .f3 .field { margin-bottom: 0; }
.f-gap { margin-bottom: 1.05rem; }
.field label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut-d); }
.field label span { color: #fff; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px;
  color: var(--ink-d); font-family: var(--sans); font-size: 0.95rem;
  padding: 0.82rem 1rem; outline: none;
  transition: border-color 0.35s, background 0.35s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint-d); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.14);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field select { cursor: pointer; appearance: none; }
.field select option { background: #16181A; color: #F2F3F0; }
.form-err { color: #FFB4A0; font-size: 0.9rem; margin-bottom: 0.85rem; }
.form-ok { padding: 2.4rem 0; text-align: center; }
.form-ok h3 { font-size: 1.8rem; font-weight: 600; }
.form-ok p { margin-top: 0.45rem; color: var(--mut-d); }
.form-send { margin-top: 1.3rem; text-align: center; }

/* ---------- 14 mega type + footer ---------- */
.mega {
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9;
  font-size: clamp(3.6rem, 14.5vw, 13.5rem);
}
.mega em { text-transform: none; }
.js .mega-in { opacity: 0; transform: translateX(var(--mx, 60px)); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .mega-in.in { opacity: 1; transform: translateX(0); }
.corner-band { position: relative; overflow: clip; }
.corner-band .mega.tl { text-align: left; }
.corner-band .mega.br { text-align: right; }

.foot { padding: clamp(4.5rem, 10vh, 7rem) 0 0; overflow: clip; }
.foot-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; }
.foot .mega-mark { font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.88; font-size: clamp(3.4rem, 9.4vw, 8.6rem); }
.foot .mega-mark em { text-transform: none; }
.foot-sub { margin-top: 1.2rem; color: var(--mut-d); max-width: 26rem; }
.foot-dir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.fcol { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.fhead { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint-d); margin-bottom: 0.3rem; }
.fcol a { color: var(--mut-d); font-size: 0.92rem; transition: color 0.3s; }
.fcol a:hover { color: #fff; }
.foot-base {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: clamp(2.2rem, 5vh, 3.4rem); padding-block: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem; font-weight: 500; color: var(--faint-d);
}
.foot-strip { display: flex; gap: 0.6rem; margin-top: 1.6rem; }
.foot-strip .fs {
  flex: 1; aspect-ratio: 3 / 4; border-radius: 14px 14px 0 0; overflow: hidden;
  transform: translateY(var(--fsy, 14px)); box-shadow: 0 -10px 40px -20px rgba(0,0,0,0.8);
}
.foot-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.foot-strip .fs:hover img { transform: scale(1.07); }
.foot-nav { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 2.2rem; }
.foot-nav a {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1rem 1.25rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px;
  min-width: 11rem; transition: border-color 0.4s, transform 0.45s var(--ease), background 0.3s;
}
.foot-nav a:last-child { text-align: right; align-items: flex-end; }
.foot-nav a:hover { border-color: rgba(255, 255, 255, 0.5); transform: translateY(-3px); background: rgba(255,255,255,0.05); }
.foot-nav .d { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint-d); }
.foot-nav .t { font-weight: 600; font-size: 1.1rem; }

body.exit { opacity: 0; transition: opacity 0.22s ease; }

/* ---------- 15 a11y ---------- */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  .js [data-e], .js .whisper .w > i, .js .mega-in { opacity: 1; transform: none; filter: none; }
  .fl { position: relative !important; inset: auto !important; }
}

/* ---------- 16 responsive ---------- */
@media (max-width: 1060px) {
  .feature { grid-template-columns: 1fr; align-items: start; }
  .screens { grid-template-columns: repeat(3, 1fr); }
  .stack { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .chiprow { display: none; }
  /* icons + typing title: a flex sibling of .hero-foot, not nested inside
     it. Both this and .hero-foot use margin-top:auto, so the hero's flex
     column splits its free space evenly between them — chips settle in
     the top two-thirds, paragraph/CTAs stay pinned near the bottom, on
     any phone height, with no overlap possible. */
  .chiprow.static {
    position: static; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0.55rem 0.7rem; width: 100%; margin-top: auto; margin-bottom: 0;
  }
  .chiprow.static #cyclepill { order: 10; flex-basis: 100%; display: flex; justify-content: center; margin-top: 0.2rem; }
  .bar .navlink { display: inline-flex; }
  .bar .navlink.keep { display: inline-flex; }
}
@media (max-width: 720px) {
  .hero-a { font-size: clamp(2.6rem, 13vw, 4rem); }
  .hero-b { font-size: clamp(2.8rem, 14vw, 4.4rem); margin-top: 0.2em; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .hero-foot .cta-row { justify-content: flex-start; }
  .duo { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .cards3 { grid-template-columns: 1fr; }
  .gal { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .screens { grid-template-columns: repeat(2, 1fr); }
  .foot-dir { grid-template-columns: 1fr 1fr; }
  .foot-nav a { min-width: 0; flex: 1; }
  .foot-strip .fs:nth-child(n+5) { display: none; }
  .fl { position: static; margin: 0.8rem auto; max-width: 78% !important; }
  .float-zone { display: flex; flex-direction: column; }
  .mega { font-size: clamp(2.8rem, 15vw, 5rem); }
}
@media (max-width: 480px) {
  .f2, .f3 { grid-template-columns: 1fr; gap: 0; }
  .f2 .field, .f3 .field { margin-bottom: 1.05rem; }
  .gal { grid-template-columns: 1fr; }
  .foot-dir { grid-template-columns: 1fr; gap: 1.4rem; }
}


/* ==================== REFINEMENT PASS ==================== */

/* --- color-accent glow: masked fluid ink that pops on black --- */
.accent-glow {
  position: absolute; z-index: 0; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.55; filter: saturate(1.15);
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, transparent 82%);
  mask-image: radial-gradient(closest-side, #000 42%, transparent 82%);
  animation: glow-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}
.accent-glow img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes glow-drift {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); opacity: 0.42; }
  50%  { opacity: 0.62; }
  100% { transform: translate3d(2.5%, -3%, 0) scale(1.08) rotate(4deg); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) { .accent-glow { animation: none; } }

.banner .accent-glow { top: -12%; right: -8%; width: 52vw; height: 78%; }
.corner-band .accent-glow { top: 2%; left: -10%; width: 46vw; height: 82%; }
.contact-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.contact-glow .accent-glow { bottom: -18%; left: -6%; width: 46vw; height: 70%; opacity: 0.4; }
#contact .wrap { position: relative; z-index: 1; }

/* --- Gestalt grids: pack list-like blocks into columns, no crowding --- */
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; max-width: 46rem; }
.dgrid .dgroup { max-width: none; margin-top: 0; }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2rem; }
.mgrid .m-item { max-width: none; }
@media (max-width: 720px) { .dgrid, .mgrid { grid-template-columns: 1fr; } }

/* --- experience: focal row sits on the center line, rest recede --- */
html.js .arc .tl-row[data-e] { transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), filter 0.55s var(--ease); }
html.js .arc .tl-row[data-e].in { opacity: 0.38; }
html.js .arc .tl-row[data-e].in.focal { opacity: 1; transform: translateX(5px); }
html.js .arc .tl-row[data-e].in.focal .yr { color: var(--blue); }
html.reduced .arc .tl-row { opacity: 1 !important; transform: none !important; }

/* --- businesses / studios as legible overlaid cards --- */
.biz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: clamp(2rem, 5vh, 3rem); }
.biz-card { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3.1; box-shadow: 0 34px 74px -38px rgba(0,0,0,0.5); }
.biz-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.biz-card:hover img { transform: scale(1.06); }
.biz-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7,9,8,0.5) 0%, rgba(7,9,8,0) 32%, rgba(7,9,8,0) 58%, rgba(7,9,8,0.9) 100%); }
.biz-card .bc-top { position: absolute; top: 1.1rem; left: 1.2rem; right: 1rem; z-index: 2; color: #fff; }
.biz-card .bc-top .bc-name { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.biz-card .bc-top .bc-role { display: block; font-size: 0.82rem; color: rgba(255,255,255,0.82); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.biz-card .bc-bot { position: absolute; left: 1.2rem; bottom: 1.1rem; z-index: 2; }
.biz-card .bc-bot .pill { font-size: 0.78rem; padding: 0.55em 1.05em; }
.biz-card .bc-desc { position: absolute; right: 1.2rem; bottom: 1.25rem; left: 40%; z-index: 2; text-align: right; color: rgba(255,255,255,0.9); font-size: 0.82rem; line-height: 1.45; text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
@media (max-width: 720px) { .biz-grid { grid-template-columns: 1fr; } .biz-card .bc-desc { display: none; } }

/* --- hover color accents on cards + links --- */
a.card, .frame, .shot, .biz-card, .conv-card, .pcard, .tcard { transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.4s; }
a.card:hover { box-shadow: 0 44px 90px -34px rgba(0,0,0,0.55), 0 0 0 1px rgba(43,91,227,0.5); }
.gal figure:hover { box-shadow: 0 30px 64px -30px rgba(0,0,0,0.5), 0 0 0 1px rgba(222,75,50,0.45); }
.pcard:hover { border-color: rgba(43,91,227,0.5); }
.inline-link:hover, .link:hover { color: var(--blue); }
.on-dark .inline-link:hover, .on-dark .link:hover { color: #6f9bff; }

.stat-row { scroll-margin-top: 6rem; }


/* ==================== SINGLE-GRAY-FIELD LIGHT THEME ==================== */
/* only the hero video stays dark; everything else is dark ink on the gray field */

/* contact form */
.email-big { color: var(--ink-l); border-bottom-color: rgba(22,23,25,0.28); }
.email-big:hover { color: var(--blue); border-bottom-color: var(--blue); }
.form-pane {
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(22,23,25,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 30px 70px -40px rgba(0,0,0,0.35);
}
.field label { color: var(--mut-l); }
.field label span { color: var(--blue); }
.field input, .field select, .field textarea { background: rgba(255,255,255,0.82); border: 1px solid rgba(22,23,25,0.14); color: var(--ink-l); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint-l); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(43,91,227,0.5); background: #fff; box-shadow: 0 0 0 3px rgba(43,91,227,0.12); }
.field select option { background: #fff; color: var(--ink-l); }
.form-ok p { color: var(--mut-l); }
.form-err { color: #B4432B; }

/* footer */
.foot-sub { color: var(--mut-l); }
.fhead { color: var(--faint-l); }
.fcol a { color: var(--mut-l); }
.fcol a:hover { color: var(--blue); }
.foot-base { color: var(--faint-l); border-top-color: rgba(22,23,25,0.12); }
.foot-nav a { border-color: rgba(22,23,25,0.14); }
.foot-nav a:hover { border-color: rgba(43,91,227,0.5); background: rgba(255,255,255,0.55); }
.foot-nav .d { color: var(--faint-l); }
.foot-row { color: var(--mut-l); border-top-color: rgba(22,23,25,0.12); }
.foot-row a:hover { color: var(--blue); }

/* giant display type: dark ink, drop the dark-bg shadows */
.conv-ai, .conv-word, .mega, .mega-mark { color: var(--ink-l) !important; text-shadow: none !important; }
.close-band h2 { color: var(--ink-l); }
.conv-philo { color: var(--mut-l); text-shadow: none; }
.conv-philo b { color: var(--ink-l); }
.conv-cap { color: var(--faint-l); }
.conv-prog { background: rgba(22,23,25,0.14); }
.conv-prog i { background: var(--ink-l); }

/* meta label + nav shadow on gray */
.meta .k { color: var(--blue); }
.bar:not(.inv) .brand, .bar:not(.inv) .navlink { text-shadow: none; }
.bar:not(.inv) { color: var(--ink-l); }

/* link + inline-link default dark on gray */
.link { color: var(--ink-l); }
.inline-link { color: var(--blue); }


/* ==================== PASSIONS (scroll-revealed object graphics) ==================== */
.passions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(2.6rem, 6vh, 4rem); }
.passion { text-align: center; will-change: transform; }
.passion-obj {
  position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 30%, #EFEFF1 0%, #DDDDE0 70%, #D2D2D6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 26px 60px -34px rgba(0,0,0,0.34);
}
.passion-obj img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); will-change: transform; }
.passion:hover .passion-obj img { transform: scale(1.09) rotate(-2deg); }
.passion h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 1.1rem; }
.passion p { font-size: 0.86rem; color: var(--mut-l); line-height: 1.5; margin-top: 0.35rem; max-width: 15rem; margin-inline: auto; }
html.js .passion[data-e] .passion-obj { transform: rotate(var(--rot, 5deg)) translateY(26px) scale(0.94); transition: transform 1s var(--ease); }
html.js .passion[data-e].in .passion-obj { transform: rotate(0deg) translateY(0) scale(1); }
html.reduced .passion .passion-obj { transform: none !important; }
@media (max-width: 720px) { .passions-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.1rem; } }


/* ==================== EXPERIENCE: scroll-synced visual aid ==================== */
.arc-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.82fr); gap: clamp(1.6rem, 4vw, 3.6rem); align-items: start; }
.arc-layout .arc { max-width: none; }
.arc-visual { position: sticky; top: 15vh; }
.arc-visual-inner { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #202024; box-shadow: 0 44px 90px -46px rgba(0,0,0,0.55); }
.arc-visual-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s var(--ease); will-change: opacity; }
.arc-visual-tag { position: absolute; left: 0.85rem; bottom: 0.85rem; z-index: 2; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0.34em 0.75em; border-radius: 99px; }
@media (max-width: 860px) { .arc-layout { grid-template-columns: 1fr; } .arc-visual { display: none; } }


/* ==================== MOBILE UI/UX AUDIT FIXES ==================== */
@media (max-width: 860px) {
  /* kill pre-reveal horizontal translate that caused sideways scroll on phones */
  .mega-in { --mx: 0px !important; }
  /* roomier tap targets in the footer directory */
  .fcol { gap: 0.2rem; }
  .fcol a { padding-block: 0.4rem; }
}


/* ===== cycling glass bubble: matches the "Get in touch" liquid-glass button, but with no white fill ===== */
.pill-cyc { display: inline-flex; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cyc-bubble {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0.72em 1.35em; border-radius: 999px; min-height: 1.15em;
  background: transparent;
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 10px 30px -14px rgba(0, 0, 0, 0.45);
}
.pill-cyc:hover .cyc-bubble { box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    0 10px 30px -14px rgba(0, 0, 0, 0.45); }
.cyc-text {
  font-family: var(--sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0; line-height: 1;
  color: #F2F3F0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.cyc-caret {
  display: inline-block; width: 2px; height: 0.95em; margin-left: 0.14em; border-radius: 1px;
  background: #F2F3F0; vertical-align: middle;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  animation: cyc-blink 1.05s steps(1, end) infinite;
}
@keyframes cyc-blink { 0%, 55% { opacity: 0.9; } 55.01%, 100% { opacity: 0; } }
html.reduced .cyc-caret { display: none; }

/* ==================== MOBILE UI/UX AUDIT FIXES — PASS 2 (nav legibility + tap targets) ==================== */
.bar { transition: background .35s var(--ease), -webkit-backdrop-filter .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease); border-bottom: 1px solid transparent; }
.bar:not(.inv) {
  background: rgba(249, 249, 251, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom-color: rgba(20, 20, 25, 0.06);
}
@media (max-width: 860px) {
  .bar .brand { align-self: stretch; }
  .bar .nav .navlink, .bar .nav .pill { padding-top: 0.86em; padding-bottom: 0.86em; }
  .fcol a { padding-block: 0.55rem; }
}