/* =========================================================
   BY LUX · luxe theme
   Loads after site.css (and work.css on /work). Same elements,
   new skin: bone + onyx + champagne, serif display, hairlines.
   ========================================================= */
@font-face { font-family: 'BL Serif'; src: url('../fonts/CormorantGaramond-VF.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'BL Serif'; src: url('../fonts/CormorantGaramond-Italic-VF.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'BL Sans'; src: url('../fonts/Jost-VF.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #f3efe7;
  --bg-2: #e8e1d4;
  --ink: #14120f;
  --chip: #faf7f1;
  --muted: rgba(20, 18, 15, .58);
  --line: rgba(20, 18, 15, .14);
  --gold: #b0915e;
  --gold-soft: #d9c49b;
  --accent: #b0915e;
  --violet: #8f7448;
  --display: 'BL Serif', 'Cormorant Garamond', Georgia, serif;
  --text: 'BL Sans', 'Jost', Arial, sans-serif;
  --label: 11.5px;
  --track: .2em;
}
body { font-weight: 350; letter-spacing: 0; }
::selection { background: rgba(176, 145, 94, .28); }

/* ---------- serif display: lighter weight, natural spacing ---------- */
h2, .hero h1, .manifesto, .caps b, .k-num, .k-name, .k-fan button span, .tile h3, .v-front-ui b,
.chat-top b, .step-n, .steps b, .headline, .reel-title, .hud-name, .reel-tip span, .sel-num,
.sel-text h3, .row-name, .next-title, .case-title, .case-name, .lw-cta {
  font-weight: 500; letter-spacing: -0.005em;
}
h2 { font-size: clamp(38px, 4.4vw, 66px); line-height: 1.02; }
.hero h1 { font-size: clamp(62px, 8vw, 124px); line-height: .92; font-weight: 400; letter-spacing: -0.01em; }
.manifesto { font-size: clamp(30px, 3.9vw, 58px); line-height: 1.12; font-weight: 400; }
.manifesto .w { opacity: .16; }
.caps b, .steps b { font-size: 24px; }
.k-name { font-size: 21px; }
.tile h3 { font-size: clamp(24px, 2.3vw, 34px); }
.headline { font-size: 2.05vw; line-height: 1.1; font-weight: 400; }
.reel-title { font-weight: 400; letter-spacing: -0.02em; line-height: .88; }
.next-title { font-weight: 400; letter-spacing: -0.015em; }
.sel-num, .step-n, .k-num { font-style: italic; color: var(--gold); }
.sel-num { color: var(--gold); opacity: .9; }
.hero h1 span:nth-child(2) { font-style: italic; }

/* ---------- labels: small, tracked capitals ---------- */
.eyebrow, .tag, .feature-tag, .tile-kicker, .meta, .nav a, .pill-cta, .btn-ink, .k-full, .k-close,
.filters button, .hud-count, .sel-sector, .case-sector, .next-kicker, .lw-link, .sel-hit span,
.sel-live-tag, .case-loading, .k-cover-text, .featured-sub, .chips button, .case-nav button, .text-link, .case-mail {
  text-transform: uppercase; letter-spacing: var(--track); font-size: var(--label); font-weight: 400;
}
.meta { gap: clamp(22px, 2.8vw, 44px); }
.eyebrow { height: auto; padding: 0; border-radius: 0; background: none; margin-bottom: 26px; color: var(--muted); }
.eyebrow::before, .tag::before { content: ''; display: inline-block; width: 30px; height: 1px; margin-right: 14px; background: var(--gold); vertical-align: middle; }
.eyebrow-light { background: none; color: rgba(255, 255, 255, .85); backdrop-filter: none; -webkit-backdrop-filter: none; }
.featured-sub { letter-spacing: .14em; }

/* ---------- header + wordmark ---------- */
.brand { gap: 0; font-family: var(--display); font-weight: 500; font-size: 23px; letter-spacing: .24em; text-transform: uppercase; }
.brand-media { opacity: 1; color: var(--gold-soft); }
.site-header.is-solid .brand-media { color: var(--gold); }
.site-header.is-solid { background: rgba(243, 239, 231, .8); }
.pill-cta { height: 40px; padding: 0 20px; border-radius: 0; }
.pill-cta:hover { background: #fff; color: var(--ink); }
.site-header.is-solid .pill-cta { background: var(--ink); border-color: var(--ink); color: var(--chip); }
.site-header.is-solid .pill-cta:hover { background: var(--gold); border-color: var(--gold); }
.logo-word { font-family: var(--display); font-weight: 500; letter-spacing: .14em; fill: var(--ink); }
.logo-light { fill: var(--gold); }

/* ---------- hero: warmer glass, quieter grade ---------- */
.stage { background-color: #d9d2c5; }
.media { filter: saturate(.82) contrast(1.05) sepia(.08); }
.glass::after { background: conic-gradient(from 225deg, #e9d9b4, rgb(255 255 255 / 0.35), #ffffff, #cbb184, rgb(255 255 255 / 0.35), #e9d9b4); }
.track { background: rgb(22 18 12 / 0.28); }
.cell { font-weight: 300; letter-spacing: .01em; }
.scroll-cue { border-radius: 0; width: 1px; border: 0; background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0)); height: 54px; margin-left: 0; }
.scroll-cue span { display: none; }

/* ---------- surfaces: hairlines instead of bubbles ---------- */
.caps li, .steps li { border-radius: 0; background: none; border-top: 1px solid var(--line); padding: 26px 4px 6px 0; }
.steps li:hover { background: none; transform: none; border-top-color: var(--gold); }
.feature-card, .k-cover, .k-window, .tile, .sel-frame, .case-stage, .peek-in, .lw-card { border-radius: 2px; }
.feature-tag { border-radius: 0; background: rgba(250, 247, 241, .94); }
.feature-hint i, .case-loading span { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.featured-list li::after { content: ''; width: 18px; height: 1px; background: var(--gold); }
.btn-ink { height: 52px; padding: 0 28px; border-radius: 0; background: var(--ink); color: var(--chip); }
.btn-ink:hover { background: var(--gold); transform: none; }

.k-item { border-radius: 0; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 16px 6px; }
.k-item:hover { border-color: var(--line); }
.k-item.is-active { background: var(--ink); color: var(--chip); border-bottom-color: var(--ink); padding-left: 16px; }
.k-item.is-active .k-num { color: var(--gold-soft); }
.k-item.is-active .k-arrow { background: var(--gold); }
.k-arrow { background: none; border: 1px solid var(--line); }
.k-cover { background: linear-gradient(145deg, #ece5d8, #e2d9c8); }
.k-cover-text { border-radius: 0; background: rgba(250, 247, 241, .9); }
.k-fan button { border-radius: 2px; box-shadow: 0 30px 60px -20px rgba(28, 22, 12, .35); }
.k-fan button:hover { box-shadow: 0 40px 80px -24px rgba(28, 22, 12, .45); }
.k-window { box-shadow: 0 30px 80px rgba(28, 22, 12, .16), 0 0 0 1px var(--line); }
.k-bar { background: #f6f2ea; border-bottom-color: var(--line); }
.k-dots i { background: #d8cfbf; }
.k-full, .k-close { border-radius: 0; }
.k-full:hover { background: var(--gold); }
.k-fact { border-radius: 0; background: none; border-top: 1px solid var(--line); padding: 14px 0; }

.tile { background: var(--chip); }
.tile-ring { background: radial-gradient(circle at 60% 40%, #ffffff 0%, #f1ebe0 55%, #e6dece 100%); }
.tile-cards { background: #e6dfd2; }
.v-mid { background: #a39882; }
.swatches button, .chips button, .chat-form, .cards-ctrl button { border-radius: 0; }
.swatches button.is-active, .chips button:hover { background: var(--ink); color: var(--chip); }
.chips button { font-size: 10.5px; letter-spacing: .14em; }
.chat-orb { background: conic-gradient(from 0deg, #b0915e, #f1e4c6, #6b5a3e, #d9c49b, #b0915e); }
.chat-top span i { background: var(--gold); }
.msg { border-radius: 2px; }
.msg.me { background: var(--ink); color: var(--chip); }
.chat-form button { background: var(--ink); }

/* ---------- footer: warm monochrome ---------- */
.footer { background: #e8e1d4; }
.footer-background video { filter: grayscale(1) sepia(.32) contrast(1.06) brightness(1.03); }
.tag { background: none; padding-left: 0; text-transform: uppercase; letter-spacing: var(--track); font-size: .7vw; }
.footer-nav { font-weight: 300; }
.copyright, .note { color: var(--muted); }

@media (max-width: 900px) { .meta { font-size: 10.5px; } }
@media (max-width: 700px) {
  :root { --bg: #f3efe7; }
  .footer { background: #f3efe7; }
  .brand { font-size: 19px; }
  .tag { font-size: 11px; }
  .headline { font-size: clamp(26px, 7.4vw, 34px); }
  .hero h1 { font-size: clamp(54px, 15vw, 72px); }
}

/* =========================================================
   /work page (work.css)
   ========================================================= */
.site-header.on-light { background: rgba(243, 239, 231, 0); }
.site-header.on-light.is-scrolled { background: rgba(243, 239, 231, .8); }
.reel-veil { background:
  linear-gradient(to top, rgba(243, 239, 231, .96) 0, rgba(243, 239, 231, .7) 14%, rgba(243, 239, 231, 0) 30%),
  radial-gradient(120% 80% at 50% 45%, rgba(243, 239, 231, 0) 55%, rgba(232, 225, 212, .9) 100%); }
.reel-tip { border-radius: 0; background: rgba(20, 18, 15, .9); }
.hud-name:hover { color: var(--gold); }
.sel-frame { box-shadow: 0 50px 90px -40px rgba(28, 22, 12, .42), 0 18px 36px -24px rgba(20, 18, 15, .3); }
.sel-frame.active { box-shadow: 0 0 0 1px var(--gold), 0 50px 90px -40px rgba(28, 22, 12, .42); }
.sel-hit span, .sel-live-tag, .case-loading { border-radius: 0; }
.sel-live-tag i { background: var(--gold); }
.sel-text h3 { font-weight: 400; }
.index { background: #faf7f1; }
.row-name { font-weight: 400; }
.row-btn:hover, .row-btn:focus-visible { color: var(--chip); }
.case-nav button { border-radius: 0; }
.case-stage { box-shadow: 0 40px 80px -40px rgba(28, 22, 12, .42); }
.row-thumb { border-radius: 0; }

/* homepage work wall (its styles are inline in index.html, so win on specificity) */
.lw .lw-stage .lw-card { border-radius: 2px; box-shadow: 0 30px 60px -30px rgba(28, 22, 12, .4); }
.lw .lw-stage .lw-card span { border-radius: 0; background: rgba(20, 18, 15, .88); }
.lw .lw-stage .lw-cta:hover { background: var(--gold); }
.lw .lw-head .lw-link { border-bottom-color: var(--gold); }

/* =========================================================
   v3 · larger, richer, more depth
   ========================================================= */
:root { --label: 12.5px; --muted: rgba(20, 18, 15, .64); --ease-lux: cubic-bezier(0.16, 1, 0.3, 1); }
body { font-weight: 400; font-size: 17px; }
body::after { content: ''; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  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"); }
main { background:
  radial-gradient(1100px 700px at 88% 22%, rgba(217, 196, 155, .22), transparent 70%),
  radial-gradient(900px 600px at 6% 58%, rgba(217, 196, 155, .16), transparent 70%),
  radial-gradient(1000px 700px at 85% 86%, rgba(217, 196, 155, .18), transparent 70%); }

.meta, .nav a { font-size: 12.5px; }
.pill-cta { height: 44px; padding: 0 24px; }
h2 { font-size: clamp(42px, 4.9vw, 76px); }
.caps b, .steps b { font-size: 28px; line-height: 1.1; }
.caps span, .steps p, .tile-copy p:last-child:not(.tile-kicker) { font-size: 16.5px; line-height: 1.55; }
.featured-lead { font-size: 21px; line-height: 1.55; }
.featured-list li { font-size: 16.5px; padding: 14px 0; }
.k-lead, .lab-sub, .featured-sub { font-size: 18px; }
.k-name { font-size: 24px; }
.k-sec { font-size: 14.5px; }
.tile h3 { font-size: clamp(28px, 2.6vw, 40px); }
.btn-ink { height: 58px; padding: 0 34px; }

/* cards with depth: warm paper, gold hairline, soft shadow */
.caps li, .steps li {
  position: relative; padding: 30px 28px 32px; border-radius: 3px; border: 1px solid rgba(176, 145, 94, .2);
  background: linear-gradient(180deg, #fcfaf6 0%, #f4eee4 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28, 22, 12, .05), 0 30px 60px -40px rgba(28, 22, 12, .45);
  transition: transform .9s var(--ease-lux), box-shadow .9s var(--ease-lux), border-color .6s;
}
.caps li::before, .steps li::before { content: ''; position: absolute; left: 28px; top: 0; width: 36px; height: 2px; background: var(--gold); transition: width .9s var(--ease-lux); }
.caps li:hover, .steps li:hover { transform: translateY(-8px); border-color: rgba(176, 145, 94, .45);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(28, 22, 12, .05), 0 46px 80px -40px rgba(28, 22, 12, .55); }
.caps li:hover::before, .steps li:hover::before { width: calc(100% - 56px); }
.steps li:hover { border-top-color: rgba(176, 145, 94, .45); background: linear-gradient(180deg, #fefcf8 0%, #f6f0e6 100%); }

.tile { border: 1px solid rgba(176, 145, 94, .18); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 40px 80px -50px rgba(28, 22, 12, .5); }
.feature-card, .k-cover, .k-window { box-shadow: 0 60px 100px -50px rgba(28, 22, 12, .6), 0 20px 40px -30px rgba(28, 22, 12, .35); }
.feature-card { transition: transform 1.2s var(--ease-lux), box-shadow 1.2s var(--ease-lux); }
.feature-card:hover { transform: translateY(-6px); }
.k-item { transition: background .5s, color .5s, padding .6s var(--ease-lux), transform .6s var(--ease-lux); }
.k-item:hover { padding-left: 16px; transform: none; }
.k-fact { padding: 18px 0; }
.k-fact dd { font-size: 16px; }

/* buttons: gold sweep */
.btn-ink, .site-header.is-solid .pill-cta { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #2a2620 0%, #14120f 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 34px -18px rgba(20, 18, 15, .7); }
.btn-ink::before, .site-header.is-solid .pill-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, #c9a96f, #e6d3a8 50%, #b0915e);
  transform: translateX(-101%); transition: transform .8s var(--ease-lux); }
.btn-ink:hover, .site-header.is-solid .pill-cta:hover { background: linear-gradient(180deg, #2a2620 0%, #14120f 100%); color: var(--ink); }
.btn-ink:hover::before, .site-header.is-solid .pill-cta:hover::before { transform: none; }

/* scroll reveals (classes added by luxe.js) */
.lx-r { opacity: 0; transform: translateY(42px); filter: blur(6px); transition: opacity 1.3s var(--ease-lux), transform 1.5s var(--ease-lux), filter 1.3s var(--ease-lux); transition-delay: var(--d, 0s); }
.lx-r.lx-in { opacity: 1; transform: none; filter: none; }
.lx-img { clip-path: inset(8% 6% 8% 6%); transition: clip-path 1.8s var(--ease-lux); }
.lx-img.lx-in { clip-path: inset(0 0 0 0); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (max-width: 700px) {
  body { font-size: 16px; }
  .caps li, .steps li { padding: 26px 22px 28px; }
  .caps li::before, .steps li::before { left: 22px; }
  .caps b, .steps b { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-r, .lx-img { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
}
.featured-sub { font-size: 13.5px; letter-spacing: .18em; }
.footer-background video { filter: grayscale(1) sepia(.36) brightness(.955) contrast(1.04); }
.footer { background: #efe9df; }
.footer-background video { filter: grayscale(1) contrast(1.06) brightness(1.06); mix-blend-mode: multiply; }
@media (max-width: 700px) { .footer { background: #efe9df; } }
.footer-background { mix-blend-mode: multiply; }
.footer-background video { mix-blend-mode: normal; }

/* =========================================================
   v4 · big, soft and blended (no boxed "middle parts")
   ========================================================= */
.studio, .featured, .concepts, .lab, .process { max-width: 1600px; }

/* featured: full-bleed film that melts into the page */
.featured { grid-template-columns: 1fr; gap: 0; }
.featured-head { margin-bottom: clamp(10px, 2vw, 30px); }
.feature-card {
  width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: auto; height: min(88vh, 56vw); min-height: 420px;
  border-radius: 0; box-shadow: none !important; background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 80%, transparent 100%);
}
.feature-card:hover { transform: none; }
.feature-card::after { background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(20, 18, 15, .35) 100%); }
.feature-logo { left: var(--gutter); top: 17%; width: clamp(130px, 13vw, 210px); }
.feature-tag { right: var(--gutter); top: 17%; }
.feature-hint { left: var(--gutter); bottom: 27%; }
.feature-bar { left: var(--gutter); right: var(--gutter); bottom: calc(27% - 18px); }
.featured-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px clamp(40px, 6vw, 110px); align-items: start; margin-top: -3vw; position: relative; z-index: 2; }
.featured-lead { grid-column: 1; font-family: var(--display); font-size: clamp(26px, 2.3vw, 36px); line-height: 1.3; }
.featured-list { grid-column: 2; grid-row: 1 / span 2; }
.btn-ink { grid-column: 1; }

/* soft, generous corners everywhere */
.caps li, .steps li { border-radius: 22px; }
.caps li::before, .steps li::before { left: 28px; }
.k-window, .sel-frame { border-radius: 24px; }
.tile, .k-fan button, .case-stage { border-radius: 26px; }
.peek-in { border-radius: 18px; }
.lw .lw-stage .lw-card { border-radius: 14px; }
.row-thumb { border-radius: 10px; }
.btn-ink, .pill-cta, .site-header.is-solid .pill-cta, .k-full, .k-close, .feature-tag, .k-cover-text, .sel-hit span,
.sel-live-tag, .case-loading, .case-nav button, .chips button, .swatches button, .chat-form, .reel-tip, .lw .lw-stage .lw-card span { border-radius: 999px; }
.msg { border-radius: 18px; }
.msg.me { border-bottom-right-radius: 6px; } .msg.bot { border-bottom-left-radius: 6px; }

/* concepts: the fan floats on the page instead of sitting in a box */
.k-layout { grid-template-columns: 340px 1fr; gap: clamp(30px, 4vw, 70px); }
.k-cover { background: radial-gradient(60% 60% at 55% 45%, rgba(217, 196, 155, .35), transparent 70%); box-shadow: none; aspect-ratio: 16 / 10.5; overflow: visible; }
.k-fan button { width: 46%; box-shadow: 0 40px 80px -30px rgba(28, 22, 12, .45); }
.k-window { box-shadow: 0 50px 100px -50px rgba(28, 22, 12, .55), 0 0 0 1px rgba(176, 145, 94, .18); }

/* lab: 3D pieces float, photo and chat stay soft cards */
.tile-ring, .tile-cards { background: radial-gradient(70% 65% at 55% 50%, rgba(255, 255, 255, .85), rgba(243, 239, 231, 0) 75%); border: 0; box-shadow: none; overflow: visible; }
.tile-chat { background: linear-gradient(180deg, #fcfaf6, #f3ede3); border: 1px solid rgba(176, 145, 94, .16); box-shadow: 0 40px 80px -50px rgba(28, 22, 12, .45); }
.tile-loupe { border: 0; box-shadow: 0 50px 90px -50px rgba(28, 22, 12, .6); }
.bento { gap: 26px; grid-auto-rows: 320px; }

/* /work: bigger, softer frames */
.sel-frame { box-shadow: 0 60px 110px -50px rgba(28, 22, 12, .5); }

@media (max-width: 1100px) { .k-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .feature-card { height: 74vh; min-height: 0; }
  .feature-logo, .feature-tag { top: 15%; }
  .featured-body { grid-template-columns: 1fr; margin-top: -6vw; }
  .featured-list, .btn-ink { grid-column: 1; grid-row: auto; }
  .featured-lead { font-size: 24px; }
  .bento { grid-auto-rows: auto; }
}
.feature-card { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 74%, transparent 97%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 74%, transparent 97%); }
.feature-card::after { background: linear-gradient(to bottom, transparent 55%, rgba(20, 18, 15, .25) 75%, transparent 100%); }
.feature-hint { bottom: 33%; } .feature-bar { bottom: calc(33% - 18px); }
.featured-body { margin-top: 0; }
.cards-ctrl { z-index: 5; }
.cards-ctrl span { padding: 6px 12px; border-radius: 999px; background: rgba(250, 247, 241, .9); }
.cards-ctrl button { border-radius: 50%; background: rgba(250, 247, 241, .9); }
@media (max-width: 700px) {
  .feature-tag { top: auto; right: auto; left: var(--gutter); bottom: calc(33% + 34px); font-size: 10.5px; }
  .feature-logo { width: 120px; }
}

/* =========================================================
   v5 · featured film back to a contained, softened frame;
   concept fan spread out with Vinyl in front
   ========================================================= */
.featured { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px clamp(36px, 5vw, 80px); max-width: 1440px; }
.feature-card { width: auto; margin-left: 0; height: auto; min-height: 0; aspect-ratio: 16 / 10; border-radius: 26px;
  -webkit-mask-image: none; mask-image: none; background: #111;
  box-shadow: 0 60px 110px -55px rgba(28, 22, 12, .6), 0 0 0 1px rgba(176, 145, 94, .14) !important; }
.feature-card:hover { transform: translateY(-4px); }
.feature-card::after { background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 45%); }
.feature-logo { left: 28px; top: 26px; width: clamp(110px, 11vw, 170px); }
.feature-tag { right: 24px; top: 24px; }
.feature-hint { left: 28px; bottom: 36px; }
.feature-bar { left: 28px; right: 28px; bottom: 22px; }
.featured-body { display: flex; flex-direction: column; justify-content: center; gap: 26px; margin-top: 0; }
.featured-lead { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.38; }

.k-fan { inset: 0 4%; }
.k-fan button { width: 40%; transition: transform .9s var(--ease-lux), box-shadow .9s var(--ease-lux), filter .6s; }
.k-fan button span { left: 16px; bottom: 14px; font-size: clamp(15px, 1.4vw, 21px); }
.k-fan:hover button:not(:hover) { filter: saturate(.75) brightness(.9); }
.k-fan button:hover { transform: translate(-50%, -60%) translateX(var(--x)) translateY(var(--y)) rotate(calc(var(--r) * .4)) scale(1.1);
  box-shadow: 0 60px 100px -30px rgba(28, 22, 12, .55); z-index: 10 !important; }
.k-fan button:nth-child(1) { box-shadow: 0 50px 90px -30px rgba(28, 22, 12, .5); }

@media (max-width: 700px) {
  .feature-card { height: auto; }
  .feature-tag { top: 20px; right: 18px; left: auto; bottom: auto; }
  .feature-logo { left: 20px; top: 22px; width: 96px; }
  .feature-hint { left: 20px; bottom: 32px; } .feature-bar { left: 20px; right: 20px; bottom: 20px; }
  .k-fan button { width: 50%; }
  .k-fan button[data-i="3"], .k-fan button[data-i="4"] { width: 42%; }
}
.k-fan button { width: 35%; }
.featured-list { width: 100%; }
.featured-list li { gap: 20px; }

/* =========================================================
   v6 · phones: no sideways drift, driver + concepts stacked
   ========================================================= */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
@media (max-width: 1100px) {
  .featured { grid-template-columns: minmax(0, 1fr); }
  .featured-body { margin-top: 8px; }
}
@media (max-width: 700px) {
  .feature-card { aspect-ratio: 4 / 3.2; border-radius: 20px; }
  .feature-tag { display: none; }
  .feature-logo { width: 104px; left: 18px; top: 18px; }
  .feature-hint { left: 18px; bottom: 30px; font-size: 13px; }
  .feature-bar { left: 18px; right: 18px; bottom: 18px; }
  .featured-lead { font-size: 23px; }
  .btn-ink { max-width: 100%; }

  .k-layout { grid-template-columns: minmax(0, 1fr); }
  .k-list { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); scroll-snap-type: x mandatory; }
  .k-item { scroll-snap-align: start; min-width: 190px; }
  .k-cover { aspect-ratio: 1 / 1.05; overflow: hidden; border-radius: 24px; }
  .k-fan { inset: 0; }
  .k-fan button { width: 62% !important; top: 44%; }
  .k-fan button[data-i="1"] { --x: -32% !important; --y: 5% !important; }
  .k-fan button[data-i="2"] { --x: 32% !important; --y: 5% !important; }
  .k-fan button[data-i="3"] { --x: -50% !important; --y: 15% !important; }
  .k-fan button[data-i="4"] { --x: 50% !important; --y: 15% !important; }
  .k-fan:hover button:not(:hover) { filter: none; }
  .k-cover-text { margin-bottom: 18px; font-size: 10.5px; }
  .site-header { max-width: 100vw; }
}
/* the reveal must not crop shadows once it has played */
.lx-img.lx-in { clip-path: inset(-40% -40% -40% -40%); }
@media (max-width: 700px) { .k-cover { overflow: visible; border-radius: 0; background: radial-gradient(60% 55% at 50% 45%, rgba(217, 196, 155, .3), transparent 70%); } }

/* drawn arrows (characters like ↗ turn into emoji on iPhone) */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; overflow: visible; }
.k-arrow .ico, .cards-ctrl .ico, .case-nav .ico { width: 15px; height: 15px; vertical-align: middle; }
.lw-cta em .ico { width: 18px; height: 18px; margin-top: 4px; }
.row-arrow .ico { width: 22px; height: 22px; }