/* ==========================================================================
   Loro Code — styles
   ========================================================================== */

/* Fonts are hosted with the site (no Google Fonts request): faster, and visitors'
   IP addresses are not sent to Google (GDPR). Manrope is licensed under the SIL
   Open Font License 1.1. */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap; src:url('assets/fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap; src:url('assets/fonts/manrope-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* The logo shapes are embedded below as data URLs so they also render when index.html is opened directly from disk. */
:root {
  /* Logo motion controls: larger durations mean slower animation. */
  --logo-duration:4.2s;
  --outline-draw-duration:1.5s;
  --entrance-start:3.2s;
  --light-wave-duration:12s;

  color-scheme:dark;
  --ink:oklch(13.2% .007 235);
  --ink-2:oklch(16% .009 235);
  --ink-3:oklch(19.5% .011 235);
  --ice:oklch(93% .038 225);
  --ice-strong:oklch(97% .02 225);
  --text:oklch(96% .006 225);
  --muted:oklch(71% .014 230);
  --faint:oklch(65% .013 230);
  --line:oklch(100% 0 0 / .08);
  --line-strong:oklch(100% 0 0 / .15);
  --ease:cubic-bezier(.16,1,.3,1);
  --radius:12px;
  --gutter:clamp(20px,5vw,72px);
  --serif:'Instrument Serif',Georgia,serif;
}

*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100% }
body {
  margin:0;
  background:var(--ink);
  color:var(--text);
  font:400 16px/1.6 Manrope,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { font:inherit; color:inherit }
button,a { -webkit-tap-highlight-color:transparent }
:focus-visible { outline:2px solid var(--ice); outline-offset:4px; border-radius:4px }
::selection { background:var(--ice); color:var(--ink) }

.wrap { width:calc(100% - var(--gutter) * 2); max-width:1280px; margin-inline:auto }

.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0
}
[hidden] { display:none!important }

.skip-link {
  position:fixed; top:-80px; left:16px; z-index:100;
  background:var(--ice); color:var(--ink); padding:12px 16px; border-radius:999px; font-weight:600
}
.skip-link:focus { top:16px }

.arrow { display:inline-block; transition:transform .45s var(--ease) }

/* ---------- Buttons ---------- */
.pill {
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:48px; padding:0 24px; border-radius:999px;
  font-size:14px; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.pill-solid {
  background:var(--ice); color:var(--ink);
  box-shadow:0 0 0 1px oklch(100% 0 0 / .1) inset,0 10px 30px -12px oklch(80% .08 225 / .45);
}
.pill-solid:hover { background:var(--ice-strong); box-shadow:0 0 0 1px oklch(100% 0 0 / .1) inset,0 14px 40px -10px oklch(82% .09 225 / .55) }
.pill-solid:hover .arrow,.pill-ghost:hover .arrow { transform:translateX(4px) }
.pill-outline { border:1px solid var(--line-strong); color:var(--text) }
.pill-outline:hover { border-color:var(--ice); color:var(--ice) }
.pill-ghost { color:var(--text); border:1px solid transparent }
.pill-ghost:hover { border-color:var(--line-strong) }
.pill-lg { min-height:58px; padding:0 32px; font-size:15px }

/* ---------- Header ---------- */
.header {
  position:fixed; inset:0 0 auto; z-index:20;
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.header.is-scrolled {
  background:oklch(13.2% .007 235 / .72);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  backdrop-filter:saturate(140%) blur(18px);
  border-bottom-color:var(--line);
}
.header-inner { height:84px; display:flex; align-items:center; justify-content:space-between; gap:32px }
.brand { display:block; flex:none }
.wordmark { display:block; width:150px }
.header-nav { display:flex; gap:36px; font-size:14px; color:var(--muted) }
.header-nav a { position:relative; transition:color .3s }
.header-nav a::after {
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--ice); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)
}
.header-nav a:hover { color:var(--text) }
.header-nav a:hover::after { transform:scaleX(1); transform-origin:left }
.header-actions { display:flex; align-items:center; gap:12px }
.header-cta { min-height:42px; padding:0 20px; font-size:13px }

.site-menu { position:relative; display:none }
.site-menu summary {
  display:flex; align-items:center; gap:14px; min-height:42px; padding:0 16px 0 18px;
  border:1px solid var(--line-strong); border-radius:999px; cursor:pointer; list-style:none; font-size:13px; font-weight:600
}
.site-menu summary::-webkit-details-marker { display:none }
.menu-icon { position:relative; width:14px; height:14px }
.menu-icon::before,.menu-icon::after {
  content:''; position:absolute; left:0; right:0; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .45s var(--ease),top .45s var(--ease)
}
.menu-icon::before { top:4px }
.menu-icon::after { top:9px }
.site-menu[open] .menu-icon::before { top:6.5px; transform:rotate(45deg) }
.site-menu[open] .menu-icon::after { top:6.5px; transform:rotate(-45deg) }
.menu-panel {
  position:absolute; right:0; top:calc(100% + 12px); width:min(320px,calc(100vw - 40px));
  display:flex; flex-direction:column; padding:8px 20px;
  background:oklch(17% .01 235 / .96); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:0 30px 80px -20px oklch(0% 0 0 / .7);
  animation:copy-enter .5s var(--ease) both;
}
.menu-panel a { display:flex; align-items:center; gap:18px; padding:16px 0; font-size:17px; border-bottom:1px solid var(--line) }
.menu-panel a:last-child { border:0 }
.menu-panel a span { color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums }

/* ---------- Typography ---------- */
.eyebrow {
  display:flex; align-items:center; gap:14px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 28px; color:var(--muted)
}
.eyebrow-num {
  display:inline-flex; align-items:center; gap:14px; color:var(--ice); letter-spacing:.06em; font-variant-numeric:tabular-nums
}
.eyebrow-num::after { content:''; width:28px; height:1px; background:var(--line-strong) }

.section { padding-block:clamp(96px,12vw,168px) }
.section h2,.studio-copy h2 {
  font-weight:500;
  font-size:clamp(40px,5.4vw,76px);
  letter-spacing:-.042em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}
.section h2 span,.studio-copy h2 span { color:var(--faint) }

.section-heading {
  display:flex; align-items:flex-end; justify-content:space-between; gap:48px;
  margin-bottom:clamp(48px,6vw,80px)
}
.section-description { color:var(--muted); font-size:16px; line-height:1.7; max-width:34ch; margin:0 0 6px }

/* ---------- Hero (neon intro) ---------- */
.cinema-hero {
  position:relative; isolation:isolate;
  min-height:clamp(700px,100svh,1000px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; padding:128px 32px 132px; background:var(--ink)
}
.cinema-aura {
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.9;
  background:
    radial-gradient(60% 45% at 50% 42%,oklch(62% .07 228 / .10),transparent 70%),
    radial-gradient(40% 30% at 50% 100%,oklch(62% .07 228 / .06),transparent 70%);
}
.cinema-grid {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px; background-position:center center;
  mask-image:radial-gradient(ellipse 55% 50% at 50% 45%,#000 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 55% 50% at 50% 45%,#000 10%,transparent 75%);
  opacity:.45;
}
.cinema-scene { position:relative; width:min(62vw,820px,112svh); flex:none; margin:0 }
.cinema-logo { position:relative; width:100%; aspect-ratio:983/194; opacity:1 }
.neon-outline { position:absolute; inset:0; width:100%; height:100%; overflow:visible; opacity:0; pointer-events:none }
.neon-lines { filter:drop-shadow(0 0 2px oklch(82% .13 215)) drop-shadow(0 0 7px oklch(74% .12 220 / .65)) }
.neon-path {
  fill:none; stroke:oklch(96% .065 205); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; stroke-dasharray:1000; stroke-dashoffset:0
}
.cinema-fill {
  position:absolute; inset:0; display:block;
  mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 983 194%22%3E%3Cpath fill=%22white%22 fill-rule=%22evenodd%22 d=%22M55 4 H83 L34 190 H5 Z M122 48 H172 Q202 48 202 78 V137 Q202 142 197 142 H180 Q172 142 172 150 V164 Q172 169 167 169 H115 Q85 169 85 139 V82 Q85 75 92 75 H108 Q116 75 116 67 V54 Q116 48 122 48 Z M122 76 H166 Q171 76 171 81 V135 Q171 142 164 142 H123 Q117 142 117 136 V82 Q117 76 122 76 Z M218 48 H248 V62 Q248 67 252 64 L269 48 H298 V76 H250 V169 H218 Z M 344 48 H 394 Q 424 48 424 78 V 137 Q 424 142 419 142 H 402 Q 394 142 394 150 V 164 Q 394 169 389 169 H 337 Q 307 169 307 139 V 82 Q 307 75 314 75 H 330 Q 338 75 338 67 V 54 Q 338 48 344 48 Z M 344 76 H 388 Q 393 76 393 81 V 135 Q 393 142 386 142 H 345 Q 339 142 339 136 V 82 Q 339 76 344 76 Z M508 45 V74 L466 106.5 L508 139 V169 L439 115 V98 Z M 560 48 H 610 Q 640 48 640 78 V 137 Q 640 142 635 142 H 618 Q 610 142 610 150 V 164 Q 610 169 605 169 H 553 Q 523 169 523 139 V 82 Q 523 75 530 75 H 546 Q 554 75 554 67 V 54 Q 554 48 560 48 Z M 560 76 H 604 Q 609 76 609 81 V 135 Q 609 142 602 142 H 561 Q 555 142 555 136 V 82 Q 555 76 560 76 Z M738 8 H768 V169 H739 V154 Q739 150 736 153 L719 169 H688 Q654 169 654 135 V82 Q654 48 688 48 H714 L735 64 Q738 67 738 63 Z M696 76 H731 Q737 76 737 82 V136 Q737 142 731 142 H697 Q685 142 685 130 V88 Q685 76 696 76 Z M820 48 H846 Q892 48 892 90 V120 H815 V128 Q815 144 835 144 H878 V169 H828 Q784 169 784 130 V77 Q784 71 791 71 H809 Q815 71 815 65 V54 Q815 48 820 48 Z M823 73 H851 Q862 73 862 84 V98 H815 V82 Q815 73 823 73 Z M921 8 H937 Q941 8 941 12 V33 L935 61 H922 L917 33 V12 Q917 8 921 8 Z M 959 8 H 975 Q 979 8 979 12 V 33 L 973 61 H 960 L 955 33 V 12 Q 955 8 959 8 Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 983 194%22%3E%3Cpath fill=%22white%22 fill-rule=%22evenodd%22 d=%22M55 4 H83 L34 190 H5 Z M122 48 H172 Q202 48 202 78 V137 Q202 142 197 142 H180 Q172 142 172 150 V164 Q172 169 167 169 H115 Q85 169 85 139 V82 Q85 75 92 75 H108 Q116 75 116 67 V54 Q116 48 122 48 Z M122 76 H166 Q171 76 171 81 V135 Q171 142 164 142 H123 Q117 142 117 136 V82 Q117 76 122 76 Z M218 48 H248 V62 Q248 67 252 64 L269 48 H298 V76 H250 V169 H218 Z M 344 48 H 394 Q 424 48 424 78 V 137 Q 424 142 419 142 H 402 Q 394 142 394 150 V 164 Q 394 169 389 169 H 337 Q 307 169 307 139 V 82 Q 307 75 314 75 H 330 Q 338 75 338 67 V 54 Q 338 48 344 48 Z M 344 76 H 388 Q 393 76 393 81 V 135 Q 393 142 386 142 H 345 Q 339 142 339 136 V 82 Q 339 76 344 76 Z M508 45 V74 L466 106.5 L508 139 V169 L439 115 V98 Z M 560 48 H 610 Q 640 48 640 78 V 137 Q 640 142 635 142 H 618 Q 610 142 610 150 V 164 Q 610 169 605 169 H 553 Q 523 169 523 139 V 82 Q 523 75 530 75 H 546 Q 554 75 554 67 V 54 Q 554 48 560 48 Z M 560 76 H 604 Q 609 76 609 81 V 135 Q 609 142 602 142 H 561 Q 555 142 555 136 V 82 Q 555 76 560 76 Z M738 8 H768 V169 H739 V154 Q739 150 736 153 L719 169 H688 Q654 169 654 135 V82 Q654 48 688 48 H714 L735 64 Q738 67 738 63 Z M696 76 H731 Q737 76 737 82 V136 Q737 142 731 142 H697 Q685 142 685 130 V88 Q685 76 696 76 Z M820 48 H846 Q892 48 892 90 V120 H815 V128 Q815 144 835 144 H878 V169 H828 Q784 169 784 130 V77 Q784 71 791 71 H809 Q815 71 815 65 V54 Q815 48 820 48 Z M823 73 H851 Q862 73 862 84 V98 H815 V82 Q815 73 823 73 Z M921 8 H937 Q941 8 941 12 V33 L935 61 H922 L917 33 V12 Q917 8 921 8 Z M 959 8 H 975 Q 979 8 979 12 V 33 L 973 61 H 960 L 955 33 V 12 Q 955 8 959 8 Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
  background:rgb(221 241 250); opacity:1; clip-path:inset(0 0 0 0)
}
.cinema-copy { position:relative; z-index:2; text-align:center; margin-top:56px; max-width:720px }
.cinema-copy .eyebrow { justify-content:center; font-size:12px; margin:0 0 20px; color:var(--muted) }
.cinema-tagline {
  font-size:clamp(30px,3vw,46px); letter-spacing:-.038em; line-height:1.12;
  margin:0 0 36px; font-weight:500; color:var(--text)
}
.cinema-tagline span { color:var(--ice) }
.cinema-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap }

.cinema-bottom {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  color:var(--faint); font-size:12px
}
.scroll-cue { display:inline-flex; align-items:center; gap:14px; color:var(--faint); transition:color .3s }
.scroll-cue:hover { color:var(--text) }
.scroll-line { position:relative; width:1px; height:34px; background:var(--line-strong); overflow:hidden }
.scroll-line::after {
  content:''; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--ice);
  animation:scroll-cue 2.6s cubic-bezier(.65,0,.35,1) infinite
}
.intro-controls { display:flex; gap:24px; margin-left:auto }
.intro-controls button { border:0; background:none; color:var(--faint); font-size:12px; padding:10px 0; cursor:pointer; transition:color .3s }
.intro-controls button:hover { color:var(--ice) }

/* ---------- Logo light wave ---------- */
.logo-wave { overflow:hidden; background:rgb(221 241 250) }
.wordmark.logo-wave,.footer-wordmark.logo-wave { position:relative }
.wordmark,.footer-wordmark {
  mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 983 194%22%3E%3Cpath fill=%22white%22 fill-rule=%22evenodd%22 d=%22M55 4 H83 L34 190 H5 Z M122 48 H172 Q202 48 202 78 V137 Q202 142 197 142 H180 Q172 142 172 150 V164 Q172 169 167 169 H115 Q85 169 85 139 V82 Q85 75 92 75 H108 Q116 75 116 67 V54 Q116 48 122 48 Z M122 76 H166 Q171 76 171 81 V135 Q171 142 164 142 H123 Q117 142 117 136 V82 Q117 76 122 76 Z M218 48 H248 V62 Q248 67 252 64 L269 48 H298 V76 H250 V169 H218 Z M 344 48 H 394 Q 424 48 424 78 V 137 Q 424 142 419 142 H 402 Q 394 142 394 150 V 164 Q 394 169 389 169 H 337 Q 307 169 307 139 V 82 Q 307 75 314 75 H 330 Q 338 75 338 67 V 54 Q 338 48 344 48 Z M 344 76 H 388 Q 393 76 393 81 V 135 Q 393 142 386 142 H 345 Q 339 142 339 136 V 82 Q 339 76 344 76 Z M508 45 V74 L466 106.5 L508 139 V169 L439 115 V98 Z M 560 48 H 610 Q 640 48 640 78 V 137 Q 640 142 635 142 H 618 Q 610 142 610 150 V 164 Q 610 169 605 169 H 553 Q 523 169 523 139 V 82 Q 523 75 530 75 H 546 Q 554 75 554 67 V 54 Q 554 48 560 48 Z M 560 76 H 604 Q 609 76 609 81 V 135 Q 609 142 602 142 H 561 Q 555 142 555 136 V 82 Q 555 76 560 76 Z M738 8 H768 V169 H739 V154 Q739 150 736 153 L719 169 H688 Q654 169 654 135 V82 Q654 48 688 48 H714 L735 64 Q738 67 738 63 Z M696 76 H731 Q737 76 737 82 V136 Q737 142 731 142 H697 Q685 142 685 130 V88 Q685 76 696 76 Z M820 48 H846 Q892 48 892 90 V120 H815 V128 Q815 144 835 144 H878 V169 H828 Q784 169 784 130 V77 Q784 71 791 71 H809 Q815 71 815 65 V54 Q815 48 820 48 Z M823 73 H851 Q862 73 862 84 V98 H815 V82 Q815 73 823 73 Z M921 8 H937 Q941 8 941 12 V33 L935 61 H922 L917 33 V12 Q917 8 921 8 Z M 959 8 H 975 Q 979 8 979 12 V 33 L 973 61 H 960 L 955 33 V 12 Q 955 8 959 8 Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 983 194%22%3E%3Cpath fill=%22white%22 fill-rule=%22evenodd%22 d=%22M55 4 H83 L34 190 H5 Z M122 48 H172 Q202 48 202 78 V137 Q202 142 197 142 H180 Q172 142 172 150 V164 Q172 169 167 169 H115 Q85 169 85 139 V82 Q85 75 92 75 H108 Q116 75 116 67 V54 Q116 48 122 48 Z M122 76 H166 Q171 76 171 81 V135 Q171 142 164 142 H123 Q117 142 117 136 V82 Q117 76 122 76 Z M218 48 H248 V62 Q248 67 252 64 L269 48 H298 V76 H250 V169 H218 Z M 344 48 H 394 Q 424 48 424 78 V 137 Q 424 142 419 142 H 402 Q 394 142 394 150 V 164 Q 394 169 389 169 H 337 Q 307 169 307 139 V 82 Q 307 75 314 75 H 330 Q 338 75 338 67 V 54 Q 338 48 344 48 Z M 344 76 H 388 Q 393 76 393 81 V 135 Q 393 142 386 142 H 345 Q 339 142 339 136 V 82 Q 339 76 344 76 Z M508 45 V74 L466 106.5 L508 139 V169 L439 115 V98 Z M 560 48 H 610 Q 640 48 640 78 V 137 Q 640 142 635 142 H 618 Q 610 142 610 150 V 164 Q 610 169 605 169 H 553 Q 523 169 523 139 V 82 Q 523 75 530 75 H 546 Q 554 75 554 67 V 54 Q 554 48 560 48 Z M 560 76 H 604 Q 609 76 609 81 V 135 Q 609 142 602 142 H 561 Q 555 142 555 136 V 82 Q 555 76 560 76 Z M738 8 H768 V169 H739 V154 Q739 150 736 153 L719 169 H688 Q654 169 654 135 V82 Q654 48 688 48 H714 L735 64 Q738 67 738 63 Z M696 76 H731 Q737 76 737 82 V136 Q737 142 731 142 H697 Q685 142 685 130 V88 Q685 76 696 76 Z M820 48 H846 Q892 48 892 90 V120 H815 V128 Q815 144 835 144 H878 V169 H828 Q784 169 784 130 V77 Q784 71 791 71 H809 Q815 71 815 65 V54 Q815 48 820 48 Z M823 73 H851 Q862 73 862 84 V98 H815 V82 Q815 73 823 73 Z M921 8 H937 Q941 8 941 12 V33 L935 61 H922 L917 33 V12 Q917 8 921 8 Z M 959 8 H 975 Q 979 8 979 12 V 33 L 973 61 H 960 L 955 33 V 12 Q 955 8 959 8 Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
  aspect-ratio:983/194
}
.flat-symbol {
  mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 218 197%22%3E%3Cpath fill=%22white%22 d=%22M67 4 H98 L35 193 H4 Z M214 24 V60 L142 107 L214 157 V187 L116 118 V94 Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 218 197%22%3E%3Cpath fill=%22white%22 d=%22M67 4 H98 L35 193 H4 Z M214 24 V60 L142 107 L214 157 V187 L116 118 V94 Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat
}
.logo-wave::after {
  content:''; position:absolute; inset:-25% -55%;
  background:linear-gradient(105deg,transparent 29%,oklch(72% .135 250 / .6) 39%,oklch(84% .13 210 / .95) 46%,oklch(99% .015 215) 50%,oklch(88% .105 195 / .9) 54%,oklch(76% .10 240 / .5) 61%,transparent 71%);
  transform:translateX(-85%);
  animation:logo-light-wave var(--light-wave-duration) cubic-bezier(.38,0,.26,1) var(--wave-delay,0s) infinite;
  pointer-events:none
}
.cinema-fill { --wave-delay:1s }
.flat-symbol { --wave-delay:1.8s }
.footer-wordmark { --wave-delay:.5s }
.wave-paused .logo-wave::after { animation-play-state:paused }
.intro-running .logo-wave::after { animation:none; transform:translateX(-85%) }

/* ---------- Services ---------- */
.services { border-top:1px solid var(--line) }
.service-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(40px,6vw,96px); align-items:start }
.service-list { border-top:1px solid var(--line) }
.service { border-bottom:1px solid var(--line); scroll-margin-top:100px }
.service summary {
  display:flex; align-items:center; gap:22px; cursor:pointer; list-style:none;
  min-height:84px; padding:20px 0; transition:color .3s
}
.service summary::-webkit-details-marker { display:none }
.service h3 { font-size:clamp(20px,1.8vw,26px); font-weight:500; letter-spacing:-.03em; margin:0; color:var(--muted); transition:color .35s }
.service summary:hover h3,.service[open] h3 { color:var(--text) }
.service-number { font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; width:20px; flex:none }
.service[open] .service-number { color:var(--ice) }
.service-plus { position:relative; width:14px; height:14px; margin-left:auto; flex:none; color:var(--muted) }
.service-plus::before,.service-plus::after {
  content:''; position:absolute; left:0; right:0; top:6.5px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .5s var(--ease)
}
.service-plus::after { transform:rotate(90deg) }
.service[open] .service-plus { color:var(--ice) }
.service[open] .service-plus::after { transform:rotate(0) }
.service-detail { padding:0 0 32px 42px; animation:copy-enter .8s var(--ease) }
.service-detail > p { font-size:16px; line-height:1.75; max-width:46ch; margin:0 0 20px; color:var(--muted) }
.service-points { list-style:none; padding:0; margin:0 0 22px; display:grid; gap:10px; font-size:14px; color:var(--text) }
.service-points li { display:flex; gap:12px; align-items:baseline }
.service-points li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--ice); flex:none; transform:translateY(-2px) }
.tags { display:flex; flex-wrap:wrap; gap:8px }
.tags span { font-size:12px; color:var(--muted); border:1px solid var(--line-strong); border-radius:999px; padding:4px 12px }

.showcase {
  position:sticky; top:108px;
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border:1px solid var(--line); border-radius:24px;
  padding:22px; overflow:hidden;
  box-shadow:0 40px 100px -40px oklch(0% 0 0 / .8);
}
.showcase::before {
  content:''; position:absolute; inset:-40% -20% auto; height:80%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,oklch(70% .08 225 / .10),transparent 70%)
}
.showcase-head { position:relative; display:flex; justify-content:space-between; gap:20px; font-size:12px; color:var(--faint); padding:2px 4px 18px }
.showcase-head span:last-child { color:var(--muted) }

.browser {
  position:relative; border-radius:12px; overflow:hidden;
  background:var(--ink-3);
  box-shadow:0 0 0 1px var(--line-strong),0 30px 60px -30px oklch(0% 0 0 / .8);
}
.browser-bar {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:34px; padding:0 14px; background:oklch(21% .011 235); border-bottom:1px solid var(--line)
}
.dots { display:flex; gap:6px }
.dots i { width:8px; height:8px; border-radius:50%; background:oklch(100% 0 0 / .14) }
.browser-url {
  font-size:11px; color:var(--muted); background:oklch(100% 0 0 / .05);
  padding:3px 14px; border-radius:999px; min-width:160px; text-align:center
}

/* Each service has its own composed website, rather than a recoloured template. */
.concept-page { container-type:inline-size; position:relative; overflow:hidden; padding:0!important; min-height:0!important; background:oklch(95% .01 80); color:oklch(24% .02 90); }
.concept-body { aspect-ratio:1.2; position:relative; }
.concept-screen { position:absolute; inset:0; overflow:hidden; display:none; font:400 2cqw/1.5 Manrope,sans-serif; }
.concept-page[data-theme="0"] .shop-screen,.concept-page[data-theme="1"] .stay-screen,.concept-page[data-theme="2"] .business-screen,.concept-page[data-theme="3"] .portfolio-screen,.concept-page[data-theme="4"] .journal-screen,.concept-page[data-theme="5"] .platform-screen { display:block; }
.sample-nav { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:2cqw; padding:4cqw 5cqw; font-size:1.65cqw; }
.sample-nav strong { font-size:3cqw; letter-spacing:-.05em; }
.sample-label { font-size:1.65cqw; display:block; }
.sample-copy h3,.stay-copy h3,.business-copy h3,.portfolio-screen h3,.journal-feature h3 { font-size:7.4cqw; line-height:1.08; font-weight:500; letter-spacing:-.055em; margin:3cqw 0; }
.sample-button { display:inline-block; padding:2cqw 3cqw; background:oklch(26% .03 65); color:oklch(97% .01 80); font-size:1.7cqw; margin-top:3cqw; }
.shop-screen { background:oklch(95% .016 80); }
.shop-layout { position:relative; display:grid; grid-template-columns:1fr 1fr; padding:4cqw 5cqw 7cqw; gap:3cqw; align-items:center; }
.shop-layout img { width:100%; height:51cqw; object-fit:cover; }
.sample-copy p { font-size:2cqw; line-height:1.7; }
.product-caption { position:absolute; bottom:2cqw; right:5cqw; width:43.5cqw; font-size:1.5cqw; display:flex; justify-content:space-between; }
.sample-strip { border-top:1px solid oklch(30% .02 80 / .15); margin:2cqw 5cqw; padding-top:3cqw; display:flex; justify-content:space-between; font-size:1.75cqw; }
.stay-screen { color:oklch(97% .014 80); }
.sample-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stay-shade { position:absolute; inset:0; background:linear-gradient(180deg,oklch(17% .025 70 / .42),oklch(17% .025 70 / .12) 45%,oklch(17% .025 70 / .6)); }
.stay-screen .sample-nav strong { letter-spacing:.16em; font-size:2.4cqw; }
.stay-copy { position:absolute; left:6cqw; top:25cqw; }
.stay-copy h3 { font-family:Georgia,serif; font-size:10cqw; letter-spacing:-.04em; }
.booking-bar { position:absolute; bottom:5cqw; left:5cqw; right:5cqw; background:oklch(96% .012 80); color:oklch(26% .025 70); display:flex; align-items:center; justify-content:space-between; padding:2.5cqw; gap:2cqw; font-size:1.5cqw; }
.booking-bar b { display:block; font-weight:500; font-size:2cqw; margin-top:1cqw; }
.booking-action { background:oklch(32% .04 90); padding:3cqw 2cqw; color:oklch(96% .012 80); }
.business-screen { background:oklch(96% .007 230); color:oklch(24% .022 230); }
.business-copy { padding:4cqw 5cqw; }
.business-copy h3 { font-size:7cqw; }
.sample-text-link { display:inline-block; font-size:1.7cqw; padding:1cqw 0; border-bottom:1px solid currentColor; }
.business-screen > img { height:29cqw; width:90%; margin:0 5%; object-fit:cover; object-position:center 38%; }
.business-footer { display:flex; justify-content:space-between; padding:3cqw 5cqw; font-size:1.55cqw; }
.portfolio-screen { background:oklch(22% .012 250); color:oklch(94% .008 90); }
.portfolio-screen .sample-nav strong { font-size:2cqw; letter-spacing:.02em; }
.portfolio-screen h3 { position:relative; z-index:2; margin:4cqw 5cqw 0; font-size:10cqw; line-height:.99; }
.portfolio-screen h3 span { margin-left:7cqw; }
.portfolio-image { margin:-2cqw 5cqw 0 22cqw; position:relative; }
.portfolio-image img { height:38cqw; width:100%; object-fit:cover; }
.portfolio-image > span { position:absolute; left:2cqw; bottom:2cqw; background:oklch(20% .01 250 / .8); padding:.5cqw 1cqw; font-size:1.6cqw; }
.portfolio-caption { display:flex; justify-content:space-between; margin:4cqw 5cqw; font-size:1.6cqw; }
.journal-screen { background:oklch(96% .015 95); color:oklch(27% .025 130); padding:4cqw 5cqw; }
.journal-masthead { display:flex; align-items:center; justify-content:space-between; }
.journal-masthead strong { font-family:Georgia,serif; font-size:7cqw; letter-spacing:-.065em; font-weight:400; }
.journal-masthead span { font-size:1.7cqw; }
.journal-nav { border-block:1px solid oklch(27% .025 130 / .25); padding:2cqw 0; margin-top:2cqw; font-size:1.8cqw; }
.journal-nav > span { float:right; }
.journal-feature { display:grid; grid-template-columns:1fr 1fr; gap:4cqw; padding-top:5cqw; align-items:center; }
.journal-feature img { height:39cqw; width:100%; object-fit:cover; }
.journal-feature h3 { font-family:Georgia,serif; font-size:7cqw; letter-spacing:-.04em; }
.journal-feature p { font-size:1.8cqw; }
.journal-feature .sample-label { font-size:1.4cqw; }
.journal-bottom { display:flex; justify-content:space-between; border-top:1px solid oklch(27% .025 130 / .25); margin-top:4cqw; padding-top:3cqw; font-size:1.7cqw; }
.platform-screen { background:oklch(97% .006 170); color:oklch(28% .025 165); }
.app-sidebar { width:24%; height:100%; position:absolute; background:oklch(93% .012 165); padding:4cqw 2cqw; display:flex; flex-direction:column; gap:2cqw; font-size:1.8cqw; }
.app-sidebar strong { font-size:4cqw; padding:0 1cqw 4cqw; letter-spacing:-.04em; }
.app-sidebar strong span { color:oklch(52% .09 165); }
.app-sidebar > span { padding:1.5cqw; }
.app-sidebar .app-active { background:oklch(86% .032 165); border-radius:.7cqw; }
.app-sidebar .app-bottom { margin-top:auto; }
.app-main { margin-left:24%; padding:3cqw; }
.app-top { display:flex; align-items:center; justify-content:space-between; font-size:1.5cqw; border-bottom:1px solid oklch(28% .025 165 / .12); padding-bottom:3cqw; }
.app-top span { padding:1cqw; background:oklch(89% .03 165); border-radius:50%; }
.app-heading { display:flex; align-items:center; justify-content:space-between; margin:3cqw 0; }
.app-heading span { font-size:1.2cqw; letter-spacing:.04em; }
.app-heading h3 { margin:1cqw 0 0; font-size:3.2cqw; font-weight:600; letter-spacing:-.04em; }
.app-heading > b { font-size:1.3cqw; background:oklch(34% .045 165); color:oklch(97% .01 165); padding:1.4cqw; border-radius:.8cqw; }
.app-metrics { display:grid; grid-template-columns:1fr 1fr; gap:3cqw; margin:3cqw 0; font-size:1.7cqw; }
.app-metrics > div { border-bottom:1px solid oklch(28% .025 165 / .15); padding-bottom:3cqw; }
.app-metrics strong { display:block; font-size:5cqw; font-weight:500; line-height:1.4; }
.app-metrics small { font-size:1.2cqw; margin-left:1cqw; }
.app-chart { background:oklch(99% .004 165); border:1px solid oklch(28% .025 165 / .12); padding:3cqw; border-radius:1cqw; font-size:1.7cqw; }
.app-chart > div:first-child { display:flex; justify-content:space-between; }
.app-chart > div:first-child span { font-size:1.3cqw; }
.app-chart svg { width:100%; height:16cqw; margin-top:2cqw; display:block; }
.chart-days { display:flex; justify-content:space-between; font-size:1.2cqw; margin-top:2cqw; }
.app-task { display:flex; align-items:center; gap:2cqw; margin-top:2cqw; font-size:1.6cqw; }
.app-task small { display:block; font-size:1.2cqw; opacity:.7; }
.app-task b { margin-left:auto; font-size:1.2cqw; font-weight:400; padding:.7cqw 1cqw; border-radius:1cqw; background:oklch(92% .04 85); }
.task-check { border:1px solid oklch(28% .025 165 / .25); padding:.3cqw .8cqw; border-radius:.5cqw; }
.concept-disclaimer { margin:12px 0 0; font-size:11px; text-align:center; color:var(--muted); }
.showcase-controls { position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px }
.showcase-hint { font-size:12px; color:var(--faint) }
.explore-step {
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:transparent;
  font-size:16px; cursor:pointer; transition:border-color .3s,background .3s,color .3s
}
.explore-step:hover { border-color:var(--ice); color:var(--ice) }

.service-note { margin:56px 0 0; font-size:15px; color:var(--muted) }
.service-note strong { color:var(--text); font-weight:600 }
.service-note a { display:inline-block; white-space:nowrap; margin-left:10px; color:var(--ice); border-bottom:1px solid oklch(93% .038 225 / .35); padding-bottom:2px; transition:border-color .3s }
.service-note a:hover { border-color:var(--ice) }

/* ---------- Work ---------- */


/* ---------- Approach ---------- */
.approach { border-top:1px solid var(--line) }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.principle {
  position:relative; padding:32px 32px 36px; border-radius:var(--radius);
  background:var(--ink-2); border:1px solid var(--line);
  transition:border-color .5s var(--ease),transform .7s var(--ease)
}
.principle:hover { border-color:var(--line-strong) }
.step {
  display:block; font-size:56px; font-weight:500; letter-spacing:-.05em; line-height:1;
  color:transparent; -webkit-text-stroke:1px oklch(93% .038 225 / .45);
}
.step-label { margin:28px 0 10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); font-weight:600 }
.principle h3 { font-size:24px; font-weight:500; letter-spacing:-.03em; margin:0 0 14px }
.principle > p:last-child { color:var(--muted); font-size:15px; line-height:1.75; margin:0 }

/* ---------- Studio ---------- */
.studio-section { border-block:1px solid var(--line); background:var(--ink-2); padding-block:clamp(96px,11vw,150px); overflow:hidden }
.studio-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,8vw,120px); align-items:center }
.studio-symbol { position:relative; aspect-ratio:1; max-width:460px; width:100%; margin-inline:auto; display:grid; place-items:center }
.studio-orbit {
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 50%,oklch(70% .08 225 / .12),transparent 62%);
}
.studio-orbit::before,.studio-orbit::after { content:''; position:absolute; border-radius:50%; border:1px solid var(--line) }
.studio-orbit::before { inset:14% }
.studio-orbit::after { inset:29% }
.flat-symbol { position:relative; width:40%; aspect-ratio:218/197; filter:drop-shadow(0 0 30px oklch(80% .1 220 / .25)) }
.studio-copy h2 { margin-bottom:32px }
.studio-copy h2 span { color:var(--ice) }
.studio-copy > p:not(.eyebrow) { color:var(--muted); max-width:50ch; font-size:16px; line-height:1.8; margin:0 0 18px }
.studio-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:40px 0 0; padding-top:28px; border-top:1px solid var(--line) }
.studio-facts dt { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); font-weight:600; margin-bottom:8px }
.studio-facts dd { margin:0; font-size:14px; color:var(--muted); line-height:1.5 }

/* ---------- Contact ---------- */
.closing { position:relative; overflow:hidden; text-align:center }
.closing::before {
  content:''; position:absolute; inset:auto 0 -30%; height:90%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 60%,oklch(70% .08 225 / .10),transparent 70%)
}
.closing-inner { position:relative; display:flex; flex-direction:column; align-items:center }
.closing .eyebrow { justify-content:center }
.closing h2 { font-size:clamp(46px,7.4vw,110px); letter-spacing:-.048em; line-height:.98 }
.closing h2 span { color:var(--ice) }
.contact-description { max-width:52ch; margin:32px auto 44px; color:var(--muted); font-size:17px; line-height:1.75 }
.contact-email {
  display:inline-flex; align-items:center; gap:14px;
  font-size:clamp(22px,3vw,40px); font-weight:500; letter-spacing:-.035em;
  padding-bottom:10px; background:linear-gradient(var(--ice),var(--ice)) left bottom/0 1px no-repeat,linear-gradient(var(--line-strong),var(--line-strong)) left bottom/100% 1px no-repeat;
  transition:background-size .8s var(--ease),color .3s
}
.contact-email .arrow { color:var(--ice); font-size:.7em }
.contact-email:hover { background-size:100% 1px,100% 1px }
.contact-email:hover .arrow { transform:translate(3px,-3px) }
.closing-actions { margin-top:44px }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--line); padding-top:72px }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px; padding-bottom:72px }
.footer-slogan { margin:0; font-size:clamp(22px,2vw,28px); letter-spacing:-.03em; line-height:1.25; font-weight:500 }
.footer-slogan span { color:var(--ice) }
.footer-col { display:flex; flex-direction:column; gap:12px; font-size:14px; color:var(--muted) }
.footer-col h2 { margin:0 0 6px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600 }
.footer-col a { width:fit-content; transition:color .3s }
.footer-col a:hover { color:var(--text) }
.footer-wordmark { width:100%; opacity:.95 }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  border-top:1px solid var(--line); padding:28px 0 32px; margin-top:48px; font-size:12px; color:var(--faint)
}
.footer-bottom a { color:var(--muted); transition:color .3s }
.footer-bottom a:hover { color:var(--ice) }
.footer-bottom a span { margin-left:10px }

/* ---------- Reveal ---------- */
.reveal { opacity:1 }
.js-motion .reveal.pending { opacity:0; transform:translateY(28px) }
.js-motion .reveal.pending,.js-motion .reveal.is-visible {
  transition:opacity 1.4s cubic-bezier(.22,.1,.25,1),transform 1.4s var(--ease)
}
.js-motion .reveal.is-visible { opacity:1; transform:none }
.principles .principle:nth-child(2) { transition-delay:.12s }
.principles .principle:nth-child(3) { transition-delay:.24s }

/* ==========================================================================
   Intro sequence (timing controlled by the variables at the top)
   ========================================================================== */
.intro-running .cinema-logo { animation:cinema-arrive var(--logo-duration) linear both }
.intro-running .neon-outline { animation:neon-presence var(--logo-duration) ease both }
.intro-running .neon-path { animation:neon-draw var(--outline-draw-duration) linear var(--trace-delay) both }
.intro-running .cinema-fill { animation:neon-color-fill var(--logo-duration) cubic-bezier(.32,0,.25,1) both }
.intro-running .cinema-aura { animation:cinema-aura var(--logo-duration) ease both }
.intro-running .cinema-grid { animation:cinema-aura var(--logo-duration) ease both }
/* The content entrances have independent durations; the actions row ends the sequence. */
.intro-running .header { animation:header-arrive 1.4s cubic-bezier(.22,.1,.25,1) var(--entrance-start) both }
.intro-running .cinema-copy>.eyebrow { animation:content-arrive 1.3s cubic-bezier(.22,.1,.25,1) calc(var(--entrance-start) + .2s) both }
.intro-running .cinema-tagline { animation:content-arrive 1.5s cubic-bezier(.22,.1,.25,1) calc(var(--entrance-start) + .35s) both }
.intro-running .cinema-actions { animation:content-arrive 1.4s cubic-bezier(.22,.1,.25,1) calc(var(--entrance-start) + .6s) both }
.intro-running .scroll-cue { animation:content-arrive 1.4s cubic-bezier(.22,.1,.25,1) calc(var(--entrance-start) + .6s) both }
.intro-running .intro-controls { animation:cinema-controls var(--logo-duration) ease both }
.intro-paused .cinema-hero *,.intro-paused .header { animation-play-state:paused!important }

@keyframes cinema-arrive { 0%,6% { opacity:0 } 9%,100% { opacity:1 } }
@keyframes neon-draw { from { stroke-dashoffset:1000 } to { stroke-dashoffset:0 } }
@keyframes neon-presence { 0%,6% { opacity:0 } 9%,62% { opacity:1 } 86% { opacity:.55 } 100% { opacity:0 } }
@keyframes neon-color-fill {
  0%,60% { opacity:0; clip-path:inset(100% 0 0 0) }
  63% { opacity:.2; clip-path:inset(94% 0 0 0) }
  78% { opacity:.65; clip-path:inset(55% 0 0 0) }
  93%,100% { opacity:1; clip-path:inset(0 0 0 0) }
}
@keyframes logo-light-wave { 0%,8% { transform:translateX(-85%) } 58%,100% { transform:translateX(85%) } }
@keyframes cinema-aura { 0%,15% { opacity:0; transform:scale(.65) } 65% { opacity:.9; transform:scale(1) } 100% { opacity:.9; transform:scale(1) } }
@keyframes cinema-controls { 0%,8% { opacity:0 } 16%,100% { opacity:1 } }
@keyframes content-arrive {
  0% { opacity:0; transform:translateY(24px); visibility:hidden }
  35% { opacity:.85; visibility:visible }
  100% { opacity:1; transform:translateY(0); visibility:visible }
}
@keyframes header-arrive {
  from { opacity:0; transform:translateY(-20px); visibility:hidden }
  to { opacity:1; transform:translateY(0); visibility:visible }
}
@keyframes copy-enter { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
@keyframes scroll-cue { 0% { top:-40% } 100% { top:100% } }

/* ---------- Final composition refinements ---------- */
.section { padding-block:clamp(88px,9vw,136px); }
.section h2,.studio-copy h2 { line-height:1.12; font-size:clamp(36px,4.6vw,66px); letter-spacing:-.04em; }
.section h2 span { color:var(--muted); }
.section-heading > div { min-width:0; }
.section-description { max-width:36ch; line-height:1.85; }
.header-inner { height:88px; }
.header-nav a { display:flex; align-items:center; min-height:44px; }
.header-nav a::after { bottom:4px; }
.header-nav a[aria-current="location"] { color:var(--ice); }
.header-nav a[aria-current="location"]::after { transform:scaleX(1); }
.header-cta,.site-menu summary { min-height:44px; }
.menu-panel { background:var(--ink-2); }
.pill:active,.explore-step:active { transform:translateY(1px); }
.cinema-grid { opacity:.18; }
.cinema-copy { margin-top:48px; }
.cinema-tagline { line-height:1.22; }
.cinema-bottom { color:var(--muted); }
.intro-controls button { min-height:44px; color:var(--muted); }
.showcase { padding:20px; border-radius:16px; box-shadow:none; background:var(--ink-2); }
.showcase-head,.showcase-hint { color:var(--muted); }
.showcase-head { font-size:13px; }
.browser { border-radius:8px; }
.service h3 { line-height:1.3; }
.service-points { line-height:1.7; }
.principles { gap:clamp(28px,4vw,64px); }
.principle { padding:28px 0 0; border:0; border-top:1px solid var(--line-strong); border-radius:0; background:none; }
.step { font-size:34px; color:var(--ice); -webkit-text-stroke:0; }
.step-label { margin:28px 0 12px; font-size:13px; letter-spacing:.06em; }
.principle > p:last-child { font-size:16px; line-height:1.85; }
.studio-orbit { border:0; }
.studio-orbit::before { inset:12%; }
.studio-orbit::after { display:none; }
.studio-copy > p:not(.eyebrow) { line-height:1.85; }
.closing h2 { font-size:clamp(42px,6.2vw,88px); line-height:1.1; }
.closing-actions { margin-top:28px; }
.footer-wordmark { max-width:1040px; margin-inline:auto; }
.footer-col a { min-height:30px; display:flex; align-items:center; }
@media(max-width:1100px) and (min-width:961px) {
  .studio-grid { gap:48px; }
}
@media(max-width:600px) {
  .studio-facts div { flex-direction:column; gap:6px; }
  .footer-col a { min-height:38px; }
  .cinema-copy { width:100%; }
  .cinema-tagline { font-size:clamp(27px,7.5vw,34px); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(min-width:1800px) {
  .cinema-scene { width:820px }
}

@media(max-height:620px) and (min-width:751px) {
  .cinema-hero { min-height:620px; padding:100px 32px 82px }
  .cinema-scene { width:min(62vw,600px) }
  .cinema-copy { margin-top:28px }
  .cinema-copy .eyebrow { margin-bottom:12px }
  .cinema-tagline { font-size:30px; margin-bottom:22px }
  .cinema-bottom { bottom:14px }
}

@media(max-width:1100px) {
  .section-heading { flex-direction:column; align-items:flex-start; gap:24px }
  .section-description { max-width:52ch }
  .studio-facts { grid-template-columns:1fr; gap:18px }
  .studio-facts div { display:flex; gap:20px; align-items:baseline }
  .studio-facts dt { width:120px; flex:none; margin:0 }
}

@media(max-width:960px) {
  .header-nav { display:none }
  .site-menu { display:block }
  .service-layout { grid-template-columns:1fr }
  .showcase { position:relative; top:auto }
  .principles { grid-template-columns:1fr }
  .studio-grid { grid-template-columns:1fr }
  .studio-symbol { max-width:300px }
  .footer-top { grid-template-columns:1fr 1fr }
  .footer-slogan { grid-column:1/-1 }
}

@media(max-width:750px) {
  .cinema-hero { min-height:max(600px,100svh); padding:100px 20px 100px }
  .cinema-scene { width:88vw }
  .cinema-copy { margin-top:44px }
  .cinema-copy .eyebrow { font-size:11px; letter-spacing:.1em }
  .cinema-tagline { font-size:30px; margin-bottom:28px }
  .cinema-bottom { bottom:18px; font-size:11px }
  .scroll-cue { font-size:0; gap:0 }
  .intro-controls { gap:18px }
  .intro-controls button { font-size:11px }
}

@media(max-width:600px) {
  .header-inner { height:72px; gap:12px }
  .wordmark { width:124px }
  .header-cta { display:none }
  .cinema-actions { flex-direction:column; align-items:stretch; width:100%; max-width:320px; margin-inline:auto }
  .cinema-actions .pill-ghost { border-color:var(--line-strong) }
  .section-heading { margin-bottom:40px }
  .service summary { gap:16px; min-height:76px }
  .service-detail { padding-left:36px }
  .showcase { padding:14px; border-radius:20px }
  .concept-page { min-height:300px; padding:20px }
  .concept-nav span { display:none }
  .browser-url { min-width:0 }
  .principle { padding:24px 0 0 }
  .studio-symbol { max-width:230px }
  .service-note a { display:table; margin:10px 0 0 }
  .step { font-size:30px }
  .closing h2 { font-size:clamp(42px,12.5vw,64px) }
  .contact-description { font-size:16px }
  .contact-email { font-size:clamp(19px,6vw,28px) }
  .footer { padding-top:56px }
  .footer-top { grid-template-columns:1fr 1fr; gap:36px 24px; padding-bottom:56px }
  .footer-bottom { flex-wrap:wrap; gap:14px }
  .footer-bottom > span:nth-child(2) { order:3; width:100% }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
  .js-motion .reveal.pending { opacity:1; transform:none }
  .cinema-logo,.cinema-copy,.header,.scroll-cue { opacity:1!important; visibility:visible!important }
  .neon-outline { display:none }
  .cinema-fill { opacity:1; clip-path:none }
  .logo-wave::after { display:none }
  .scroll-line::after { display:none }
}

/* Project options: clear scope, generous type, one deliberate ice-blue surface. */
.project-options { background:var(--ink-2); border-block:1px solid var(--line); }
.options-intro { max-width:760px; }
.options-intro > p:last-child { max-width:54ch; font-size:17px; line-height:1.8; color:var(--muted); margin:26px 0 48px; }
.scope-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,96px); align-items:start; }
.scope-choices { display:flex; flex-direction:column; border-top:1px solid var(--line-strong); }
.scope-choice { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:30px 0; background:none; border:0; border-bottom:1px solid var(--line-strong); cursor:pointer; text-align:left; color:var(--muted); transition:color .5s var(--ease); }
.scope-choice small { display:block; font-size:12px; color:var(--faint); margin-bottom:10px; }
.scope-choice strong { font-size:clamp(22px,2.4vw,32px); font-weight:500; letter-spacing:-.04em; }
.scope-choice:hover,.scope-choice[aria-selected="true"] { color:var(--ice); }
.scope-panels { background:var(--ice); color:var(--ink); padding:clamp(28px,4vw,54px); border-radius:4px; min-height:495px; }
.scope-panels :focus-visible { outline-color:var(--ink); }
.scope-for { font-size:12px; margin:0 0 28px; color:oklch(40% .026 230); }
.scope-panel h3 { margin:0; font-size:clamp(29px,3.2vw,44px); line-height:1.13; font-weight:500; letter-spacing:-.04em; }
.scope-panel > p:not(.scope-for) { max-width:42ch; font-size:15px; line-height:1.75; color:oklch(38% .026 230); margin:22px 0; }
.scope-panel ul { list-style:none; padding:0; margin:24px 0 30px; font-size:14px; display:grid; gap:12px; }
.scope-panel li { display:flex; align-items:baseline; gap:12px; }
.scope-panel li::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; flex:none; align-self:center; }
.scope-link { display:flex; justify-content:space-between; gap:14px; padding-top:20px; border-top:1px solid oklch(30% .026 230 / .22); font-size:14px; font-weight:600; min-height:44px; }
.scope-link span { transition:transform .5s var(--ease); }.scope-link:hover span { transform:translate(3px,-3px); }
.scope-note { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,96px); margin-top:36px; }
.scope-note > span { font-size:15px; color:var(--ice); }
.scope-note p { font-size:13px; line-height:1.8; color:var(--muted); margin:0; max-width:60ch; }
.faq-section { border-top:1px solid var(--line); }
.faq-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,7vw,110px); }
.faq-intro h2 { font-size:clamp(32px,3.5vw,49px); }
.faq-intro > p:last-child { font-size:15px; line-height:1.9; color:var(--muted); margin-top:28px; }.faq-intro a { color:var(--ice); }
.faq-list { border-top:1px solid var(--line-strong); }
.faq-item { border-bottom:1px solid var(--line-strong); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; min-height:72px; font-size:17px; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }.faq-item summary span { font-size:24px; font-weight:400; color:var(--muted); transition:transform .5s var(--ease); }
.faq-item[open] summary span { transform:rotate(45deg); }.faq-item p { margin:0; padding:0 36px 26px 0; color:var(--muted); font-size:15px; line-height:1.85; }
.closing { text-align:left; background:var(--ink-2); border-top:1px solid var(--line); }
.enquiry-layout { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,100px); align-items:start; }
.closing .eyebrow { justify-content:flex-start; }.closing h2 { font-size:clamp(38px,4.5vw,64px); line-height:1.1; }
.enquiry-copy .contact-description { margin:28px 0 36px; font-size:16px; max-width:35ch; }.enquiry-copy .contact-email { font-size:18px; letter-spacing:-.02em; }
.enquiry-direct { font-size:12px; color:var(--muted); margin:18px 0; }
.project-brief { padding:clamp(24px,3.2vw,44px); background:var(--ink); border:1px solid var(--line-strong); border-radius:8px; }
.brief-heading { display:flex; justify-content:space-between; gap:20px; font-size:20px; letter-spacing:-.02em; }.brief-heading > span:last-child { color:var(--ice); }
.brief-intro { color:var(--muted); font-size:13px; margin:12px 0 30px; }
.project-brief label { display:block; font-size:12px; color:var(--muted); margin:0 0 10px; }
.project-brief input,.project-brief select,.project-brief textarea { width:100%; border:1px solid var(--line-strong); border-radius:4px; background:var(--ink-2); color:var(--text); padding:13px 14px; min-height:48px; font:400 14px/1.6 Manrope,system-ui,sans-serif; margin-bottom:24px; transition:border-color .35s var(--ease); }
.project-brief textarea { resize:vertical; }.project-brief ::placeholder { color:var(--faint); opacity:1; }.project-brief input:hover,.project-brief select:hover,.project-brief textarea:hover { border-color:var(--muted); }
.brief-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.brief-row > div { min-width:0; }
.brief-submit { width:100%; cursor:pointer; border:0; border-radius:4px; }
.brief-privacy { font-size:11px; line-height:1.7; color:var(--muted); margin:14px 0 0; }.brief-result { margin-top:28px; padding-top:28px; border-top:1px solid var(--line-strong); }
.brief-result-actions { display:flex; flex-wrap:wrap; gap:10px; }.brief-result-actions .pill { border-radius:4px; padding-inline:16px; font-size:12px; cursor:pointer; }.brief-result-actions button { background:none; }
#brief-status { font-size:12px; line-height:1.7; margin:18px 0 0; color:var(--muted); }
@media(max-width:960px) { .scope-layout,.scope-note,.faq-layout,.enquiry-layout { grid-template-columns:1fr; }.scope-note { gap:12px; }.scope-panels { min-height:0; }.scope-choice { padding:23px 0; }.scope-choices { max-width:none; }.faq-intro > p:last-child { margin-bottom:0; }.enquiry-copy .contact-description { max-width:50ch; }.project-brief { max-width:650px; width:100%; } }
@media(max-width:600px) { .options-intro > p:last-child { font-size:15px; }.scope-choice strong { font-size:24px; }.scope-panels { padding:28px; }.faq-item summary { font-size:16px; }.brief-row { grid-template-columns:1fr; gap:0; }.project-brief input,.project-brief select,.project-brief textarea { font-size:16px; }.brief-heading { font-size:18px; }.brief-result-actions { flex-direction:column; }.closing h2 { font-size:clamp(38px,10vw,54px); } }
@media(prefers-reduced-motion:reduce) { .scope-choice,.scope-choice > span:last-child,.faq-item summary span,.scope-link span { transition:none; } }

.menu-panel { max-height:calc(100svh - 110px); overflow-y:auto; }

/* The enquiry is a short sequence, with all answers retained when going back. */
.brief-progress { list-style:none; display:flex; gap:16px; padding:0 0 24px; margin:28px 0; border-bottom:1px solid var(--line-strong); }
.brief-progress li { display:flex; align-items:center; gap:7px; flex:1; font-size:12px; color:var(--faint); white-space:nowrap; }
.brief-progress li span { font-size:11px; font-variant-numeric:tabular-nums; }
.brief-progress li[aria-current="step"] { color:var(--ice); }.brief-progress .is-complete { color:var(--text); }
.brief-step { border:0; padding:0; margin:0; min-width:0; }
.brief-step-title { margin:0 0 26px; font-size:24px; font-weight:500; letter-spacing:-.03em; line-height:1.2; outline-offset:6px; }
.brief-step-actions { display:flex; align-items:center; gap:24px; }
.brief-back { background:none; border:0; cursor:pointer; font-size:14px; padding:12px 0; min-height:44px; flex:none; color:var(--muted); }.brief-back:hover { color:var(--ice); }
.field-optional { color:var(--faint); }
.project-brief .brief-result { margin:0; padding:0; border:0; }.brief-result > .brief-back { margin-top:14px; }
.brief-privacy { margin-top:24px; }
.project-launch { position:fixed; inset:0; z-index:90; overflow:hidden; display:grid; place-items:center; background:oklch(12% .012 230); }
html.project-navigating { scroll-behavior:auto!important; overflow-anchor:none; }
.project-navigating #contact .reveal { opacity:1; transform:none; transition:none; }
.launch-depth { position:absolute; inset:0; perspective:900px; }
.launch-frame { position:absolute; top:50%; left:50%; width:min(75vw,850px); height:70svh; max-height:640px; border:1px solid oklch(88% .085 220 / .8); border-radius:3px; box-shadow:0 0 22px oklch(80% .09 220 / .15),inset 0 0 22px oklch(80% .09 220 / .08); }
.launch-signature { position:relative; display:flex; flex-direction:column; align-items:center; gap:32px; }
.launch-symbol { display:block; width:80px; background:var(--ice); mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 218 197%22%3E%3Cpath fill=%22white%22 d=%22M67 4 H98 L35 193 H4 Z M214 24 V60 L142 107 L214 157 V187 L116 118 V94 Z%22/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 218 197%22%3E%3Cpath fill=%22white%22 d=%22M67 4 H98 L35 193 H4 Z M214 24 V60 L142 107 L214 157 V187 L116 118 V94 Z%22/%3E%3C/svg%3E") center/contain no-repeat; }
.launch-signature p { margin:0; color:var(--ice); font-size:14px; letter-spacing:.05em; }
.launch-beam { position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,oklch(90% .06 220 / .08) 47%,oklch(90% .06 220 / .18) 50%,transparent 64%); }
@media(max-width:600px) { .brief-progress { gap:8px; }.brief-progress li { font-size:11px; gap:5px; }.brief-step-title { font-size:23px; }.brief-step-actions { gap:18px; }.brief-step-actions .pill { padding-inline:14px; font-size:13px; }.launch-frame { width:85vw; height:55svh; } }
@media(prefers-reduced-motion:reduce) { .project-launch { display:none!important; } }


/* Prices sit next to their scope, with no artificial discounts or urgency. */
.package-list { margin-top:28px; }
.package { border-top:1px solid oklch(30% .026 230 / .22); padding:22px 0; }
.package:last-child { padding-bottom:0; }
.package-name { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.package-name h4 { font-size:18px; font-weight:600; letter-spacing:-.025em; margin:0; }
.package-name p { font-size:25px; font-weight:500; letter-spacing:-.04em; white-space:nowrap; margin:0; }
.package-name small { font-size:13px; font-weight:400; letter-spacing:0; }
.package > p { color:oklch(38% .026 230); font-size:14px; line-height:1.65; margin:10px 0 14px; max-width:43ch; }
.package a { font-size:14px; font-weight:600; display:inline-flex; gap:16px; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:5px; text-decoration-color:oklch(30% .026 230 / .3); }
.package a:hover { text-decoration-color:currentColor; }
.scope-note p + p { margin-top:14px; }
@media(max-width:760px) {
}

/* Explicit labels replace decorative arrows in the service explorer. */
.explore-step { width:auto; min-width:64px; padding:0 12px; font-size:12px; border-radius:4px; }
.scope-choice[aria-selected="true"] { border-bottom-color:var(--ice); }


/* Selected work: real client websites, two per row. */
.work { border-top:1px solid var(--line); }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,32px); }
.project { display:flex; flex-direction:column; padding:clamp(14px,1.6vw,20px); border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,var(--ink-2),var(--ink)); transition:border-color .5s var(--ease); }
.project:hover { border-color:var(--line-strong); }
.project-media { border-radius:8px; overflow:hidden; }
.project-media .browser { border-radius:8px; }
.project-media img { width:100%; height:auto; aspect-ratio:1440/696; object-fit:cover; object-position:top; transition:transform 1.2s var(--ease); }
.project:hover .project-media img { transform:scale(1.03); }
.project-info { display:grid; grid-template-columns:1fr auto; align-items:end; gap:18px 24px; padding:24px 6px 8px; flex:1; }
.project-title h3 { margin:0; font-size:clamp(24px,2.2vw,32px); font-weight:500; letter-spacing:-.035em; line-height:1.1; }
.project-title p { margin:6px 0 0; color:var(--muted); font-size:14px; }
.project-scope { grid-column:1; display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.project-scope li { font-size:12px; color:var(--muted); border:1px solid var(--line-strong); border-radius:999px; padding:4px 11px; }
.project-action { grid-column:2; grid-row:1 / span 2; align-self:end; font-size:14px; font-weight:600; color:var(--ice); white-space:nowrap; text-decoration:underline; text-underline-offset:5px; text-decoration-color:oklch(93% .038 225 / .35); transition:text-decoration-color .3s; }
.project:hover .project-action { text-decoration-color:var(--ice); }
@media(max-width:900px) { .project-grid { grid-template-columns:1fr; } }
@media(max-width:600px) { .project-info { grid-template-columns:1fr; padding:20px 4px 6px; } .project-action { grid-column:1; grid-row:auto; } }
@media(prefers-reduced-motion:reduce) { .project-media img { transition:none; } }

/* Language switch: EN on /, SQ on /sq/. */
.lang-switch { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line-strong); border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.06em; }
.lang-switch a,.lang-switch span { display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border-radius:999px; color:var(--muted); transition:color .3s,background .3s; }
.lang-switch a:hover { color:var(--text); }
.lang-switch [aria-current="true"] { background:oklch(100% 0 0 / .08); color:var(--text); }
@media(max-width:600px) { .lang-switch a,.lang-switch span { min-width:30px; height:32px; padding:0 6px; } }

/* Optical centring: the wordmark's closing quote marks are light, so the letters
   read as sitting left of centre. Shift the logo slightly right so it looks centred. */
.cinema-scene { transform:translateX(3.3%); }
.footer-wordmark { width:93.4%; transform:translateX(3.3%); }
@media(max-width:750px) { .cinema-scene { width:84vw; } }

/* Three clear routes, with a short introduction on Home. */
.header-nav a[aria-current="page"] { color:var(--ice); }
.header-nav a[aria-current="page"]::after { transform:scaleX(1); transform-origin:left; }
.page-hero { padding:clamp(158px,15vw,216px) 0 clamp(64px,7vw,104px); border-bottom:1px solid var(--line); }
.page-hero h1 { margin:0; font-size:clamp(42px,5.8vw,80px); font-weight:500; line-height:1.09; letter-spacing:-.055em; max-width:15ch; }
.page-intro { max-width:55ch; font-size:clamp(16px,1.5vw,19px); line-height:1.8; color:var(--muted); margin:30px 0 0; }
.page-index .section,.page-about .section { padding-block:clamp(64px,7vw,100px); }
.page-index .section h2 { font-size:clamp(30px,3.4vw,46px); }
.text-link { display:inline-block; font-size:15px; font-weight:600; padding-block:10px; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; text-decoration-color:var(--line-strong); transition:text-decoration-color .25s; }
.text-link:hover { text-decoration-color:currentColor; }
.home-services { background:var(--ice); color:var(--ink); --muted:oklch(40% .025 230); --faint:oklch(42% .025 230); --line-strong:oklch(30% .025 230 / .25); }
.home-services :focus-visible { outline-color:var(--ink); }
.home-overview { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,120px); align-items:start; }
.home-services .eyebrow { color:var(--muted); }
.overview-copy { max-width:37ch; margin:24px 0; color:var(--muted); font-size:16px; }
.home-service-list { border-top:1px solid var(--line-strong); }
.home-service-list a { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 0; min-height:60px; border-bottom:1px solid var(--line-strong); font-size:18px; letter-spacing:-.025em; }
.home-service-list a > span:first-child { transition:transform .25s; }
.home-service-list a:hover > span:first-child { transform:translateX(4px); }
.service-ordinal { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.client-strip { border-bottom:1px solid var(--line); padding-block:48px; }
.client-strip > .wrap { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.client-caption h2 { font-size:14px; font-weight:500; color:var(--ice); margin:0 0 8px; }
.client-caption p { font-size:14px; color:var(--muted); max-width:30ch; margin:0; }
.client-names { display:flex; gap:clamp(40px,7vw,110px); align-items:center; }
.client-names a { font-size:clamp(22px,2.6vw,34px); letter-spacing:-.035em; padding:10px 0; }
.client-names a:hover { color:var(--ice); }
.expertise-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:44px; }
.expertise-list { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,60px); }
.expertise-list article { border-top:1px solid var(--line-strong); padding-top:24px; }
.expertise-list h3 { font-size:21px; margin:0 0 12px; font-weight:500; letter-spacing:-.02em; }
.expertise-list p { font-size:15px; line-height:1.8; color:var(--muted); max-width:36ch; margin:0; }
.offerings { padding-block:40px 80px; }
.service-index { display:flex; flex-wrap:wrap; gap:10px 24px; margin-bottom:48px; }
.service-index a { font-size:14px; padding:8px 0; color:var(--muted); border-bottom:1px solid var(--line-strong); }
.service-index a:hover { color:var(--ice); }
.service-offering { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,88px); padding:40px clamp(24px,4vw,56px); border:1px solid var(--line); border-radius:8px; background:var(--ink-2); margin:0 0 18px; scroll-margin-top:108px; }
.service-offering:nth-of-type(even) { background:var(--ink); }
.offering-title { display:flex; align-items:baseline; gap:22px; }
.offering-index { color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums; }
.offering-title h2 { font-size:clamp(25px,2.8vw,36px); font-weight:500; line-height:1.2; letter-spacing:-.035em; margin:0 0 14px; }
.offering-title p { font-size:15px; color:var(--muted); margin:0; max-width:31ch; }
.offering-detail ul { list-style:none; margin:0 0 14px; padding:0; }
.offering-detail li { font-size:16px; padding:10px 0; border-bottom:1px solid var(--line); }
.offering-detail li:first-child { padding-top:0; }
.offering-detail .text-link { color:var(--ice); }
.quote-note { padding:36px 0; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.quote-note h2 { font-size:23px; font-weight:500; margin:0; letter-spacing:-.025em; }
.quote-note p { font-size:15px; color:var(--muted); margin:0; max-width:54ch; line-height:1.8; }
.exploration-disclosure { border-block:1px solid var(--line-strong); }
.exploration-disclosure > summary,.enquiry-disclosure > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:24px; cursor:pointer; padding:24px 0; font-size:18px; }
.exploration-disclosure > summary::-webkit-details-marker,.enquiry-disclosure > summary::-webkit-details-marker { display:none; }
.disclosure-plus { flex:none; position:relative; width:16px; height:16px; }
.disclosure-plus::before,.disclosure-plus::after { content:''; position:absolute; background:currentColor; width:16px; height:1px; top:7px; left:0; }
.disclosure-plus::after { transform:rotate(90deg); transition:transform .25s; }
[open] > summary > .disclosure-plus::after { transform:rotate(0); }
.exploration-disclosure > p { color:var(--muted); font-size:14px; max-width:58ch; }
.exploration-disclosure .section { padding:32px 0; }
.exploration-disclosure .wrap { width:100%; padding:0; }
.exploration-disclosure .section-heading { display:none; }
.page-about .section h2 { font-size:clamp(30px,3.6vw,48px); }
.page-about .project { scroll-margin-top:110px; }
.page-about .work { padding-top:0; border-top:0; }
.contact-compact { padding-block:clamp(56px,7vw,96px)!important; }
.contact-intro { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:clamp(32px,8vw,120px); }
.contact-compact h2 { font-size:clamp(36px,4.4vw,60px)!important; line-height:1.12; }
.contact-invitation p { font-size:17px; line-height:1.75; color:var(--muted); max-width:34ch; margin:0 0 14px; }
.enquiry-disclosure { border-top:1px solid var(--line-strong); margin-top:36px; }
.enquiry-disclosure > summary { color:var(--ice); font-size:16px; }
.enquiry-disclosure .project-brief { margin:0 0 12px auto; max-width:640px; }
.contact-compact::before { display:none; }
.compact-footer { padding-block:44px 24px; }
.compact-footer .footer-top { display:grid; grid-template-columns:1fr 2fr; gap:64px; padding-bottom:40px; }
.footer-brand .wordmark { width:180px; }
.footer-groups { display:grid; grid-template-columns:1fr 1.4fr .8fr; gap:32px; }
.footer-group > summary { list-style:none; font-size:14px; color:var(--ice); margin-bottom:14px; cursor:pointer; }
.footer-group > summary::-webkit-details-marker { display:none; }
.footer-group > summary span { display:none; }
.footer-group nav { display:grid; gap:8px; }
.footer-group a { font-size:13px; color:var(--muted); min-height:28px; padding-block:4px; }
.footer-group a:hover { color:var(--ice); }
.compact-footer .footer-bottom { margin:0; }
@media(max-width:960px) {
 .home-overview { gap:40px; }
 .page-index .cinema-hero { padding-top:130px; }
 .compact-footer .footer-top { grid-template-columns:1fr; gap:36px; }
}
@media(max-width:760px) {
 .home-overview,.contact-intro,.quote-note,.service-offering { grid-template-columns:1fr; }
 .client-strip > .wrap { align-items:flex-start; flex-direction:column; gap:24px; }
 .client-names { width:100%; justify-content:space-between; gap:20px; }
 .client-names a { font-size:26px; }
 .expertise-heading { display:block; margin-bottom:28px; }.expertise-heading .text-link { margin-top:20px; }
 .expertise-list { grid-template-columns:1fr; gap:24px; }.expertise-list p { max-width:48ch; }
 .page-hero { padding-top:144px; }.page-hero h1 { font-size:clamp(38px,8.5vw,60px); }
 .service-index { gap:4px 18px; margin-bottom:28px; }
 .service-offering { padding:28px 24px; gap:24px; }.offering-title { gap:14px; }.offering-detail { padding-left:28px; }
 .quote-note { gap:16px; }.contact-intro { gap:24px; }
 .enquiry-disclosure .project-brief { max-width:none; padding:22px; }.enquiry-disclosure > summary { font-size:16px; }
 .footer-groups { grid-template-columns:1fr; gap:0; }.footer-group { border-bottom:1px solid var(--line-strong); }
 .footer-group > summary { display:flex; justify-content:space-between; padding:20px 0; margin:0; }.footer-group > summary span { display:inline; }.footer-group[open] > summary span { transform:rotate(45deg); }
 .footer-group nav { padding-bottom:20px; }.footer-group a { font-size:14px; min-height:36px; }
 .compact-footer .footer-top { padding-bottom:24px; }
}
@media(prefers-reduced-motion:reduce) { .home-service-list a > span:first-child,.disclosure-plus::after { transition:none; } }
@media(max-width:380px) {
 .header-inner { gap:8px; }
 .header .wordmark { width:96px; }
 .header-actions { gap:8px; }
 .header .lang-switch { gap:0; }
 .header .lang-switch a,.header .lang-switch span { min-width:24px; padding-inline:4px; }
 .site-menu summary { gap:8px; padding-inline:10px; font-size:12px; }
}