/* LUMENIO ANIMATED — STUDIO IDENTITY / OCT 2026
   Independent studio art direction: kinetic editorial / polished motion.
   No film-specific assets or generic three-card homepage.
*/
:root {
  color-scheme: dark;
  --night: #07121c;
  --night-2: #0b1b2a;
  --night-3: #142a38;
  --paper: #f1eee6;
  --paper-dark: #dcd7cb;
  --ink: #13222b;
  --ink-soft: #56636b;
  --text: #f4f1e8;
  --muted: #9bb0b9;
  --champagne: #f5d29a;
  --gold: #d9a665;
  --aqua: #89dbe0;
  --line: rgba(213, 226, 226, .16);
  --container: 1380px;
  --sans: "Manrope", "DM Sans", "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--night); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body, p { line-height: 1.65; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--aqua); outline-offset: 5px; }
button { font: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
button { cursor: pointer; }
.container { width: min(var(--container), calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; top: -90px; left: 20px; z-index: 999; padding: 14px 20px; background: var(--paper); color: var(--ink); }
.skip-link:focus { top: 12px; }
.scroll-progress { pointer-events: none; position: fixed; top: 0; left: 0; z-index: 110; height: 3px; width: 0%; background: linear-gradient(90deg, var(--gold), var(--aqua)); }

.site-header { position: sticky; top: 0; z-index: 100; min-height: 92px; background: rgba(7, 18, 28, .87); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 0 12px rgba(219, 167, 93, .16)); }
.brand-type { display: flex; flex-direction: column; font-size: 15px; letter-spacing: .19em; line-height: 1.12; color: #f6e1b9; }
.brand-type strong { font-weight: 800; }
.brand-type small { font-size: 9px; font-weight: 700; letter-spacing: .44em; margin-top: 4px; color: var(--muted); }
.primary-nav { display: flex; align-items: center; gap: clamp(15px, 2.3vw, 38px); }
.primary-nav a { position: relative; display: inline-flex; align-items: center; gap: 9px; color: #d1d7d4; font-size: 11px; letter-spacing: .09em; font-weight: 800; text-transform: uppercase; white-space: nowrap; transition: color .25s; }
.primary-nav a:not(.lang-switch)::after { content: ""; position: absolute; bottom: -7px; height: 1px; width: 0; background: var(--gold); transition: width .25s; }
.primary-nav a:hover { color: #fff0ce; }
.primary-nav a:hover::after { width: 100%; }
.primary-nav .lang-switch { border: 1px solid rgba(236,205,155,.36); padding: 11px 13px 11px 15px; color: var(--champagne); border-radius: 2px; }
.primary-nav .lang-switch span { font-size: 15px; }
.menu-toggle { display: none; background: transparent; border: 0; color: #f4e5cc; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; align-items: center; gap: 10px; }
.menu-lines { display: flex; flex-direction: column; gap: 5px; width: 23px; }
.menu-lines i { height: 1px; width: 100%; background: currentColor; transform-origin: center; transition: transform .2s; }
.menu-toggle[aria-expanded="true"] .menu-lines i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines i:last-child { transform: translateY(-3px) rotate(-45deg); }

.hero { min-height: 785px; position: relative; isolation: isolate; overflow: hidden; padding: clamp(58px, 6vw, 96px) 0 0; background: radial-gradient(ellipse 64% 85% at 94% 38%, rgba(22, 68, 80, .36), transparent 67%), linear-gradient(145deg,#07121c,#081827 63%,#06121e); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(to right, rgba(235,224,207,.035) 1px, transparent 1px); background-size: 84px 100%; mask-image: linear-gradient(90deg, transparent, #000 45%, #000 93%); pointer-events: none; }
.hero::after { content: "LA"; position: absolute; left: -1%; bottom: -22%; font: 800 clamp(300px, 37vw, 660px)/1 var(--sans); letter-spacing: -.15em; color: rgba(255,255,255,.016); z-index: -1; pointer-events: none; }
.hero-glow { position: absolute; width: 700px; height: 700px; top: -380px; left: -360px; background: radial-gradient(circle,rgba(133,214,214,.09),transparent 70%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr); gap: min(5vw, 65px); align-items: center; min-height: 585px; }
.hero-copy { position: relative; z-index: 2; padding-block: 25px 50px; }
.overline, .eyebrow, .eyebrow-ink { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; }
.hero-overline { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; color: var(--aqua); margin-bottom: 38px; }
.signal { display: inline-block; height: 7px; width: 7px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 15px rgba(137,219,224,.85); }
.hero-place { color: #b2b8ba; white-space: nowrap; }
.overline-separator { height: 13px; width: 1px; background: rgba(230,236,226,.32); margin-inline: 3px; }
.hero-title { margin: 0 0 26px; font-family: var(--sans); font-weight: 800; letter-spacing: -.077em; text-transform: uppercase; font-size: clamp(56px, 6.1vw, 112px); line-height: .97; white-space: nowrap; }
.title-line { display: block; }
.title-line-first { color: #f2f1eb; }
.title-line-second { display: inline-flex; gap: .12em; align-items: baseline; color: var(--champagne); }
.title-line-second em { font: italic 400 1.16em/.9 var(--serif); letter-spacing: -.075em; text-transform: lowercase; color: var(--aqua); }
.hero-dot { color: var(--gold); margin-left: -.04em; }
.hero-description { max-width: 590px; margin-bottom: 30px; font-size: clamp(15px, 1.28vw, 18px); line-height: 1.82; color: #b7c5c9; font-weight: 500; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.btn-gold { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 208px; padding: 15px 18px 15px 20px; background: linear-gradient(112deg,#f5d8ab,#e2ac69); color: #0b1b25; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; border: 1px solid #f6dab4; transition: transform .24s, box-shadow .24s; }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(229,173,96,.24); }
.btn-gold span:last-child { font-size: 21px; font-weight: 400; }
.text-link { display: inline-flex; align-items: center; gap: 13px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.36); padding-block: 10px; color: #e5ebe6; transition: color .25s,border-color .25s; }
.text-link:hover { color: var(--aqua); border-color: var(--aqua); }
.text-link span { font-size: 17px; font-weight: 400; }
.hero-fineprint { display: flex; align-items: center; gap: 12px; margin-top: 64px; color: #8d9da5; font-size: 9px; letter-spacing: .22em; line-height: 1.75; font-weight: 700; text-transform: uppercase; }
.fineprint-line { height: 25px; width: 1px; background: var(--gold); }

.hero-stage { width: 100%; aspect-ratio: 1/1.05; min-height: 410px; position: relative; transform-style: preserve-3d; perspective: 1000px; }
.stage-grid { position: absolute; inset: 11% -3%; background: linear-gradient(rgba(147,191,188,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(147,191,188,.05) 1px,transparent 1px); background-size: 43px 43px; mask-image: radial-gradient(ellipse at center,#000,transparent 68%); transform: rotate(-14deg); }
.stage-aura { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle,rgba(217,167,90,.30) 0%,rgba(80,174,182,.14) 37%,transparent 71%); filter: blur(29px); animation: aura 6s ease-in-out infinite alternate; }
.stage-orbit { position: absolute; left: 50%; top: 49%; border-radius: 50%; border: 1px solid rgba(222,196,157,.36); transform: translate(-50%,-50%) rotate(-26deg); box-shadow: 0 0 38px rgba(244,192,119,.06); pointer-events: none; }
.stage-orbit-outer { width: 98%; height: 71%; border-color: rgba(144,216,216,.28); border-style: solid; animation: orbitA 18s linear infinite; }
.stage-orbit-middle { width: 79%; height: 88%; border-color: rgba(242,202,135,.55); transform: translate(-50%,-50%) rotate(24deg); animation: orbitB 24s linear infinite; }
.stage-orbit-inner { width: 67%; height: 67%; border-color: rgba(228,206,169,.24); transform: translate(-50%,-50%) rotate(20deg); }
.stage-orbit-middle::before { content: ""; position: absolute; top: 7%; left: 16%; width: 7px; height: 7px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 20px 5px rgba(238,187,109,.45); }
.stage-orbit-outer::after { content: ""; position: absolute; bottom: 7%; right: 21%; width: 5px; height: 5px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 15px 4px rgba(135,220,229,.37); }
.stage-plate { position: absolute; background: linear-gradient(135deg,rgba(183,233,230,.12),rgba(15,36,48,.08) 40%,rgba(234,171,103,.13)); border: 1px solid rgba(217,218,200,.19); backdrop-filter: blur(2px); box-shadow: 16px 25px 48px rgba(0,0,0,.09); }
.stage-plate-back { width: 56%; height: 55%; top: 20%; left: 22%; transform: rotate(25deg) skew(-7deg); clip-path: polygon(10% 0,100% 12%,89% 97%,0 88%); }
.stage-plate-front { width: 52%; height: 50%; top: 30%; left: 28%; transform: rotate(-18deg) skew(7deg); opacity: .55; clip-path: polygon(0 10%,90% 0,100% 88%,10% 100%); }
.stage-mark { position: absolute; top: 49%; left: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 48% 38%,rgba(246,201,137,.11),rgba(12,27,39,.92) 65%); box-shadow: 0 45px 85px rgba(0,0,0,.30), 0 0 115px rgba(226,164,90,.18), inset 0 0 52px rgba(247,192,115,.11); border: 1px solid rgba(236,204,153,.25); animation: float 5.6s ease-in-out infinite; }
.stage-mark::before { content: ""; position: absolute; inset: 6%; border-radius: inherit; border: 1px solid rgba(247,203,143,.23); }
.stage-mark img { position: relative; width: 90%; height: 90%; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 0 19px rgba(244,181,100,.16)); }
.stage-shine { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff7dd; box-shadow: 0 0 0 4px rgba(236,198,140,.06),0 0 22px 6px rgba(245,205,151,.5); }
.stage-shine-one { top: 14%; right: 19%; }
.stage-shine-two { bottom: 15%; left: 18%; }
.stage-label { position: absolute; z-index: 3; font-size: 9px; letter-spacing: .2em; line-height: 1.6; font-weight: 800; text-transform: uppercase; color: #b9c9cd; }
.stage-label-top { top: 7%; left: 2%; }
.stage-label-bottom { bottom: 9%; right: -1%; display: flex; align-items: center; gap: 10px; }
.label-dot { background: var(--gold); height: 5px; width: 5px; transform: rotate(45deg); }
.hero-base { display: flex; align-items: center; justify-content: space-between; min-height: 74px; margin-top: 15px; border-top: 1px solid rgba(222,230,222,.14); color: #82939d; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero-base-index { color: var(--gold); }
.hero-scroll { display: inline-flex; align-items: center; gap: 22px; color: #d7d8cf; }
.hero-scroll span { font-size: 18px; color: var(--aqua); }

.marquee-wrap { overflow: hidden; min-height: 77px; display: flex; align-items: center; background: #ddbb86; color: #12232d; border-block: 1px solid rgba(255,239,211,.28); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: ticker 42s linear infinite; }
.marquee-batch { flex-shrink: 0; display: inline-flex; align-items: center; }
.marquee-item { display: inline-flex; align-items: center; gap: 30px; margin-right: 30px; font-size: clamp(15px,1.7vw,23px); font-weight: 800; letter-spacing: -.025em; text-transform: uppercase; white-space: nowrap; }
.marquee-spark { font-size: 19px; font-weight: 400; color: #54747d; }

.section-cream { background: var(--paper); color: var(--ink); }
.section-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(10,30,42,.25); font-size: 10px; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; color: #57646a; }
.section-bar-decoration { font-size: 23px; color: #a57e53; font-weight: 400; line-height: 1; }
.section-bar-dark { border-color: var(--line); color: #9aabb3; }
.eyebrow-ink { color: #92683c; letter-spacing: .16em; }
.eyebrow { color: var(--aqua); }

.studio-section { padding: clamp(68px, 7vw, 118px) 0 82px; }
.studio-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(45px, 6.5vw, 118px); padding: clamp(60px, 6.2vw, 108px) 0 70px; }
.studio-heading { margin: 24px 0 0; font: 600 clamp(44px,5.1vw,84px)/1.12 var(--sans); letter-spacing: -.068em; }
.studio-heading em { font: italic 400 1.03em/1.13 var(--serif); letter-spacing: -.065em; color: #976b43; }
.studio-body { padding-top: 17px; }
.studio-lead { font-size: clamp(19px, 2.05vw, 26px); line-height: 1.6; font-weight: 600; letter-spacing: -.03em; color: #243642; }
.studio-body > p:not(.studio-lead) { max-width: 580px; color: #4e5c61; font-size: 15px; line-height: 1.9; }
.studio-foot { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 24px; margin-top: 31px; border-top: 1px solid rgba(21,43,50,.18); }
.studio-foot span { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #936f47; }
.studio-foot strong { font-size: 15px; line-height: 1.5; }
.studio-attributes { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(15,43,51,.2); }
.studio-attributes > div { padding: 28px 0 3px; display: flex; flex-direction: column; gap: 3px; }
.studio-attributes > div + div { padding-left: 31px; border-left: 1px solid rgba(15,43,51,.18); }
.studio-attributes span { font-size: 10px; font-weight: 800; letter-spacing: .19em; color: #85776b; }
.studio-attributes strong { font-size: clamp(22px,2.5vw,34px); font-weight: 700; letter-spacing: -.05em; }

.craft-section { position: relative; padding: clamp(78px, 7vw, 110px) 0 120px; background: radial-gradient(ellipse 65% 70% at 90% 100%, rgba(13,81,89,.12), transparent 70%), #08141f; overflow: hidden; }
.craft-section::before { content: "L"; position: absolute; right: -3%; top: -7%; color: rgba(255,255,255,.018); font: 800 650px/.85 var(--sans); pointer-events: none; }
.craft-top { display: grid; grid-template-columns: 1.12fr .88fr; gap: 80px; align-items: end; padding: 76px 0 64px; position: relative; }
.craft-title { font: 600 clamp(40px,4.55vw,72px)/1.2 var(--sans); letter-spacing: -.06em; margin: 20px 0 0; }
.craft-title em { color: var(--champagne); font: italic 400 1.05em/1.15 var(--serif); letter-spacing: -.05em; }
.craft-top > p { max-width: 360px; justify-self: end; font-size: 16px; line-height: 1.85; color: var(--muted); margin-bottom: 4px; }
.craft-list { border-top: 1px solid rgba(225,228,220,.25); }
.craft-row { display: grid; grid-template-columns: 82px minmax(0,1fr) 105px 24px; gap: clamp(14px,3vw,55px); align-items: center; padding: clamp(32px,3.5vw,50px) 12px; border-bottom: 1px solid rgba(225,228,220,.2); transition: background .3s, padding-left .3s; }
.craft-row:hover { padding-left: 23px; background: linear-gradient(100deg,rgba(136,219,222,.07),transparent); }
.craft-index { align-self: start; padding-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .15em; color: var(--aqua); }
.craft-row-main { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(240px,.7fr); gap: 50px; align-items: baseline; }
.craft-row h3 { font: 600 clamp(27px,3.1vw,49px)/1.14 var(--sans); letter-spacing: -.06em; margin: 0; }
.craft-row p { font-size: 14px; line-height: 1.85; color: #aebec5; max-width: 375px; margin: 0; }
.craft-arrow { justify-self: end; font-size: 25px; color: #b3c7c5; font-weight: 400; transition: transform .25s,color .25s; }
.craft-row:hover .craft-arrow { transform: translate(4px,-4px); color: var(--champagne); }
.craft-symbol { width: 80px; height: 80px; position: relative; display: block; justify-self: center; }
.craft-symbol i { position: absolute; display: block; }
.symbol-one i:nth-child(1) { width: 51px; height: 51px; left: 12px; top: 11px; border: 2px solid var(--gold); transform: rotate(25deg); }
.symbol-one i:nth-child(2) { width: 40px; height: 40px; left: 19px; top: 18px; border: 2px solid var(--aqua); border-radius: 50%; }
.symbol-one i:nth-child(3) { width: 8px; height: 8px; top: 2px; left: 49px; background: var(--champagne); }
.symbol-two i { width: 43px; height: 55px; border: 1px solid var(--aqua); border-radius: 60% 40% 50% 50%; }
.symbol-two i:nth-child(1) { left: 4px; top: 10px; transform: rotate(-25deg); }
.symbol-two i:nth-child(2) { left: 23px; top: 4px; transform: rotate(28deg); border-color: var(--gold); }
.symbol-two i:nth-child(3) { left: 38px; top: 15px; transform: rotate(54deg); border-color: rgba(255,255,255,.3); }
.symbol-three i { width: 56px; height: 14px; left: 13px; border-radius: 18px; background: linear-gradient(90deg,rgba(125,222,228,.15),rgba(125,222,228,.75)); transform: skew(-28deg); }
.symbol-three i:nth-child(1) { top: 11px; }
.symbol-three i:nth-child(2) { top: 32px; left: 0; width: 74px; background: linear-gradient(90deg,rgba(238,186,114,.7),rgba(238,186,114,.17)); }
.symbol-three i:nth-child(3) { top: 53px; left: 13px; }

.approach-section { padding: clamp(76px,8vw,130px) 0 clamp(75px,7.5vw,120px); }
.approach-intro { padding: 84px 0 65px; max-width: 950px; }
.approach-intro h2 { font: 600 clamp(42px,5vw,83px)/1.19 var(--sans); letter-spacing: -.065em; margin: 20px 0 23px; }
.approach-intro h2 em { font: italic 400 1em/1.12 var(--serif); color: #976b43; letter-spacing: -.05em; }
.approach-intro > p:last-child { font-size: clamp(16px,1.5vw,19px); line-height: 1.85; color: var(--ink-soft); max-width: 740px; }
.process-line { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(23px, 3vw, 45px); border-top: 1px solid rgba(10,30,42,.22); margin-top: 12px; }
.process-step { padding-top: 27px; }
.step-index { display: flex; align-items: center; gap: 12px; font-size: 11px; color: #9b7447; font-weight: 800; letter-spacing: .14em; margin-bottom: 31px; }
.step-index i { flex: 1; max-width: 70px; height: 1px; background: rgba(25,55,61,.22); }
.process-step h3 { font-size: clamp(22px,2.1vw,32px); font-weight: 700; letter-spacing: -.055em; margin-bottom: 13px; }
.process-step p { max-width: 242px; font-size: 14px; line-height: 1.83; color: #59676b; }
.approach-quote { font: italic 400 clamp(23px,3vw,41px)/1.45 var(--serif); letter-spacing: -.04em; text-align: center; color: #86603d; padding-top: 58px; margin: 68px auto 0; border-top: 1px solid rgba(10,30,42,.17); max-width: 900px; }

.connect-section { position: relative; isolation: isolate; overflow: hidden; padding: 89px 0 142px; background: #0a1a26; }
.connect-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(232,206,169,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(232,206,169,.035) 1px,transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(to right,transparent,#000 33%); }
.connect-beam { position: absolute; z-index: -1; width: 850px; height: 850px; border-radius: 50%; right: -440px; top: -200px; background: radial-gradient(circle, rgba(131,221,213,.18),rgba(207,150,83,.12) 34%,transparent 67%); filter: blur(12px); }
.connect-layout { display: grid; grid-template-columns: 1.07fr .93fr; gap: clamp(70px,9vw,180px); padding-top: 95px; }
.connect-layout h2 { font: 600 clamp(52px,5.6vw,92px)/1.12 var(--sans); letter-spacing: -.067em; margin: 23px 0 30px; }
.connect-layout h2 em { color: var(--champagne); font: italic 400 1.07em/1.08 var(--serif); letter-spacing: -.05em; }
.connect-description { max-width: 470px; color: #9eb3b9; font-size: 16px; line-height: 1.8; }
.connect-panel { border: 1px solid rgba(222,216,195,.26); background: rgba(4,14,23,.24); padding: 22px clamp(25px,3vw,44px); align-self: center; }
.connect-panel-label { display: block; font-size: 10px; text-transform: uppercase; color: var(--aqua); font-weight: 800; letter-spacing: .2em; padding: 11px 0 21px; }
.social-link { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 0 20px; border-top: 1px solid rgba(226,226,218,.18); font-size: clamp(19px,2.1vw,27px); font-weight: 700; letter-spacing: -.03em; transition: color .2s, padding-left .2s; }
.social-link span:last-child { font-size: 25px; font-weight: 400; color: var(--gold); }
.social-link:hover { padding-left: 10px; color: var(--champagne); }
.site-footer { background: #060e16; border-top: 1px solid var(--line); padding: 26px 0; }
.footer-content { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-identity { display: flex; gap: 12px; align-items: center; min-width: 260px; }
.footer-identity img { border-radius: 50%; width: 39px; height: 39px; }
.footer-identity > span { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--champagne); line-height: 1.3; }
.footer-identity strong { font-weight: 800; }
.footer-identity small { display: block; font-size: 8px; letter-spacing: .14em; font-weight: 600; color: #9ba9ab; margin-top: 3px; }
.footer-content p { margin: 0; color: #84949c; font-size: 11px; letter-spacing: .02em; }
.footer-content > a { font-size: 10px; letter-spacing: .1em; font-weight: 800; white-space: nowrap; }
.footer-content > a span { color: var(--gold); margin-left: 7px; font-size: 17px; }

@keyframes orbitA { from { transform:translate(-50%,-50%) rotate(-26deg) } to { transform:translate(-50%,-50%) rotate(334deg) } }
@keyframes orbitB { from { transform:translate(-50%,-50%) rotate(24deg) } to { transform:translate(-50%,-50%) rotate(-336deg) } }
@keyframes float { 0%,100% { transform:translate(-50%,-50%) translateY(0) } 50% { transform:translate(-50%,-50%) translateY(-14px) } }
@keyframes aura { from { opacity: .7; transform: scale(.87) } to { opacity: 1; transform: scale(1.1) } }
@keyframes ticker { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@media (hover:hover) {
  .hero-stage { transition: transform .5s cubic-bezier(.2,.7,.2,1); transform: perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); }
}
@media (max-width: 1250px) {
  .container { width: min(var(--container), calc(100% - 64px)); }
  .hero-title { font-size: clamp(51px, 5.65vw, 88px); }
  .hero-grid { gap: 20px; }
  .craft-row-main { gap: 25px; }
}
@media (max-width: 1050px) {
  .primary-nav { gap: 18px; }
  .primary-nav a { font-size: 10px; }
  .brand-type { font-size: 13px; }
  .hero-grid { grid-template-columns: 1fr .8fr; }
  .hero-overline { font-size: 9px; gap: 8px; }
  .hero-title { font-size: clamp(50px, 5.6vw, 80px); }
  .hero-description { font-size: 15px; }
  .hero-stage { min-height: 340px; }
  .craft-row-main { grid-template-columns: 1fr; gap: 10px; }
  .craft-row { grid-template-columns: 65px 1fr 90px 23px; }
}
@media (max-width: 800px) {
  .container { width: calc(100% - 42px); }
  .site-header, .header-inner { min-height: 75px; }
  .menu-toggle { display: inline-flex; }
  .primary-nav { position: absolute; display: none; right: 0; top: 75px; width: 100%; padding: 18px 21px 25px; background: #0a1b28; border-bottom: 1px solid rgba(239,218,174,.19); box-shadow: 0 19px 30px rgba(0,0,0,.26); flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: 13px 9px; font-size: 12px; }
  .primary-nav .lang-switch { margin-top: 12px; width: fit-content; padding: 10px 17px; }
  .hero { padding-top: 64px; }
  .hero-grid { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .hero-copy { padding: 0; }
  .hero-overline { font-size: 10px; margin-bottom: 26px; }
  .hero-title { font-size: clamp(56px, 10.4vw, 100px); }
  .hero-description { max-width: 650px; }
  .hero-fineprint { margin-top: 39px; }
  .hero-stage { width: min(560px,90%); min-height: 400px; align-self: center; margin-top: 8px; }
  .hero-base { margin-top: -10px; }
  .studio-layout { grid-template-columns: 1fr; gap: 30px; padding: 68px 0 56px; }
  .studio-heading { font-size: clamp(43px,7vw,73px); }
  .studio-body { padding: 0; }
  .craft-top { grid-template-columns: 1fr; gap: 14px; }
  .craft-top > p { justify-self: start; }
  .craft-title { font-size: clamp(39px,6.7vw,67px); }
  .connect-layout { grid-template-columns: 1fr; gap: 40px; padding-top: 65px; }
  .connect-layout h2 { font-size: clamp(47px,7vw,80px); }
  .process-line { grid-template-columns: repeat(2,1fr); }
  .process-step { margin-bottom: 15px; }
  .footer-content { flex-wrap: wrap; }
  .footer-content p { order: 3; width: 100%; }
}
@media (max-width: 570px) {
  .container { width: calc(100% - 36px); }
  .brand img { width: 39px; height: 39px; }
  .brand-type { font-size: 12px; }
  .brand-type small { font-size: 8px; }
  .hero { padding-top: 48px; }
  .hero-overline { flex-wrap: wrap; letter-spacing: .08em; }
  .hero-title { font-size: clamp(42px,10.2vw,60px); letter-spacing: -.075em; }
  .hero-description { font-size: 15px; line-height: 1.8; }
  .hero-actions { gap: 18px; }
  .btn-gold { min-width: 183px; padding: 11px 13px 11px 16px; }
  .text-link { font-size: 10px; }
  .hero-fineprint { margin-top: 40px; }
  .hero-stage { width: 100%; min-height: 315px; margin-top: 10px; }
  .stage-label { font-size: 7px; }
  .stage-mark { width: 59%; }
  .hero-base { min-height: 65px; }
  .hero-base-coord { display: none; }
  .marquee-wrap { min-height: 65px; }
  .marquee-item { font-size: 16px; gap: 22px; margin-right: 22px; }
  .studio-section, .craft-section, .approach-section { padding-block: 69px; }
  .studio-heading { font-size: clamp(39px,10vw,57px); }
  .studio-lead { font-size: 19px; }
  .studio-attributes { gap: 0; }
  .studio-attributes > div { padding: 19px 8px 0; }
  .studio-attributes > div:first-child { padding-left: 0; }
  .studio-attributes > div + div { padding-left: 9px; }
  .studio-attributes span { font-size: 8px; letter-spacing: .05em; }
  .studio-attributes strong { font-size: 15px; }
  .craft-top { padding: 63px 0 36px; }
  .craft-title { font-size: clamp(37px, 8.9vw, 58px); }
  .craft-row { grid-template-columns: 32px 1fr 30px; gap: 12px; padding: 25px 2px; }
  .craft-row:hover { padding-left: 5px; }
  .craft-row-main { gap: 10px; }
  .craft-row h3 { font-size: 27px; }
  .craft-row p { font-size: 13px; }
  .craft-symbol { display: none; }
  .craft-arrow { font-size: 20px; }
  .approach-intro { padding: 67px 0 30px; }
  .approach-intro h2 { font-size: clamp(38px,8.5vw,57px); }
  .process-line { column-gap: 16px; row-gap: 8px; }
  .process-step h3 { font-size: 23px; }
  .process-step p { font-size: 12px; line-height: 1.8; }
  .approach-quote { font-size: 25px; margin-top: 32px; padding-top: 32px; }
  .connect-section { padding-block: 70px 85px; }
  .connect-layout { padding-top: 59px; }
  .connect-layout h2 { font-size: clamp(44px, 10vw, 66px); }
  .connect-panel { padding: 14px 22px; }
  .footer-identity { min-width: auto; }
  .footer-content { gap: 18px; }
}
@media (max-width: 390px) {
  .hero-title { font-size: 41px; }
  .hero-overline .overline-separator, .hero-place { display: none; }
  .hero-stage { min-height: 275px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Lumenio studio: real interactions for craft and process. 2026-10-28 */
/* Native details/summary retain functionality even if scripts are unavailable. */
.craft-entry{border-bottom:1px solid rgba(225,228,220,.2)}
.craft-entry>.craft-row{list-style:none;cursor:pointer;border-bottom:0}
.craft-entry>.craft-row::-webkit-details-marker{display:none}
.craft-entry>.craft-row:focus-visible{outline:2px solid var(--champagne);outline-offset:-4px;border-radius:8px}
.craft-entry[open]>.craft-row{background:linear-gradient(100deg,rgba(136,219,222,.09),transparent);padding-left:23px}
.craft-entry[open] .craft-arrow{color:var(--champagne);transform:rotate(45deg)}
.craft-detail{
  margin:0 12px 22px 0;
  padding:21px clamp(20px,8.5vw,138px) 28px;
  border-top:1px solid rgba(150,203,205,.20);
  display:grid;grid-template-columns:minmax(170px,.45fr) minmax(200px,1fr);
  gap:14px clamp(18px,4vw,55px);
  background:linear-gradient(105deg,rgba(67,128,137,.12),rgba(12,31,43,.02));
  animation:lumenio-detail-in .28s ease-out;
}
.craft-detail-kicker{font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--champagne)}
.craft-detail p{font-size:15px;line-height:1.75;margin:0;color:#c4d5da;max-width:650px}
.craft-detail-link{grid-column:2;justify-self:start;color:var(--champagne);font-weight:700;font-size:12px;text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(237,196,137,.5)}
.craft-detail-link:hover{color:#fff0d5;border-bottom-color:#fff0d5}
.craft-detail-link:focus-visible{outline:2px solid #fff0d5;outline-offset:4px}
.process-step>.process-step-summary{list-style:none;cursor:pointer;display:block;position:relative;border-radius:8px;padding:0 14px 12px 0}
.process-step>.process-step-summary::-webkit-details-marker{display:none}
.process-step>.process-step-summary:focus-visible{outline:2px solid #88613b;outline-offset:5px}
.process-step-more{display:inline-flex;align-items:center;gap:12px;color:#8d6848;border-bottom:1px solid rgba(129,99,68,.38);padding-bottom:5px;font-size:11px;font-weight:800;letter-spacing:.03em}
.process-step-more span{font-size:18px;line-height:1.2;transition:transform .2s}
.process-step[open] .process-step-more span{transform:rotate(45deg)}
.process-step[open] .process-step-summary h3{color:#8c653e}
.process-step .process-detail{border-left:2px solid rgba(148,103,56,.55);max-width:330px;margin:14px 12px 9px 0;padding:4px 0 5px 13px;color:#435b60;line-height:1.75;font-size:13px;animation:lumenio-detail-in .28s ease-out}
@keyframes lumenio-detail-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){
 .craft-entry[open]>.craft-row{padding-left:5px}
 .craft-detail{margin:0 0 18px;padding:16px 24px 24px;grid-template-columns:1fr;gap:10px}
 .craft-detail-link{grid-column:1}
}
@media(max-width:570px){
 .craft-detail{padding:16px 12px 22px}
 .craft-detail p{font-size:13px}
 .process-step .process-detail{font-size:12px;padding-left:9px}
 .process-step-more{font-size:10px;gap:7px}
}
@media(prefers-reduced-motion:reduce){
 .craft-detail,.process-step .process-detail{animation:none}
 .process-step-more span{transition:none}
}

/* Prevent very narrow process columns from growing past the viewport. */
@media(max-width:570px){
  .process-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-step,.process-step-summary,.process-detail{min-width:0}
  .process-step-summary,.process-step .process-detail{overflow-wrap:anywhere;word-break:normal}
}