:root{color-scheme:dark;--bg:#10243F;--panel:#142c4b;--ink:#F4F1EA;--muted:#d2d3d9;--line:#4e6681;--silver:#d8d9df}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Georgia,'Times New Roman',serif;min-height:100vh}a{color:inherit;text-decoration:none}button{font:inherit}header{position:relative;z-index:5;max-width:1440px;margin:auto;padding:33px clamp(24px,6vw,90px);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-family:Arial,sans-serif;font-weight:600;letter-spacing:.19em;font-size:14px;white-space:nowrap}.nav{display:flex;gap:clamp(16px,2.8vw,42px);align-items:center}.nav a,.lang{font-family:Arial,sans-serif;font-size:10px;letter-spacing:.17em;font-weight:600;color:#bac8d8;transition:color .2s}.nav a:hover,.nav a.active,.lang:hover{color:white}.lang{background:none;border:0;border-left:1px solid #53555b;padding:8px 0 8px 22px;cursor:pointer}main{min-height:calc(100vh - 185px)}.hero{min-height:calc(100svh - 185px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px 20px 96px;position:relative}.feather{font-size:68px;color:#c5c7cc;line-height:1;margin-bottom:43px;font-family:Georgia,serif;font-style:italic;transform:rotate(-36deg);font-weight:normal}.hero h1{font-size:clamp(46px,7vw,110px);line-height:1.06;letter-spacing:-.046em;font-weight:400;margin:0}.stroke{width:64px;height:1px;background:#a6a7ad;margin:41px 0 27px}.tagline{font-family:Arial,sans-serif;font-size:clamp(11px,1.3vw,15px);letter-spacing:.32em;color:#c6c7cd;margin:0;text-transform:uppercase}.bottom-note{font-family:Arial,sans-serif;letter-spacing:.15em;font-size:10px;color:#bdc8d6;position:absolute;bottom:49px}.page{width:min(950px,calc(100% - 48px));margin:0 auto;padding:clamp(75px,13vh,150px) 0 110px}.eyebrow{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.26em;color:#b3b6c0;text-transform:uppercase;margin:0 0 38px}.page h1{font-size:clamp(43px,7vw,83px);font-weight:400;letter-spacing:-.04em;margin:0 0 55px;line-height:1.04}.statement{font-size:clamp(25px,3.3vw,45px);line-height:1.31;max-width:830px;margin:0 0 42px;letter-spacing:-.025em}.bodycopy{font-family:Arial,sans-serif;font-size:15px;line-height:2.05;color:#d5dce6;max-width:660px;margin:0 0 35px;font-weight:300}.rule{height:1px;background:var(--line);margin:50px 0}.minor{font-family:Arial,sans-serif;font-size:12px;color:#c1ccda;letter-spacing:.07em;line-height:1.9}.contact-link{font-size:clamp(26px,4vw,50px);letter-spacing:-.01em;border-bottom:1px solid #8b8d94;padding-bottom:12px;display:inline-block}.contact-link:hover{color:white}.film-line{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:25px 0}.film-line:last-child{border-bottom:1px solid var(--line)}.film-label{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.15em;color:#b2b5bc}.film-status{font-family:Arial,sans-serif;font-size:11px;color:#b0bed1;text-transform:uppercase;letter-spacing:.1em}footer{max-width:1440px;margin:0 auto;padding:27px clamp(24px,6vw,90px) 36px;display:flex;justify-content:space-between;gap:12px;border-top:1px solid #425b78;font-family:Arial,sans-serif;color:#b7c2d1;font-size:10px;letter-spacing:.12em}footer a:hover{color:white}@media(max-width:700px){header{padding:24px 22px;flex-wrap:wrap;gap:23px}.brand{font-size:12px}.nav{width:100%;justify-content:space-between;gap:9px}.nav a,.lang{font-size:9px;letter-spacing:.08em}.lang{padding-left:10px}.hero{min-height:calc(100svh - 185px)}.hero h1{font-size:clamp(40px,10vw,68px)}.tagline{letter-spacing:.18em}.page{padding-top:75px}.film-line{align-items:start;flex-direction:column;gap:8px}footer{flex-direction:column;gap:12px}}

/* Brand wordmark, based on the supplied business-card composition */
.brand-logo{display:flex;flex-direction:column;align-items:center;width:min(490px,85vw);color:#f1eee5;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.04)}
.brand-logo .mark-top{font-family:Georgia,'Times New Roman',serif;font-size:clamp(58px,8.5vw,105px);font-weight:400;line-height:1.07;letter-spacing:-.055em;white-space:nowrap}
.brand-logo .mark-rule{width:100%;height:2px;background:linear-gradient(90deg,transparent,#e8e4db 8%,#e8e4db 92%,transparent);margin:10px 0 6px}
.brand-logo .mark-bottom{font-family:Georgia,'Times New Roman',serif;font-size:clamp(39px,5.3vw,64px);line-height:1.2;letter-spacing:-.025em}
.brand-logo .mark-motto{font-family:Georgia,'Times New Roman',serif;font-size:clamp(18px,2.5vw,28px);line-height:1.4;margin-top:3px;letter-spacing:-.02em}
.brand-logo .mark-services{font-family:Georgia,'Times New Roman',serif;font-size:clamp(11px,1.4vw,16px);letter-spacing:.025em;margin-top:66px;white-space:nowrap}
.brand-logo .mark-services i{font-style:normal;opacity:.7;margin:0 23px}
.home-hero{padding-bottom:60px}
@media(max-width:700px){.brand-logo .mark-services{margin-top:50px;font-size:11px}.brand-logo .mark-services i{margin:0 8px}.brand-logo .mark-rule{height:1px}}

/* Draft 03: Minimal monochrome identity */
:root{color-scheme:light;--bg:#ffffff;--panel:#ffffff;--ink:#111111;--muted:#656565;--line:#dfdfdf;--silver:#444444}
body{background:#fff;color:#111}
.brand{font-family:Arial,Helvetica,sans-serif;font-weight:600;letter-spacing:.12em;color:#111}
.nav a,.lang{color:#656565;font-weight:500}
.nav a:hover,.nav a.active,.lang:hover{color:#111}
.lang{border-left-color:#ddd}
.hero{min-height:calc(100svh - 185px)}
.brand-logo{color:#111;text-shadow:none;width:min(760px,90vw)}
.brand-logo .mark-top{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.042em;line-height:1.15;font-size:clamp(56px,8.4vw,116px)}
.brand-logo .mark-bottom{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.02em;font-size:clamp(27px,3.4vw,43px);margin-top:6px;line-height:1.2}
.brand-logo .mark-motto{font-family:Arial,Helvetica,sans-serif;letter-spacing:.23em;text-transform:uppercase;font-size:clamp(10px,1.2vw,13px);margin-top:37px;color:#555;line-height:1.8}
.brand-logo .mark-services{font-family:Arial,Helvetica,sans-serif;font-size:clamp(9px,1.1vw,11px);letter-spacing:.1em;color:#777;margin-top:70px}
.brand-logo .mark-services i{margin:0 19px;color:#aaa}
.eyebrow,.minor,.film-label,.film-status{color:#727272}
.bodycopy{color:#505050}
.rule{background:#ddd}
.film-line{border-color:#ddd}
.contact-link{border-color:#999}
.contact-link:hover{color:#555}
footer{border-top-color:#e6e6e6;color:#777}
footer a:hover{color:#111}
@media(max-width:700px){.brand-logo .mark-top{font-size:clamp(50px,12vw,78px)}.brand-logo .mark-bottom{font-size:clamp(25px,6vw,36px)}.brand-logo .mark-motto{margin-top:30px;letter-spacing:.15em}.brand-logo .mark-services{margin-top:55px;white-space:normal}.brand-logo .mark-services i{margin:0 7px}}

/* Official logo artwork and restrained approach animation */
.home-hero .official-logo{display:block;width:min(750px,85vw);height:auto;max-height:72vh;object-fit:contain;animation:logoApproach 1.9s cubic-bezier(.18,.7,.18,1) both;transform-origin:center center}
@keyframes logoApproach{from{opacity:0;transform:scale(.72);filter:blur(2px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.home-hero .official-logo{animation:none}}
.page{padding-top:clamp(65px,11vh,135px)}
.contact-person{margin-top:32px}
.contact-person a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.home-hero .official-logo{width:min(96vw,650px)}.contact-link{font-size:clamp(18px,5vw,30px);overflow-wrap:anywhere}}

/* Vision paragraphs: preserve author-defined line breaks */
.vision-paragraph{white-space:pre-line}

/* Final vision signature: emphatic and restrained */
.vision-signoff{margin:65px 0 0;font-family:Arial,Helvetica,sans-serif;font-size:clamp(14px,1.65vw,19px);font-weight:800;letter-spacing:.1em;line-height:1.6;color:#111;text-transform:uppercase}
@media(max-width:700px){.vision-signoff{margin-top:48px;letter-spacing:.065em}}


/* Revision: airy, editorial proportions */
header{padding-top:31px;padding-bottom:31px}
.brand{font-size:14px;letter-spacing:.12em;display:inline-flex;align-items:baseline;white-space:nowrap}
.brand-digit{display:inline-block;position:relative;top:-1.5px}
.nav a,.lang{font-size:12px;letter-spacing:.12em;font-weight:500}
.nav{gap:clamp(17px,2.7vw,39px)}
/* Enlarged cinematic approach: 150 percent of previous desktop image */
.home-hero{overflow:hidden;padding:18px 12px 58px}
.home-hero .official-logo{width:min(1125px,96vw);max-height:84vh;animation:logoApproachSlow 4.5s cubic-bezier(.12,.55,.22,1) both;will-change:transform,opacity}
@keyframes logoApproachSlow{0%{opacity:0;transform:scale(.57);filter:blur(2px)}24%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
/* Subpage typography tuned down for balanced reading */
.page{width:min(860px,calc(100% - 56px));padding-top:clamp(64px,10vh,108px);padding-bottom:105px}
.eyebrow{font-size:10px;margin-bottom:25px}
.page h1{font-size:clamp(34px,4.6vw,57px);margin-bottom:37px;letter-spacing:-.033em}
.statement{font-size:clamp(21px,2.45vw,33px);line-height:1.43;margin-bottom:31px;max-width:785px}
.bodycopy{font-size:14px;line-height:1.88;margin-bottom:27px;max-width:730px}
.rule{margin:37px 0}
.vision-signoff{font-size:clamp(15px,1.75vw,20px);font-weight:800;letter-spacing:.115em;margin-top:56px;color:#0b0b0b}
.contact-link{font-size:clamp(20px,2.6vw,32px);padding-bottom:9px}
.contact-person{margin-top:25px}
.minor{font-size:11px}
.film-line{padding:19px 0}
.film-label{font-size:11px}.film-status{font-size:11px}
/* A gentle vertical cascade for Vision and Filmography sections */
.cascade-page > *{animation:flowDown .85s cubic-bezier(.18,.73,.25,1) both;}
.cascade-page > :nth-child(1){animation-delay:.10s}
.cascade-page > :nth-child(2){animation-delay:.22s}
.cascade-page > :nth-child(3){animation-delay:.35s}
.cascade-page > :nth-child(4){animation-delay:.47s}
.cascade-page > :nth-child(5){animation-delay:.61s}
.cascade-page > :nth-child(6){animation-delay:.74s}
.cascade-page > :nth-child(7){animation-delay:.87s}
.cascade-page > :nth-child(8){animation-delay:1s}
.cascade-page > :nth-child(9){animation-delay:1.13s}
.cascade-page > :nth-child(n+10){animation-delay:1.23s}
@keyframes flowDown{from{opacity:0;transform:translateY(-25px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
 header{padding:22px 20px;gap:17px}.brand{font-size:12px}
 .nav{gap:8px}.nav a,.lang{font-size:10px;letter-spacing:.045em}.lang{padding-left:9px}
 .home-hero .official-logo{width:100vw;max-height:75vh}
 .page{width:calc(100% - 44px);padding-top:60px;padding-bottom:78px}
 .page h1{font-size:clamp(32px,8vw,46px);margin-bottom:28px}
 .statement{font-size:clamp(20px,5.1vw,27px)}
 .bodycopy{font-size:13px;line-height:1.9}
 .contact-link{font-size:clamp(18px,4.5vw,25px)}
 .vision-signoff{font-size:15px;letter-spacing:.055em}
}
@media(prefers-reduced-motion:reduce){.home-hero .official-logo,.cascade-page > *{animation:none;will-change:auto}}

/* Final typography adjustments requested by the studio */
/* Navigation +50% relative to previous desktop 12px and mobile 10px. */
.nav a,.lang{font-size:18px}
/* Page headings reduced to 80% of the previous scale. */
.page h1{font-size:clamp(27.2px,3.68vw,45.6px)}
/* Preserve signoff size, but match the copy's typeface and neutral weight. */
.vision-signoff{font-family:Arial,Helvetica,sans-serif;font-weight:400;letter-spacing:normal;text-transform:none}
@media(max-width:700px){
 .nav{flex-wrap:wrap;justify-content:flex-start;column-gap:16px;row-gap:12px;width:100%}
 .nav a,.lang{font-size:15px;letter-spacing:.045em}
 .lang{padding-left:12px}
 .page h1{font-size:clamp(25.6px,6.4vw,36.8px)}
}

/* Editorial refinement: navigation halfway between 12px and 18px */
.nav a,.lang{font-size:15px}
/* A single serif identity throughout the Vision page; size communicates hierarchy. */
.vision-lead,.vision-paragraph,.vision-signoff{
 font-family:Georgia,'Times New Roman',serif;
 font-weight:400;
 font-style:normal;
 letter-spacing:normal;
 text-transform:none;
}
.vision-lead{white-space:pre-line;font-size:clamp(31.5px,3.675vw,49.5px);line-height:1.42;max-width:none}
.vision-paragraph{white-space:pre-line;font-size:21px;line-height:1.72;max-width:100%;overflow-wrap:break-word}
.vision-signoff{font-size:clamp(15px,1.75vw,20px);line-height:1.6}
@media(max-width:700px){
 .nav a,.lang{font-size:12.5px}
 .nav{column-gap:12px;row-gap:10px}
 .vision-lead{font-size:clamp(25px,6.4vw,40.5px);overflow-wrap:anywhere}
 .vision-paragraph{font-size:19.5px;line-height:1.65}
}

/* Studio final adjustments: Contact email only and intermediate Vision headline */
.contact-main{min-height:calc(100vh - 185px);display:flex;justify-content:center;align-items:center;padding:60px 24px 110px}
.contact-only-link{font-family:Georgia,'Times New Roman',serif;font-size:clamp(16px,2.08vw,25.6px);font-weight:400;letter-spacing:-.01em;overflow-wrap:anywhere;text-align:center;text-decoration:none;border:0}
.contact-only-link:hover{text-decoration:underline;text-underline-offset:5px}
.vision-lead{font-size:clamp(25px,2.65vw,34px);font-weight:700;line-height:1.5}
@media(max-width:700px){.vision-lead{font-size:clamp(22px,5.6vw,29px)}.contact-only-link{font-size:clamp(16px,3.6vw,21px)}}

/* Vision scale adjustment: 80% of previous lead and paragraph sizes. */
.vision-lead{font-size:clamp(20px,2.12vw,27.2px)}
.vision-paragraph{font-size:16.8px}
@media(max-width:700px){
 .vision-lead{font-size:clamp(17.6px,4.48vw,23.2px)}
 .vision-paragraph{font-size:15.6px}
}

/* Vision: subtle structural drop, then three sequential fade-up layers. */
.vision-sequence{animation:visionFrameSettle 1.45s cubic-bezier(.16,1,.3,1) both;}
.vision-sequence > *{animation:none;}
.vision-sequence .vision-motion{opacity:0;animation:visionFadeUp 1.45s cubic-bezier(.16,1,.3,1) both;}
.vision-sequence .vision-motion-lead{animation-delay:1.05s;}
.vision-sequence .vision-motion-body{animation-delay:1.20s;}
.vision-sequence .vision-motion-end{animation-delay:1.35s;}
@keyframes visionFrameSettle{from{opacity:.6;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes visionFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.vision-sequence,.vision-sequence .vision-motion{animation:none;opacity:1;transform:none;}}
