:root {
  --ink: #0c0d0f;
  --ink-soft: #15171a;
  --paper: #f0ede7;
  --paper-2: #e5e0d6;
  --accent: #c9aa74;
  --accent-deep: #b28d52;
  --line-dark: rgba(255,255,255,.14);
  --line-light: rgba(12,13,15,.16);
  --muted-dark: rgba(255,255,255,.65);
  --muted-light: rgba(12,13,15,.62);
  --serif: "Playfair Display", Georgia, serif;
  --serif-italic: "Spectral", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--sans); background:var(--ink); color:white; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button, input, textarea, select { font:inherit; }

.grain {
  pointer-events:none; position:fixed; inset:0; opacity:.045; z-index:999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.site-header { position:fixed; top:0; left:0; right:0; z-index:50; display:grid; grid-template-columns:minmax(270px,1fr) auto minmax(170px,1fr); align-items:start; padding:24px 38px; mix-blend-mode:difference; color:white; }
.brand-lockup { display:inline-flex; flex-direction:column; align-items:flex-start; gap:7px; width:max-content; }
.brand-name {
  font-size:28px; line-height:1; font-weight:500;
  color:#fff;
  text-shadow:0 0 18px rgba(201,170,116,.12);
  position:relative;
}

.brand-film-title { display:inline-flex; align-items:baseline; }
.brand-letter {
  --stagger:1.18s;
  position:relative; display:inline-block;
  margin-right:.36em;
  opacity:0;
  filter:blur(7px);
  transform:translateY(-5px) scale(.985);
  animation:letterSlowReveal 2.15s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i) * var(--stagger));
}
.brand-letter:last-child { margin-right:0; }
.brand-letter::before,
.brand-letter::after {
  content:attr(data-letter);
  position:absolute; inset:0;
  color:transparent; pointer-events:none;
  font:inherit;
  opacity:0;
}
.brand-letter::before {
  -webkit-text-stroke:.75px rgba(201,170,116,.62);
  text-stroke:.75px rgba(201,170,116,.62);
  z-index:-1;
  animation:letterGhostWarm 2.55s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc((var(--i) * var(--stagger)) + .18s);
}
.brand-letter::after {
  -webkit-text-stroke:.55px rgba(255,255,255,.22);
  text-stroke:.55px rgba(255,255,255,.22);
  z-index:-2;
  animation:letterGhostCool 2.6s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc((var(--i) * var(--stagger)) + .12s);
}
@keyframes letterSlowReveal {
  0% { opacity:0; filter:blur(7px); transform:translateY(-5px) scale(.985); }
  45% { opacity:.55; }
  100% { opacity:1; filter:blur(0); transform:none; }
}
@keyframes letterGhostWarm {
  0% { opacity:0; transform:translate(10px,2px); filter:blur(3px); }
  58% { opacity:.70; }
  100% { opacity:.50; transform:translate(2px,1px); filter:blur(0); }
}
@keyframes letterGhostCool {
  0% { opacity:0; transform:translate(-8px,-1px); filter:blur(3px); }
  60% { opacity:.38; }
  100% { opacity:.18; transform:translate(-1px,-1px); filter:blur(0); }
}

.brand-descriptor {
  display:flex; align-items:center; gap:10px;
  font-size:8.5px; line-height:1.2; text-transform:uppercase; letter-spacing:.22em;
  color:var(--accent); white-space:nowrap;
  animation:brandSubReveal 1.1s 7.95s ease both;
}
.brand-descriptor::after {
  content:""; width:30px; height:1px;
  background:linear-gradient(90deg, rgba(201,170,116,.95), rgba(201,170,116,0));
  transform-origin:left center;
  animation:brandLine 1.15s 8.35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes brandReveal {
  from { opacity:0; filter:blur(5px); letter-spacing:.48em; transform:translateY(-4px); }
  to   { opacity:1; filter:blur(0); letter-spacing:.36em; transform:none; }
}
@keyframes brandSubReveal {
  from { opacity:0; transform:translateY(-3px); }
  to   { opacity:1; transform:none; }
}
@keyframes brandLine {
  from { transform:scaleX(0); opacity:0; }
  to   { transform:scaleX(1); opacity:1; }
}
.brand { font-size:18px; letter-spacing:.28em; font-weight:600; }
.desktop-nav { display:flex; gap:28px; padding-top:1px; font-size:13px; color:rgba(255,255,255,.82); }
.sound-toggle { justify-self:end; display:inline-flex; align-items:center; gap:9px; padding:1px 0 6px; border:0; border-bottom:1px solid rgba(255,255,255,.32); background:transparent; color:rgba(255,255,255,.78); cursor:pointer; font-size:10px; text-transform:uppercase; letter-spacing:.14em; transition:.25s ease; }
.sound-toggle:hover { color:#fff; border-color:rgba(255,255,255,.72); }
.sound-bars { display:flex; align-items:center; gap:2px; height:11px; }
.sound-bars i { display:block; width:1px; height:4px; background:var(--accent); transform-origin:center bottom; opacity:.72; }
.sound-bars i:nth-child(2) { height:8px; }
.sound-bars i:nth-child(3) { height:6px; }
.sound-toggle.is-on .sound-bars i { animation:soundPulse .9s ease-in-out infinite alternate; }
.sound-toggle.is-on .sound-bars i:nth-child(2) { animation-delay:.18s; }
.sound-toggle.is-on .sound-bars i:nth-child(3) { animation-delay:.36s; }
@keyframes soundPulse { from { transform:scaleY(.45); opacity:.48; } to { transform:scaleY(1.15); opacity:1; } }

.section-dark { background:var(--ink); color:white; }
.section-light { background:var(--paper); color:var(--ink); }
.section-accent { background:var(--accent); color:var(--ink); }

.hero { min-height:100svh; position:relative; display:flex; align-items:flex-end; padding:150px 6vw 7vh; overflow:hidden; }
.hero-visual { position:absolute; inset:0; background:radial-gradient(circle at 62% 40%, #30343b 0, #17191d 34%, #0b0c0e 72%); }
.hero-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,6,7,.72) 0%, rgba(5,6,7,.28) 42%, rgba(5,6,7,.15) 72%, rgba(5,6,7,.58) 100%); }
.hero-orb { position:absolute; border-radius:50%; filter:blur(35px); opacity:.45; }
.hero-orb-a { width:34vw; height:34vw; right:8vw; top:15vh; background:radial-gradient(circle, #d6ae76 0%, #6f4c2a 38%, transparent 70%); animation:drift 12s ease-in-out infinite alternate; }
.hero-orb-b { width:28vw; height:28vw; right:29vw; bottom:8vh; background:radial-gradient(circle, #43556b 0%, #202b37 42%, transparent 70%); animation:drift 14s ease-in-out infinite alternate-reverse; }
.hero-frame { position:absolute; right:10vw; top:13vh; width:32vw; height:66vh; border:1px solid rgba(255,255,255,.14); transform:rotate(4deg); box-shadow:0 40px 90px rgba(0,0,0,.45); }
.hero-frame::before { content:""; position:absolute; inset:8%; border:1px solid rgba(201,170,116,.22); }
@keyframes drift { to { transform:translate3d(20px,-18px,0) scale(1.07); } }

.hero-content { position:relative; z-index:2; max-width:920px; }
.eyebrow,.section-kicker { margin:0 0 20px; text-transform:uppercase; letter-spacing:.24em; font-size:11px; font-weight:600; }
.hero h1 { margin:0; font-family:var(--serif); font-size:clamp(56px,7.65vw,126px); line-height:.9; letter-spacing:-.04em; font-weight:500; }
.hero h1 em { color:var(--accent); font-family:var(--serif-italic); font-size:.98em; font-weight:400; font-style:italic; letter-spacing:-.038em; line-height:.87; }
.hero-copy { max-width:650px; margin:34px 0 0; font-size:clamp(17px,1.55vw,23px); line-height:1.55; color:rgba(255,255,255,.72); }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:38px; }
.button { display:inline-flex; gap:12px; align-items:center; justify-content:center; border:0; cursor:pointer; padding:15px 22px; font-size:13px; transition:.25s ease; }
.button-light { background:var(--paper); color:var(--ink); }
.button-light:hover { transform:translateY(-2px); background:white; }
.button-dark { background:var(--ink); color:white; }
.button-dark:hover { transform:translateY(-2px); background:#000; }
.text-link { font-size:13px; color:rgba(255,255,255,.8); }
.text-link span,.package-link span { margin-left:8px; }
.hero-meta { position:absolute; z-index:2; right:6vw; bottom:7vh; display:flex; gap:20px; writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.38); }

.manifesto { padding:120px 6vw 135px; }
.manifesto-grid { display:grid; grid-template-columns:1fr 2.4fr; gap:7vw; align-items:start; }
.manifesto h2,.section-heading h2,.why h2,.order h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.035em; }
.manifesto h2 { font-size:clamp(42px,5.4vw,82px); line-height:1.02; margin:0; }
.manifesto p:not(.section-kicker) { max-width:750px; margin:34px 0 0; font-size:19px; line-height:1.7; color:var(--muted-light); }

.films,.packages,.faq { padding:120px 6vw 140px; }
.section-heading { display:grid; grid-template-columns:1fr 2.4fr; gap:7vw; align-items:start; margin-bottom:74px; }
.section-heading .section-kicker { margin-top:10px; }
.section-heading h2 { margin:0; font-size:clamp(46px,6vw,92px); line-height:.97; }
.section-heading .section-copy { grid-column:2; margin:24px 0 0; max-width:680px; font-size:16px; line-height:1.7; color:var(--muted-dark); }
.section-heading.dark .section-copy { color:var(--muted-light); }

.film-card { padding:0 0 80px; margin-bottom:74px; border-bottom:1px solid var(--line-dark); }
.film-media { position:relative; height:min(70vh,760px); min-height:420px; overflow:hidden; background:#191b1e; }
.film-card-wide .film-media { height:min(76vh,820px); }
.placeholder-film::before { content:attr(data-film); position:absolute; right:3vw; top:2.5vw; z-index:3; font-family:var(--serif); font-size:clamp(80px,13vw,220px); color:rgba(255,255,255,.06); }
.film-glow { position:absolute; inset:-10%; filter:blur(8px); transition:transform 1.3s ease; }
.film-media:hover .film-glow { transform:scale(1.06); }
.film-glow-one { background:radial-gradient(circle at 65% 42%, rgba(222,160,93,.78), transparent 25%), radial-gradient(circle at 42% 62%, rgba(38,74,94,.8), transparent 34%), linear-gradient(135deg,#111214,#26211b 58%,#0b0c0d); }
.film-glow-two { background:radial-gradient(circle at 40% 38%, rgba(152,183,187,.65), transparent 24%), radial-gradient(circle at 74% 68%, rgba(153,90,63,.68), transparent 30%), linear-gradient(130deg,#101417,#20262b 55%,#17100f); }
.film-glow-three { background:radial-gradient(circle at 63% 48%, rgba(187,156,109,.72), transparent 23%), radial-gradient(circle at 26% 70%, rgba(42,46,69,.8), transparent 34%), linear-gradient(110deg,#0b0c10,#201c1a 55%,#111318); }
.play-button { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:92px; height:92px; border-radius:50%; border:1px solid rgba(255,255,255,.45); background:rgba(5,5,5,.15); color:white; backdrop-filter:blur(8px); cursor:pointer; z-index:5; transition:.3s ease; }
.play-button:hover { transform:translate(-50%,-50%) scale(1.08); background:rgba(5,5,5,.38); }
.play-button span { margin-left:5px; }
.media-note { position:absolute; left:20px; bottom:18px; z-index:5; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.film-info { display:grid; grid-template-columns:2fr 1fr; gap:8vw; padding-top:28px; }
.film-number { margin:0 0 12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.47); }
.film-info h3 { margin:0; font-family:var(--serif); font-size:clamp(31px,3.7vw,56px); font-weight:500; line-height:1.04; }
.film-side { padding-top:4px; color:var(--muted-dark); font-size:14px; line-height:1.65; }
.film-side p:first-child { color:white; text-transform:uppercase; letter-spacing:.12em; font-size:11px; }

.process { padding:120px 6vw 135px; }
.process-list { border-top:1px solid var(--line-light); }
.process-item { display:grid; grid-template-columns:.55fr 1fr 2fr; gap:4vw; padding:32px 0 36px; border-bottom:1px solid var(--line-light); align-items:start; }
.process-item span { font-size:11px; letter-spacing:.14em; }
.process-item h3 { margin:0; font-family:var(--serif); font-size:30px; font-weight:500; }
.process-item p { margin:0; max-width:650px; color:var(--muted-light); line-height:1.65; }

.package-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-dark); border-left:1px solid var(--line-dark); }
.package { position:relative; min-height:610px; padding:30px; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); display:flex; flex-direction:column; }
.package-featured { background:rgba(201,170,116,.08); }
.featured-label { position:absolute; right:18px; top:18px; font-size:9px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); }
.package-top { display:flex; justify-content:space-between; color:rgba(255,255,255,.42); font-size:11px; text-transform:uppercase; letter-spacing:.14em; }
.package h3 { font-family:var(--serif); font-size:46px; margin:84px 0 10px; font-weight:500; }
.price { margin:0 0 46px; color:var(--accent); font-size:18px; }
.package ul { list-style:none; padding:0; margin:0; color:var(--muted-dark); font-size:14px; line-height:1.8; }
.package li { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.package-link { margin-top:auto; padding-top:38px; font-size:13px; }
.package-footnote { margin:18px 0 0; font-size:11px; color:rgba(255,255,255,.4); }

.why { padding:120px 6vw 135px; }
.why-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:9vw; }
.why h2 { font-size:clamp(46px,6vw,88px); line-height:.98; margin:0; }
.why-lead { font-family:var(--serif); font-size:30px; line-height:1.28; margin:44px 0 50px; }
.why-points p { display:flex; gap:25px; padding:17px 0; border-top:1px solid var(--line-light); margin:0; color:var(--muted-light); }
.why-points p:last-child { border-bottom:1px solid var(--line-light); }
.why-points span { min-width:28px; color:var(--ink); font-size:11px; }

.faq-list { max-width:940px; margin-left:auto; }
.faq details { border-top:1px solid var(--line-dark); padding:0; }
.faq details:last-child { border-bottom:1px solid var(--line-dark); }
.faq summary { list-style:none; cursor:pointer; padding:25px 0; font-family:var(--serif); font-size:26px; display:flex; justify-content:space-between; gap:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--sans); font-weight:300; color:var(--accent); }
.faq details[open] summary::after { content:"−"; }
.faq details p { margin:0 0 30px; max-width:720px; color:var(--muted-dark); line-height:1.7; }

.order { padding:120px 6vw 130px; display:grid; grid-template-columns:1fr 1.15fr; gap:9vw; }
.order h2 { font-size:clamp(50px,6.8vw,94px); line-height:.94; margin:0 0 30px; }
.order-intro>p:last-child { max-width:500px; line-height:1.7; color:rgba(12,13,15,.67); }
.order-form { padding-top:10px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.order-form label { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.order-form input,.order-form textarea,.order-form select { width:100%; border:0; border-bottom:1px solid rgba(12,13,15,.34); background:transparent; border-radius:0; padding:12px 0 14px; outline:none; color:var(--ink); font-size:15px; text-transform:none; letter-spacing:0; }
.order-form input:focus,.order-form textarea:focus,.order-form select:focus { border-color:var(--ink); }
.order-form textarea { resize:vertical; }
.consent { flex-direction:row!important; align-items:flex-start; text-transform:none!important; letter-spacing:0!important; font-size:12px!important; line-height:1.4; color:rgba(12,13,15,.62); }
.consent input { width:auto; margin-top:1px; }
.form-status { min-height:20px; margin:13px 0 0; font-size:12px; }

.footer { padding:64px 6vw 28px; }
.footer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; }
.footer-lockup { gap:7px; }
.footer-brand-name { font-size:27px; line-height:1; letter-spacing:.36em; font-weight:500; color:#fff; }
.footer-brand-descriptor { display:flex; align-items:center; gap:10px; font-size:8.5px; line-height:1.2; text-transform:uppercase; letter-spacing:.22em; color:var(--accent); white-space:nowrap; }
.footer-brand-descriptor::after { content:""; width:30px; height:1px; background:linear-gradient(90deg, rgba(201,170,116,.95), rgba(201,170,116,0)); }
.footer-email { font-size:13px; color:rgba(255,255,255,.72); border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:4px; }
.footer-links { display:flex; gap:28px; margin:58px 0 64px; font-size:13px; color:rgba(255,255,255,.62); flex-wrap:wrap; }
.footer-bottom { display:flex; justify-content:space-between; border-top:1px solid var(--line-dark); padding-top:18px; font-size:10px; text-transform:uppercase; letter-spacing:.13em; color:rgba(255,255,255,.38); }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .site-header { grid-template-columns:1fr auto; padding:20px; }
  .brand-name { font-size:22px; }
  .brand-descriptor { font-size:7px; letter-spacing:.16em; }
  .desktop-nav { display:none; }
  .hero { padding:140px 22px 55px; min-height:92svh; }
  .hero-frame { right:-5vw; width:56vw; opacity:.55; }
  .hero-copy { max-width:90%; }
  .hero-meta { display:none; }
  .manifesto,.films,.process,.packages,.faq,.why,.order { padding-left:22px; padding-right:22px; }
  .manifesto-grid,.section-heading,.why-grid,.order { grid-template-columns:1fr; gap:28px; }
  .section-heading .section-copy { grid-column:1; }
  .film-media,.film-card-wide .film-media { min-height:360px; height:56vh; }
  .film-info { grid-template-columns:1fr; gap:18px; }
  .process-item { grid-template-columns:46px 1fr; gap:18px; }
  .process-item p { grid-column:2; }
  .package-grid { grid-template-columns:1fr; }
  .package { min-height:520px; }
  .form-row { grid-template-columns:1fr; gap:0; }
}

@media (max-width: 560px) {
  .sound-toggle { font-size:9px; }
  .hero h1 { font-size:50px; }
  .hero-copy { font-size:16px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }
  .manifesto,.films,.process,.packages,.faq,.why,.order { padding-top:86px; padding-bottom:90px; }
  .section-heading { margin-bottom:48px; }
  .film-media,.film-card-wide .film-media { min-height:280px; height:44vh; }
  .play-button { width:72px; height:72px; }
  .package h3 { margin-top:58px; }
  .faq summary { font-size:22px; }
  .footer { padding:54px 22px 24px; }
  .footer-top { flex-direction:column; }
  .footer-brand-name { font-size:24px; }
  .footer-bottom { gap:18px; flex-direction:column; }
}


@media (prefers-reduced-motion: reduce) {
  .brand-letter, .brand-letter::before, .brand-letter::after, .brand-descriptor, .brand-descriptor::after { animation:none; opacity:1; filter:none; transform:none; }
}


/* Sound discoverability: intentionally subtle; does not alter header layout. */
.sound-toggle:not(.is-on):not(.is-waiting) .sound-bars {
  animation: soundInvite 2.8s ease-in-out 2 9.2s;
}
.sound-toggle.is-waiting { opacity:.72; }
.sound-toggle.is-waiting .sound-bars i {
  animation:soundPulse .65s ease-in-out infinite alternate;
}
@keyframes soundInvite {
  0%,100% { filter:none; transform:none; }
  50% { filter:drop-shadow(0 0 5px rgba(201,170,116,.55)); transform:translateY(-1px); }
}


/* --- VELORA bilingual navigation --- */
.header-actions {
  justify-self:end;
  display:flex;
  align-items:flex-start;
  gap:18px;
  min-width:max-content;
}
.language-switch {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-top:1px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.48);
}
.language-switch a {
  position:relative;
  padding-bottom:5px;
  transition:color .25s ease;
}
.language-switch a:hover { color:#fff; }
.language-switch a.is-active {
  color:#fff;
}
.language-switch a.is-active::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.72);
}
.language-switch .sep { color:rgba(255,255,255,.24); }

@media (max-width: 900px) {
  .header-actions { gap:14px; }
  .language-switch { font-size:9px; }
}
@media (max-width: 560px) {
  .header-actions { gap:10px; }
  .language-switch { gap:5px; font-size:8px; letter-spacing:.1em; }
}




/* --- VELORA currency selector v1.6: placed beside each tariff --- */
.package .price{
  margin:0 0 13px;
}

.package-currency{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 34px;
}

.package-currency-label{
  color:var(--accent);
  font-size:9px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.18em;
}

.currency-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid rgba(201,170,116,.55);
  border-radius:999px;
  background:rgba(201,170,116,.07);
  box-shadow:0 0 0 1px rgba(201,170,116,.035) inset;
}

.currency-switch button{
  appearance:none;
  border:0;
  outline:0;
  min-width:31px;
  height:27px;
  padding:0 8px;
  border-radius:999px;
  cursor:pointer;
  background:transparent;
  color:rgba(255,255,255,.72);
  font-family:var(--sans);
  font-size:12px;
  line-height:27px;
  transition:
    color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.currency-switch button:hover{
  color:#fff;
  background:rgba(201,170,116,.14);
}

.currency-switch button.is-active{
  color:#17120d;
  background:var(--accent);
  box-shadow:0 0 18px rgba(201,170,116,.18);
}

.currency-switch button:active{
  transform:scale(.96);
}

@media(max-width:560px){
  .package-currency{
    margin-bottom:29px;
    gap:9px;
  }
  .currency-switch button{
    min-width:30px;
    height:26px;
    line-height:26px;
  }
}


/* --- VELORA v1.7: first real portfolio film --- */
.film-media--real {
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16 / 9;
  background:#050607;
}
.portfolio-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#050607;
}
.film-media--real .film-play-button {
  transition:opacity .28s ease, transform .3s ease, background .3s ease;
}
.film-media--real.is-playing .film-play-button {
  opacity:0;
  pointer-events:none;
}
.film-media--real.is-playing .real-film-note {
  opacity:.12;
}
.real-film-note {
  transition:opacity .28s ease;
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}
@media (max-width: 560px) {
  .film-media--real {
    height:auto !important;
    min-height:0 !important;
  }
}


/* --- VELORA v1.9: film title / place / year --- */
.film-location{
  margin:8px 0 0;
  font-family:var(--serif);
  font-size:13px;
  font-style:italic;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.045em;
  color:rgba(201,170,116,.82);
}

.film-concept{
  max-width:430px;
  margin:12px 0 0;
  color:rgba(255,255,255,.56);
  font-size:13px;
  line-height:1.55;
}

@media(max-width:560px){
  .film-location{
    margin-top:6px;
    font-size:12px;
  }
  .film-concept{
    margin-top:10px;
    font-size:12px;
  }
}


/* --- VELORA v1.11: live Signature hero window --- */
.hero-frame{
  overflow:hidden;
  background:#0b0c0e;
  isolation:isolate;
}
.hero-frame::before{
  z-index:4;
  pointer-events:none;
}
.hero-film{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.035);
  filter:saturate(1.02) contrast(1.04) brightness(.93);
}
.hero-film-shade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,7,9,.05),rgba(6,7,9,.16)),
    linear-gradient(90deg,rgba(6,7,9,.10),transparent 45%,rgba(6,7,9,.08));
  box-shadow:inset 0 0 70px rgba(0,0,0,.22);
}


/* --- VELORA v1.13 editorial polish --- */
body{
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,.why-lead{
  text-wrap:balance;
}

.hero-copy,
.manifesto p,
.section-copy,
.film-side,
.film-concept,
.process-item p,
.faq details p,
.order-intro>p:last-child{
  text-wrap:pretty;
}

.section-dark .section-kicker{
  color:var(--accent);
}

.section-light .section-kicker{
  color:var(--accent-deep);
}

.section-accent .section-kicker{
  color:rgba(12,13,15,.64);
}

.film-info h3{
  transition:color .25s ease;
}

.film-card:hover .film-info h3{
  color:#f5e8cf;
}

.form-note{
  margin:12px 0 0;
  max-width:560px;
  font-size:11px;
  line-height:1.55;
  color:rgba(12,13,15,.58);
}

.package-footnote{
  max-width:760px;
  line-height:1.55;
}

@media(max-width:560px){
  .film-card:hover .film-info h3{
    color:inherit;
  }
}


/* ============================================================
   VELORA v1.14 — cinematic motion signature
   ============================================================ */

/* 1. Section reveal language */
.reveal-mask{
  --reveal-y: 34px;
  opacity:0;
  transform:translateY(var(--reveal-y));
  clip-path:inset(100% 0 0 0);
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .82s cubic-bezier(.22,.61,.36,1),
    clip-path .86s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform,clip-path;
}

.reveal-mask--small{
  --reveal-y:18px;
  transition-duration:.62s,.72s,.74s;
}

.reveal-mask.is-visible{
  opacity:1;
  transform:translateY(0);
  clip-path:inset(0 0 0 0);
}

/* 2. Fine chapter line — intentionally restrained */
section{
  position:relative;
}

section.section-dark:not(.hero)::before,
section.section-light::before,
section.section-accent::before{
  content:"";
  position:absolute;
  left:max(28px, calc((100vw - 1180px)/2));
  top:26px;
  width:min(112px, 11vw);
  height:1px;
  background:linear-gradient(90deg, rgba(198,163,103,.9), rgba(198,163,103,0));
  transform:scaleX(0);
  transform-origin:left center;
  opacity:0;
  transition:
    transform .9s cubic-bezier(.22,.61,.36,1),
    opacity .45s ease;
  pointer-events:none;
  z-index:3;
}

.section-light::before{
  background:linear-gradient(90deg, rgba(139,103,48,.72), rgba(139,103,48,0));
}

.section-accent::before{
  background:linear-gradient(90deg, rgba(20,18,15,.48), rgba(20,18,15,0));
}

section.section-dark:not(.hero).is-section-visible::before,
section.section-light.is-section-visible::before,
section.section-accent.is-section-visible::before{
  transform:scaleX(1);
  opacity:1;
}

/* 3. Subtle film grain on dark surfaces only */
.section-dark,
.site-footer,
.hero{
  isolation:isolate;
}

.section-dark::after,
.site-footer::after,
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:url("assets/velora-grain.png");
  background-size:96px 96px;
  opacity:.018;
  mix-blend-mode:soft-light;
}

/* 4. Cinematic portfolio hover */
.film-media--real{
  overflow:hidden;
  cursor:pointer;
}

.film-media--real .portfolio-video,
.film-media--real > img{
  transition:transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease;
  will-change:transform;
}

.cinema-hover{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
}

.frame-corner{
  position:absolute;
  width:22px;
  height:22px;
  opacity:0;
  transform:scale(.72);
  transition:
    opacity .34s ease,
    transform .5s cubic-bezier(.22,.61,.36,1);
}

.frame-corner::before,
.frame-corner::after{
  content:"";
  position:absolute;
  background:rgba(238,220,185,.84);
}

.frame-corner::before{ width:22px; height:1px; }
.frame-corner::after{ width:1px; height:22px; }

.frame-corner--tl{ left:18px; top:18px; }
.frame-corner--tr{ right:18px; top:18px; transform:scale(.72) rotate(90deg); }
.frame-corner--bl{ left:18px; bottom:18px; transform:scale(.72) rotate(-90deg); }
.frame-corner--br{ right:18px; bottom:18px; transform:scale(.72) rotate(180deg); }

.cinema-hover-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) translateY(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  min-height:72px;
  padding:0 15px;
  border:1px solid rgba(238,220,185,.5);
  border-radius:999px;
  color:#f4ead8;
  background:rgba(8,9,11,.34);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:10px;
  letter-spacing:.18em;
  font-weight:600;
  opacity:0;
  transition:
    opacity .34s ease,
    transform .48s cubic-bezier(.22,.61,.36,1),
    background .3s ease;
}

@media (hover:hover) and (pointer:fine){
  .film-media--real:hover .portfolio-video{
    transform:scale(1.018);
    filter:brightness(.9) saturate(1.03);
  }

  .film-media--real:hover .cinema-hover{
    opacity:1;
  }

  .film-media--real:hover .frame-corner{
    opacity:1;
  }

  .film-media--real:hover .frame-corner--tl{
    transform:scale(1) rotate(0);
  }
  .film-media--real:hover .frame-corner--tr{
    transform:scale(1) rotate(90deg);
  }
  .film-media--real:hover .frame-corner--bl{
    transform:scale(1) rotate(-90deg);
  }
  .film-media--real:hover .frame-corner--br{
    transform:scale(1) rotate(180deg);
  }

  .film-media--real:hover .cinema-hover-label{
    opacity:1;
    transform:translate(-50%,-50%) translateY(0);
    background:rgba(8,9,11,.46);
  }
}

/* 5. Very light hero breathing on desktop only */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  .hero-frame{
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
  }
}

/* Mobile: no hover furniture; keep the page clean. */
@media(max-width:900px){
  .cinema-hover{
    display:none;
  }

  section.section-dark:not(.hero)::before,
  section.section-light::before,
  section.section-accent::before{
    left:22px;
    top:20px;
    width:68px;
  }

  .section-dark::after,
  .site-footer::after,
  .hero::after{
    opacity:.012;
  }
}

/* Accessibility: motion can be disabled by the visitor/system. */
@media (prefers-reduced-motion: reduce){
  .reveal-mask,
  section.section-dark:not(.hero)::before,
  section.section-light::before,
  section.section-accent::before,
  .film-media--real .portfolio-video,
  .frame-corner,
  .cinema-hover-label,
  .hero-frame{
    transition:none !important;
  }

  .reveal-mask{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }

  section.section-dark:not(.hero)::before,
  section.section-light::before,
  section.section-accent::before{
    transform:scaleX(1) !important;
    opacity:.6 !important;
  }
}


/* --- v1.14 final corrections --- */

/* Preserve the original 4° cinematic tilt while adding only a few pixels of motion. */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  .hero-frame{
    --hero-shift-x:0px;
    --hero-shift-y:0px;
    transform:rotate(4deg) translate3d(var(--hero-shift-x),var(--hero-shift-y),0);
  }

  /* The premium PLAY/СМОТРЕТЬ disc replaces the old triangle visually on hover,
     while the underlying real button remains the click target. */
  .film-media--real:hover:not(.is-playing) .film-play-button{
    opacity:0;
  }
}

.film-media--real.is-playing .cinema-hover{
  opacity:0 !important;
  visibility:hidden;
}

/* Progressive enhancement: reveal effects never make content inaccessible. */
@media (prefers-reduced-motion: reduce){
  .hero-title.reveal-mask,
  h2.reveal-mask,
  .section-kicker.reveal-mask{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}


/* --- VELORA v1.14.1 regression fix --- */
/* Keep the original hero composition intact while grain stays a visual overlay. */
.hero-visual{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero::after{
  z-index:1;
}

.hero-content,
.hero-meta{
  z-index:2;
}

/* Never draw the chapter-line decoration on the opening hero. */
.hero.section-dark::before{
  content:none !important;
  display:none !important;
}


/* ============================================================
   VELORA v1.14.2 — restrained navigation hover
   ============================================================ */

.desktop-nav a,
.footer-links a{
  position:relative;
  transition:
    color .24s ease,
    opacity .24s ease;
}

.desktop-nav a::after,
.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  opacity:.72;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}

@media (hover:hover) and (pointer:fine){
  .desktop-nav a:hover{
    color:var(--accent);
  }

  .desktop-nav a:hover::after,
  .footer-links a:hover::after{
    transform:scaleX(1);
  }

  .footer-links a:hover{
    color:rgba(239,220,184,.95);
  }
}

/* Keep focus states visible for keyboard navigation too. */
.desktop-nav a:focus-visible,
.footer-links a:focus-visible{
  outline:none;
  color:var(--accent);
}

.desktop-nav a:focus-visible::after,
.footer-links a:focus-visible::after{
  transform:scaleX(1);
}

/* No decorative underline on touch/mobile layouts. */
@media(max-width:900px){
  .desktop-nav a::after,
  .footer-links a::after{
    display:none;
  }
}


/* ============================================================
   VELORA v1.15 — dedicated mobile composition
   Desktop >= 901px remains visually unchanged.
   ============================================================ */

.mobile-menu-toggle,
.mobile-nav{
  display:none;
}

@media (max-width:900px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }

  body.menu-open{
    overflow:hidden;
    touch-action:none;
  }

  /* ---------- mobile header ---------- */
  .site-header{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    padding:
      calc(14px + env(safe-area-inset-top))
      16px
      13px;
    min-height:72px;
    mix-blend-mode:normal;
    background:rgba(8,9,11,.80);
    border-bottom:1px solid rgba(255,255,255,.075);
    -webkit-backdrop-filter:blur(16px) saturate(1.08);
    backdrop-filter:blur(16px) saturate(1.08);
  }

  .brand-lockup{
    gap:5px;
    min-width:0;
  }

  .brand-name{
    font-size:21px;
    letter-spacing:normal;
  }

  .brand-letter{
    margin-right:.28em;
  }

  .brand-descriptor{
    max-width:150px;
    font-size:6.5px;
    line-height:1.2;
    letter-spacing:.145em;
    white-space:nowrap;
  }

  .desktop-nav{
    display:none;
  }

  .header-actions{
    align-items:center;
    gap:8px;
    min-width:0;
  }

  .language-switch{
    gap:5px;
    padding-top:0;
    font-size:9px;
    letter-spacing:.10em;
  }

  .language-switch a{
    display:flex;
    align-items:center;
    min-height:34px;
    padding:0 1px;
  }

  .language-switch a.is-active::after{
    bottom:3px;
  }

  .sound-toggle{
    width:34px;
    height:34px;
    flex:0 0 34px;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
  }

  .sound-toggle .sound-label{
    display:none;
  }

  .sound-bars{
    height:12px;
  }

  .mobile-menu-toggle{
    position:relative;
    display:flex;
    width:38px;
    height:38px;
    flex:0 0 38px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:transparent;
    color:white;
    cursor:pointer;
    z-index:61;
  }

  .mobile-menu-toggle span{
    position:absolute;
    width:14px;
    height:1px;
    background:currentColor;
    transition:
      transform .32s cubic-bezier(.22,.61,.36,1),
      top .32s cubic-bezier(.22,.61,.36,1);
  }

  .mobile-menu-toggle span:first-child{ top:15px; }
  .mobile-menu-toggle span:last-child{ top:21px; }

  .mobile-menu-toggle[aria-expanded="true"] span:first-child{
    top:18px;
    transform:rotate(45deg);
  }

  .mobile-menu-toggle[aria-expanded="true"] span:last-child{
    top:18px;
    transform:rotate(-45deg);
  }

  /* ---------- mobile menu ---------- */
  .mobile-nav{
    position:fixed;
    inset:0;
    z-index:45;
    display:block;
    padding:
      calc(104px + env(safe-area-inset-top))
      20px
      calc(34px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 78% 22%, rgba(124,85,46,.22), transparent 34%),
      linear-gradient(155deg,#111318 0%,#08090b 64%,#050607 100%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:
      opacity .30s ease,
      transform .38s cubic-bezier(.22,.61,.36,1),
      visibility 0s linear .38s;
  }

  .mobile-nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition-delay:0s;
  }

  .mobile-nav-inner{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width:520px;
    margin:0 auto;
  }

  .mobile-nav a{
    display:grid;
    grid-template-columns:34px 1fr;
    gap:12px;
    align-items:baseline;
    padding:14px 0 16px;
    border-bottom:1px solid rgba(255,255,255,.10);
    color:#fff;
  }

  .mobile-nav a:first-child{
    border-top:1px solid rgba(255,255,255,.10);
  }

  .mobile-nav a span{
    font-size:9px;
    letter-spacing:.16em;
    color:rgba(201,170,116,.72);
  }

  .mobile-nav a strong{
    font-family:var(--serif);
    font-size:clamp(30px,8.8vw,42px);
    line-height:1;
    font-weight:500;
    letter-spacing:-.03em;
  }

  .mobile-nav-note{
    margin:auto 0 0;
    padding-top:28px;
    font-family:var(--serif);
    font-size:15px;
    font-style:italic;
    color:rgba(255,255,255,.48);
  }

  /* ---------- opening screen ---------- */
  .hero{
    min-height:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:
      calc(112px + env(safe-area-inset-top))
      18px
      58px;
    overflow:hidden;
  }

  .hero-content{
    order:1;
    width:100%;
    max-width:none;
  }

  .hero h1{
    max-width:620px;
    font-size:clamp(42px,12.6vw,62px);
    line-height:.93;
    letter-spacing:-.045em;
  }

  .hero-copy{
    max-width:620px;
    margin-top:24px;
    font-size:15px;
    line-height:1.58;
    color:rgba(255,255,255,.72);
  }

  .hero-actions{
    margin-top:28px;
    flex-direction:column;
    align-items:flex-start;
    gap:17px;
  }

  .hero-actions .button{
    min-height:46px;
    padding:14px 20px;
  }

  .hero-actions .text-link{
    min-height:34px;
    display:inline-flex;
    align-items:center;
  }

  .hero-meta{
    display:none;
  }

  .hero-visual{
    order:2;
    position:relative;
    inset:auto;
    width:100%;
    min-height:0;
    margin-top:40px;
    background:none;
    overflow:visible;
    isolation:isolate;
  }

  .hero-visual::after{
    display:none;
  }

  .hero-frame{
    position:relative;
    right:auto;
    top:auto;
    width:calc(100% - 8px);
    height:auto;
    aspect-ratio:16 / 9;
    margin:0 auto;
    opacity:1;
    transform:rotate(1.35deg);
    border-color:rgba(255,255,255,.20);
    box-shadow:0 26px 60px rgba(0,0,0,.45);
    z-index:2;
  }

  .hero-frame::before{
    inset:5.5%;
    border-color:rgba(201,170,116,.24);
  }

  .hero-film{
    transform:scale(1.02);
    filter:saturate(1.02) contrast(1.04) brightness(.95);
  }

  .hero-orb{
    z-index:0;
    opacity:.26;
    filter:blur(26px);
  }

  .hero-orb-a{
    width:72vw;
    height:72vw;
    right:-24vw;
    top:-20vw;
  }

  .hero-orb-b{
    width:62vw;
    height:62vw;
    left:-22vw;
    bottom:-24vw;
  }

  /* ---------- global mobile section rhythm ---------- */
  .manifesto,
  .films,
  .process,
  .packages,
  .faq,
  .why,
  .order{
    padding-left:18px;
    padding-right:18px;
    padding-top:78px;
    padding-bottom:84px;
  }

  .manifesto-grid,
  .section-heading,
  .why-grid,
  .order{
    grid-template-columns:1fr;
    gap:24px;
  }

  .section-kicker{
    margin-bottom:14px;
    font-size:9.5px;
    line-height:1.25;
    letter-spacing:.20em;
  }

  .manifesto h2,
  .section-heading h2,
  .why h2,
  .order h2{
    font-size:clamp(38px,10.5vw,54px);
    line-height:1;
  }

  .manifesto p:not(.section-kicker){
    margin-top:25px;
    font-size:16px;
    line-height:1.66;
  }

  .section-heading{
    margin-bottom:44px;
  }

  .section-heading .section-kicker{
    margin-top:0;
  }

  .section-heading .section-copy{
    grid-column:1;
    margin:0;
    font-size:15px;
    line-height:1.64;
  }

  section.section-dark:not(.hero)::before,
  section.section-light::before,
  section.section-accent::before{
    left:18px;
    top:17px;
    width:58px;
  }

  /* ---------- films ---------- */
  .film-card{
    padding-bottom:48px;
    margin-bottom:50px;
  }

  .film-card:last-child{
    margin-bottom:0;
  }

  .film-media,
  .film-card-wide .film-media,
  .film-media--real{
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:16 / 9;
  }

  .film-play-button{
    width:64px;
    height:64px;
  }

  .media-note{
    left:12px;
    right:12px;
    bottom:10px;
    max-width:calc(100% - 24px);
    font-size:8px;
    line-height:1.3;
    letter-spacing:.055em;
  }

  .film-info{
    grid-template-columns:1fr;
    gap:14px;
    padding-top:20px;
  }

  .film-number{
    margin-bottom:9px;
    font-size:9.5px;
  }

  .film-info h3{
    font-size:clamp(30px,9vw,42px);
    line-height:1.02;
  }

  .film-location{
    margin-top:6px;
    font-size:12px;
  }

  .film-concept{
    margin-top:9px;
    font-size:12.5px;
    line-height:1.55;
  }

  .film-side{
    padding-top:4px;
    font-size:13px;
    line-height:1.6;
  }

  .film-side p:first-child{
    font-size:9.5px;
  }

  /* ---------- process ---------- */
  .process-item{
    grid-template-columns:30px minmax(0,1fr);
    gap:14px;
    padding:24px 0 27px;
  }

  .process-item span{
    font-size:9px;
  }

  .process-item h3{
    font-size:25px;
    line-height:1.08;
  }

  .process-item p{
    grid-column:2;
    font-size:14px;
    line-height:1.62;
  }

  /* ---------- packages ---------- */
  .package-grid{
    grid-template-columns:1fr;
    border-left:1px solid var(--line-dark);
  }

  .package{
    min-height:0;
    padding:24px 20px 26px;
  }

  .package h3{
    margin:56px 0 8px;
    font-size:40px;
  }

  .package-top{
    font-size:9.5px;
  }

  .package ul{
    font-size:13.5px;
    line-height:1.7;
  }

  .package-link{
    margin-top:28px;
    padding-top:0;
  }

  .package-currency{
    flex-wrap:wrap;
    row-gap:8px;
    margin-bottom:28px;
  }

  /* ---------- why / faq ---------- */
  .why-lead{
    margin:28px 0 34px;
    font-size:24px;
    line-height:1.28;
  }

  .why-points p{
    gap:15px;
    padding:15px 0;
    font-size:14px;
    line-height:1.5;
  }

  .faq details{
    padding:0;
  }

  .faq summary{
    padding:21px 0;
    font-size:20px;
    line-height:1.2;
  }

  .faq details p{
    padding:0 0 22px;
    font-size:14px;
    line-height:1.64;
  }

  /* ---------- order form ---------- */
  .order{
    gap:34px;
  }

  .order h2{
    margin-bottom:22px;
  }

  .order-intro>p:last-child{
    font-size:15px;
    line-height:1.64;
  }

  .form-row{
    grid-template-columns:1fr;
    gap:0;
  }

  .order-form label{
    margin-bottom:20px;
  }

  .order-form input,
  .order-form textarea,
  .order-form select{
    font-size:16px; /* prevents iOS input zoom */
    min-height:46px;
  }

  .consent{
    font-size:12px !important;
  }

  .button.button-dark{
    min-height:48px;
  }

  /* ---------- footer ---------- */
  .footer{
    padding:
      50px
      18px
      calc(24px + env(safe-area-inset-bottom));
  }

  .footer-top{
    flex-direction:column;
    gap:24px;
  }

  .footer-brand-name{
    font-size:24px;
  }

  .footer-brand-descriptor{
    font-size:7.5px;
  }

  .footer-links{
    gap:16px 22px;
    margin:40px 0 44px;
    font-size:12.5px;
  }

  .footer-bottom{
    flex-direction:column;
    gap:9px;
    line-height:1.5;
  }

  [id]{
    scroll-margin-top:86px;
  }
}

@media (max-width:560px){
  /* Neutralize the older 560px rules that made the first screen feel cramped. */
  .sound-toggle{
    font-size:inherit;
  }

  .hero h1{
    font-size:clamp(42px,12.6vw,56px);
  }

  .hero-copy{
    font-size:15px;
  }

  .hero-actions{
    gap:17px;
  }

  .manifesto,
  .films,
  .process,
  .packages,
  .faq,
  .why,
  .order{
    padding-top:74px;
    padding-bottom:80px;
  }

  .film-media,
  .film-card-wide .film-media{
    min-height:0;
    height:auto;
  }

  .play-button{
    width:64px;
    height:64px;
  }

  .package h3{
    margin-top:54px;
  }

  .faq summary{
    font-size:20px;
  }

  .footer{
    padding-left:18px;
    padding-right:18px;
  }
}

@media (max-width:360px){
  .site-header{
    padding-left:14px;
    padding-right:14px;
  }

  .brand-descriptor{
    display:none;
  }

  .brand-name{
    font-size:20px;
  }

  .header-actions{
    gap:6px;
  }

  .language-switch{
    font-size:8.5px;
  }

  .sound-toggle{
    width:32px;
    height:32px;
    flex-basis:32px;
  }

  .mobile-menu-toggle{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .mobile-menu-toggle span:first-child{ top:14px; }
  .mobile-menu-toggle span:last-child{ top:20px; }
  .mobile-menu-toggle[aria-expanded="true"] span:first-child,
  .mobile-menu-toggle[aria-expanded="true"] span:last-child{ top:17px; }

  .hero{
    padding-left:15px;
    padding-right:15px;
  }

  .hero h1{
    font-size:41px;
  }

  .hero-copy{
    font-size:14.5px;
  }

  .manifesto,
  .films,
  .process,
  .packages,
  .faq,
  .why,
  .order{
    padding-left:15px;
    padding-right:15px;
  }

  .mobile-nav{
    padding-left:16px;
    padding-right:16px;
  }

  .mobile-nav a strong{
    font-size:29px;
  }

  section.section-dark:not(.hero)::before,
  section.section-light::before,
  section.section-accent::before{
    left:15px;
  }
}


/* --- v1.15 narrow-phone final fit --- */
@media (max-width:340px){
  .section-heading{
    min-width:0;
  }

  .section-heading > *{
    min-width:0;
  }

  .section-heading h2{
    font-size:32px;
    letter-spacing:-.04em;
  }
}


/* ============================================================
   VELORA v1.15.1 — real-device mobile corrections
   Based on Samsung Browser screenshots.
   ============================================================ */

@media (max-width:900px){

  /*
    Mobile uses the section-level .reveal animation only.
    The nested clip-path heading reveal caused some h2 elements
    to remain invisible in Samsung Browser.
  */
  .reveal-mask,
  .reveal-mask--small,
  .reveal-mask.is-visible{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
    transition-delay:0s !important;
    will-change:auto !important;
  }

  /* Contain every major mobile section to the viewport. */
  main,
  .manifesto,
  .films,
  .process,
  .packages,
  .why,
  .faq,
  .order{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
  }

  .manifesto-grid,
  .section-heading,
  .why-grid,
  .order,
  .film-info,
  .process-list,
  .package-grid,
  .faq-list,
  .order-form{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .manifesto-grid > *,
  .section-heading > *,
  .why-grid > *,
  .order > *,
  .film-info > *,
  .process-item > *{
    min-width:0;
    max-width:100%;
  }

  /* Samsung Browser: avoid balance/clip interaction on long headings. */
  h1,
  h2,
  h3,
  .why-lead{
    text-wrap:wrap;
    white-space:normal;
    max-width:100%;
  }

  /* A true mobile heading scale, not a reduced desktop scale. */
  .manifesto h2,
  .section-heading h2,
  .why h2,
  .order h2{
    width:100%;
    max-width:100%;
    font-size:clamp(33px,9.2vw,41px);
    line-height:1.04;
    letter-spacing:-.038em;
    overflow-wrap:normal;
    word-break:normal;
  }

  .manifesto h2{
    font-size:clamp(34px,9.4vw,42px);
  }

  .section-heading{
    display:block;
    margin-bottom:38px;
  }

  .section-heading .section-kicker{
    display:block;
    margin:0 0 15px;
  }

  .section-heading h2{
    display:block;
    margin:0;
  }

  .section-heading .section-copy{
    width:100%;
    max-width:620px;
    margin:22px 0 0;
  }

  /* Films */
  .film-card,
  .film-media,
  .film-media--real,
  .film-info{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .film-info h3{
    max-width:100%;
    font-size:clamp(29px,8.3vw,38px);
    overflow-wrap:break-word;
  }

  /* Process */
  .process-list{
    overflow:hidden;
  }

  .process-item{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .process-item h3,
  .process-item p{
    min-width:0;
    max-width:100%;
  }

  /* Pricing cards must never inherit intrinsic desktop width. */
  .package-grid{
    display:block;
    border-left:1px solid var(--line-dark);
    overflow:hidden;
  }

  .package{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    padding:24px 18px 27px;
  }

  .package-top{
    min-width:0;
    max-width:100%;
    gap:20px;
  }

  .package-top p{
    min-width:0;
    margin-left:auto;
  }

  .featured-label{
    right:16px;
    top:16px;
    max-width:55%;
    line-height:1.3;
    text-align:right;
    white-space:normal;
  }

  .package h3{
    max-width:100%;
    font-size:clamp(34px,9.3vw,40px);
    white-space:normal;
  }

  .price,
  .package-currency,
  .package ul,
  .package-link{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .package-currency{
    justify-content:flex-start;
  }

  .currency-switch{
    flex:0 0 auto;
  }

  .package li{
    overflow-wrap:break-word;
  }

  /* Why VELORA */
  .why-grid{
    display:block;
  }

  .why-grid > div + div{
    margin-top:30px;
  }

  .why .section-kicker{
    margin-bottom:15px;
  }

  .why h2{
    margin:0;
  }

  .why-lead{
    margin:30px 0 34px;
    font-size:22px;
    line-height:1.3;
  }

  .why-points p{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /* FAQ */
  .faq-list{
    margin:0;
  }

  .faq details,
  .faq summary,
  .faq details p{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .faq summary{
    align-items:flex-start;
    gap:14px;
    overflow-wrap:break-word;
  }

  .faq summary::after{
    flex:0 0 auto;
  }

  /* Order form */
  .order{
    display:block;
  }

  .order-form{
    margin-top:34px;
  }

  .order-form input,
  .order-form textarea,
  .order-form select{
    max-width:100%;
    min-width:0;
  }
}

@media (max-width:560px){
  .manifesto,
  .films,
  .process,
  .packages,
  .why,
  .faq,
  .order{
    padding-left:17px;
    padding-right:17px;
  }

  .manifesto h2,
  .section-heading h2,
  .why h2,
  .order h2{
    font-size:clamp(32px,9vw,38px);
    line-height:1.05;
  }

  .section-heading{
    margin-bottom:34px;
  }

  .package{
    padding-left:17px;
    padding-right:17px;
  }
}

@media (max-width:370px){
  .manifesto,
  .films,
  .process,
  .packages,
  .why,
  .faq,
  .order{
    padding-left:15px;
    padding-right:15px;
  }

  .manifesto h2,
  .section-heading h2,
  .why h2,
  .order h2{
    font-size:31px;
    letter-spacing:-.035em;
  }

  .film-info h3{
    font-size:29px;
  }

  .faq summary{
    font-size:18px;
  }
}

/* ============================================================
   VELORA v1.15.2 — mobile polish from real-device review
   ============================================================ */

@media (max-width:900px){

  /* Restore a clearly visible cinematic tilt while keeping the frame inside viewport. */
  .hero-frame{
    width:calc(100% - 20px);
    margin:4px auto 10px;
    transform:rotate(2.35deg);
    transform-origin:center center;
  }

  /* Samsung/Android already renders a native video control layer.
     Hide the custom desktop play button on touch layouts to avoid a double Play icon. */
  .film-play-button{
    display:none !important;
  }

  /* Mobile reveal: robust opacity + translate only, no clip-path. */
  .reveal-mask,
  .reveal-mask--small{
    opacity:0 !important;
    transform:translateY(18px) !important;
    clip-path:none !important;
    transition:
      opacity .58s cubic-bezier(.22,.61,.36,1),
      transform .68s cubic-bezier(.22,.61,.36,1) !important;
    transition-delay:0s !important;
    will-change:opacity,transform !important;
  }

  .reveal-mask--small{
    transform:translateY(12px) !important;
    transition-duration:.48s,.56s !important;
  }

  .reveal-mask.is-visible,
  .reveal-mask--small.is-visible{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  /* The first-screen title appears promptly without losing the same motion language. */
  .hero .reveal-mask{
    transition-duration:.46s,.54s !important;
  }
}

@media (max-width:360px){
  .hero-frame{
    width:calc(100% - 16px);
    transform:rotate(1.9deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .reveal-mask,
  .reveal-mask--small,
  .reveal-mask.is-visible,
  .reveal-mask--small.is-visible{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}



/* ============================================================
   VELORA v1.15.3 — stronger mobile frame + dedicated title motion
   ============================================================ */

@media (max-width:900px){
  .hero-frame{
    width:calc(100% - 34px);
    margin:8px auto 14px;
    transform:rotate(4deg);
    transform-origin:center center;
  }

  .mobile-reveal-target{
    opacity:0 !important;
    transform:translateY(26px) !important;
    clip-path:none !important;
    transition:
      opacity .72s cubic-bezier(.22,.61,.36,1),
      transform .86s cubic-bezier(.22,.61,.36,1) !important;
    transition-delay:0s !important;
    will-change:opacity,transform !important;
  }

  .section-kicker.mobile-reveal-target{
    transform:translateY(14px) !important;
    transition-duration:.52s,.64s !important;
  }

  .mobile-reveal-target.mobile-reveal-show{
    opacity:1 !important;
    transform:translateY(0) !important;
  }
}

@media (max-width:360px){
  .hero-frame{
    width:calc(100% - 30px);
    transform:rotate(3.5deg);
  }
}


/* ============================================================
   VELORA v1.15.4 — slower, softer mobile title reveal
   ============================================================ */

@media (max-width:900px){

  .mobile-reveal-target{
    opacity:0 !important;
    transform:translateY(34px) !important;
    transition:
      opacity 1.05s cubic-bezier(.16,1,.3,1),
      transform 1.18s cubic-bezier(.16,1,.3,1) !important;
    transition-delay:0s !important;
  }

  .section-kicker.mobile-reveal-target{
    transform:translateY(18px) !important;
    transition:
      opacity .82s cubic-bezier(.16,1,.3,1),
      transform .95s cubic-bezier(.16,1,.3,1) !important;
  }

  .mobile-reveal-target.mobile-reveal-show{
    opacity:1 !important;
    transform:translateY(0) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .mobile-reveal-target,
  .section-kicker.mobile-reveal-target,
  .mobile-reveal-target.mobile-reveal-show{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* VELORA v1.16 — service scope */
.package-delivery{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.package-delivery span{font-size:9px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.46)}
.package-delivery strong{font-size:12px;line-height:1.45;font-weight:500;text-align:right;color:rgba(255,255,255,.84)}
.service-scope{margin-top:38px;padding:34px 0 4px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.6fr);gap:30px 70px}
.service-scope-head .section-kicker{margin-bottom:12px}
.service-scope-head h3{margin:0;max-width:430px;font-family:var(--serif);font-size:clamp(28px,2.4vw,42px);line-height:1.02;font-weight:500;letter-spacing:-.035em;color:#fff}
.service-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;align-self:end;padding-bottom:2px;font-size:10px;line-height:1.4;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.service-flow i{font-style:normal;color:var(--accent);opacity:.72}
.service-scope-copy{grid-column:2;margin:0;max-width:760px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.55)}
@media(max-width:900px){
.package-delivery{margin-top:22px;padding-top:16px}
.package-delivery strong{font-size:11.5px}
.service-scope{grid-template-columns:1fr;gap:22px;margin-top:30px;padding-top:28px}
.service-scope-head h3{font-size:30px}
.service-flow{gap:9px 10px;font-size:9px}
.service-scope-copy{grid-column:1;font-size:13px;line-height:1.65}
}
@media(max-width:560px){
.package-delivery{flex-direction:column;align-items:flex-start;gap:6px}
.package-delivery strong{text-align:left}
.service-scope{margin-top:26px}
.service-flow{font-size:8.5px;line-height:1.6}
}


/* ============================================================
   VELORA v1.16.3 — formats/service-summary emphasis
   ============================================================ */
.service-scope{
  margin-top:46px;
  padding:42px 40px 38px;
  border:1px solid rgba(201,170,116,.28);
  background:
    linear-gradient(135deg, rgba(201,170,116,.075), rgba(255,255,255,.018) 46%, rgba(255,255,255,.008));
  display:block;
  position:relative;
  overflow:hidden;
}
.service-scope::after{
  content:"";
  position:absolute;
  top:0;
  left:40px;
  width:92px;
  height:1px;
  background:linear-gradient(90deg, rgba(201,170,116,1), rgba(201,170,116,0));
}
.service-scope-intro{
  display:grid;
  grid-template-columns:minmax(260px,.86fr) minmax(0,1.14fr);
  column-gap:70px;
  align-items:end;
}
.service-scope-intro .section-kicker{margin:0 0 13px;grid-column:1 / -1}
.service-scope-intro h3{
  margin:0;
  max-width:520px;
  font-family:var(--serif);
  font-size:clamp(34px,3.2vw,52px);
  line-height:1.02;
  font-weight:500;
  letter-spacing:-.035em;
  color:#fff;
}
.service-scope-lead{
  margin:0 0 5px;
  max-width:560px;
  font-family:var(--serif);
  font-size:20px;
  line-height:1.42;
  color:rgba(255,255,255,.72);
}
.service-steps{
  list-style:none;
  margin:38px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15);
}
.service-step{
  min-height:104px;
  padding:21px 18px 19px 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:9px;
  border-right:1px solid rgba(255,255,255,.11);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .78s cubic-bezier(.16,1,.3,1);
}
.service-step:nth-child(4n){border-right:0;padding-left:18px}
.service-step:nth-child(4n+2),.service-step:nth-child(4n+3){padding-left:18px}
.service-step:nth-child(n+5){border-top:1px solid rgba(255,255,255,.11)}
.service-step span{
  font-size:9px;
  line-height:1;
  letter-spacing:.16em;
  color:var(--accent);
}
.service-step strong{
  max-width:185px;
  font-family:var(--serif);
  font-size:17px;
  line-height:1.18;
  font-weight:500;
  color:rgba(255,255,255,.94);
}
.service-step small{
  margin-top:auto;
  font-size:9px;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.44);
}
.service-scope.visible .service-step{opacity:1;transform:none}
.service-scope.visible .service-step:nth-child(1){transition-delay:.05s}
.service-scope.visible .service-step:nth-child(2){transition-delay:.11s}
.service-scope.visible .service-step:nth-child(3){transition-delay:.17s}
.service-scope.visible .service-step:nth-child(4){transition-delay:.23s}
.service-scope.visible .service-step:nth-child(5){transition-delay:.29s}
.service-scope.visible .service-step:nth-child(6){transition-delay:.35s}
.service-scope.visible .service-step:nth-child(7){transition-delay:.41s}
.service-scope.visible .service-step:nth-child(8){transition-delay:.47s}
.service-scope-note{
  display:grid;
  grid-template-columns:.62fr .9fr 1.55fr;
  gap:34px;
  align-items:start;
  padding-top:30px;
}
.service-scope-note>div{display:flex;flex-direction:column;gap:8px}
.service-note-label{
  font-size:9px;
  line-height:1.2;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
}
.service-scope-note strong{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.32;
  font-weight:500;
  color:rgba(255,255,255,.91);
}
.service-scope-note p{
  margin:0;
  font-size:14px;
  line-height:1.68;
  color:rgba(255,255,255,.63);
}
.service-scope-note p b{font-weight:500;color:rgba(255,255,255,.92)}
.package-footnote{
  margin-top:20px;
  max-width:980px;
  font-size:10.5px;
  line-height:1.6;
  color:rgba(255,255,255,.38);
}

@media(max-width:900px){
  .service-scope{margin-top:34px;padding:32px 24px 28px}
  .service-scope::after{left:24px}
  .service-scope-intro{grid-template-columns:1fr;gap:15px}
  .service-scope-intro .section-kicker{grid-column:auto}
  .service-scope-intro h3{font-size:34px;max-width:620px}
  .service-scope-lead{font-size:18px;max-width:620px}
  .service-steps{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}
  .service-step{min-height:94px;padding:18px 14px 17px 0;border-right:1px solid rgba(255,255,255,.11);border-top:1px solid rgba(255,255,255,.11)}
  .service-step:nth-child(1),.service-step:nth-child(2){border-top:0}
  .service-step:nth-child(2n){border-right:0;padding-left:16px}
  .service-step:nth-child(2n+1){padding-left:0}
  .service-step strong{font-size:16px}
  .service-scope-note{grid-template-columns:1fr 1fr;gap:22px 20px;padding-top:24px}
  .service-scope-note p{grid-column:1 / -1;font-size:13.5px}
}

@media(max-width:560px){
  .service-scope{padding:28px 18px 24px;margin-top:28px}
  .service-scope::after{left:18px;width:72px}
  .service-scope-intro h3{font-size:30px;line-height:1.05}
  .service-scope-lead{font-size:17px;line-height:1.45}
  .service-steps{margin-top:24px}
  .service-step{min-height:88px;padding-top:16px;padding-bottom:15px}
  .service-step strong{font-size:15.5px}
  .service-scope-note{grid-template-columns:1fr;gap:18px;padding-top:22px}
  .service-scope-note p{grid-column:1}
  .service-scope-note strong{font-size:17px}
  .package-footnote{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .service-step,.service-scope.visible .service-step{opacity:1;transform:none;transition:none}
}