/* ER Creativity Production · editorial architecture design system */
:root { --er-edit-accent:#C6FF34; --er-edit-ink:#080b09; --er-edit-line:rgba(245,248,242,.18); --er-edit-gutter:clamp(20px,3.6vw,64px); }
html {scroll-behavior:smooth;}
body {background:#080b09;color:#f5f7f3;font-family:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.015em;}
body h1,body h2,body h3,body h4,body .display {font-family:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.055em;}
body .site-header,body #site-header {background:#080b09;}
body :where(a,button):focus-visible {outline:2px solid #C6FF34;outline-offset:4px;}
/* Carefully spaced typography and visual hierarchy, inspired by editorial architecture rather than decorative cards. */
body[data-page=home] .er-intro {position:relative;background:#080b09;border-bottom:1px solid var(--er-edit-line);}
.er-wide {width:min(100% - var(--er-edit-gutter)*2,1600px);margin:0 auto;}
.er-intro {padding:clamp(55px,6.2vw,112px) 0 clamp(65px,7vw,120px);}
.er-intro-top {display:flex;justify-content:space-between;gap:20px;align-items:center;color:#9ca79e;font-size:clamp(10px,.9vw,13px);font-weight:650;letter-spacing:.13em;text-transform:uppercase;}
.er-intro-top>span:first-child {color:#f5f7f3;}
.er-intro-slash {color:#C6FF34;margin:0 .55em;}
body[data-page=home] .er-intro-title {max-width:1420px;margin:clamp(42px,5.2vw,85px) 0 clamp(40px,4.5vw,74px);font-size:clamp(62px,10.2vw,168px);font-weight:750;line-height:.94;letter-spacing:-.085em;text-wrap:balance;}
.er-intro-title em {display:block;font-style:normal;color:#C6FF34;}
.er-intro-bottom {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:end;border-top:1px solid var(--er-edit-line);padding-top:clamp(24px,2.6vw,40px);}
.er-intro-bottom p {margin:0;max-width:830px;color:#b8c2ba;font-size:clamp(16px,1.42vw,23px);font-weight:450;line-height:1.58;letter-spacing:-.028em;}
.er-intro-action {justify-self:end;display:inline-flex;align-items:center;gap:32px;font-size:clamp(14px,1.1vw,18px);font-weight:650;border-bottom:1px solid #C6FF34;padding:0 0 10px;transition:color .2s,gap .2s;}
.er-intro-action:hover {color:#C6FF34;gap:44px;}
.er-intro-action svg {width:20px;height:20px;color:#C6FF34;}
/* Cinema — ten ER-only authored concept visuals. */
.er-cinema {position:relative;background:#080b09;margin:0 auto;padding:var(--er-edit-gutter) var(--er-edit-gutter) 0;max-width:1800px;}
.er-cinema-viewport {position:relative;aspect-ratio:16 / 8.35;min-height:290px;max-height:850px;overflow:hidden;background:#141914;isolation:isolate;}
.er-cinema-slide {position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:scale(1.025);transition:opacity .9s ease,transform 8.5s linear,visibility .9s;}
.er-cinema-slide.is-active {opacity:1;visibility:visible;transform:scale(1);z-index:1;}
.er-cinema-slide picture,.er-cinema-slide img {width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
.er-cinema-slide::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 30%,transparent 72%,rgba(0,0,0,.38));pointer-events:none;}
.er-cinema-corner {position:absolute;z-index:4;top:clamp(16px,2.25vw,40px);left:clamp(16px,2.5vw,44px);display:flex;gap:14px;align-items:center;color:#fff;text-shadow:0 1px 5px #0009;pointer-events:none;}
.er-cinema-corner>span:first-child {font-size:clamp(27px,4vw,57px);font-weight:800;letter-spacing:-.1em;line-height:1;}
.er-cinema-corner>span:last-child {font-size:clamp(8px,.7vw,11px);font-weight:700;line-height:1.45;letter-spacing:.21em;}
.er-cinema-overline {position:absolute;z-index:3;bottom:clamp(16px,2.5vw,44px);left:clamp(16px,2.5vw,44px);font-size:clamp(9px,.85vw,12px);color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.16em;text-shadow:0 2px 8px #000;}
.er-cinema-panel {display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:clamp(20px,3vw,58px);align-items:start;border-bottom:1px solid var(--er-edit-line);padding:clamp(22px,2.7vw,46px) 0 clamp(23px,2.6vw,43px);}
.er-cinema-index {display:flex;gap:7px;white-space:nowrap;align-items:baseline;font-size:19px;font-weight:700;letter-spacing:-.04em;}
.er-cinema-separator {color:#6e8071;}
.er-cinema-story {max-width:740px;min-height:116px;}
.er-cinema-story>span {color:#C6FF34;font-size:11px;font-weight:750;letter-spacing:.15em;text-transform:uppercase;}
.er-cinema-story h2 {font-size:clamp(24px,3.1vw,46px);line-height:1.06;letter-spacing:-.06em;font-weight:720;margin:7px 0 10px;}
.er-cinema-story p {font-size:clamp(14px,1.13vw,17px);line-height:1.5;color:#a9b7ac;margin:0;max-width:620px;letter-spacing:-.01em;}
.er-cinema-buttons {display:flex;align-items:center;gap:8px;}
.er-cinema-buttons button {height:48px;width:48px;display:grid;place-items:center;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:0;color:#f5f7f3;cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
.er-cinema-buttons button svg {width:18px;height:18px;}
.er-cinema-buttons button:hover {background:#C6FF34;border-color:#C6FF34;color:#080b09;}
.er-cinema-buttons button[aria-pressed=true] {border-color:#C6FF34;}
.er-cinema-buttons #er-cinema-toggle {font-weight:800;font-size:14px;}
.er-cinema-tabs {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;padding:18px 0 23px;}
.er-cinema-tab {display:block;border:0;background:transparent;padding:0;cursor:pointer;height:22px;}
.er-cinema-tab span {display:block;width:100%;height:3px;background:#333e36;transition:background .2s,height .2s;}
.er-cinema-tab.is-active span,.er-cinema-tab:hover span,.er-cinema-tab:focus-visible span {background:#C6FF34;height:4px;}
body[data-page=home] .home-brand-preview {padding-top:clamp(85px,11vw,170px);padding-bottom:clamp(85px,10vw,145px);}
body[data-page=home] .home-process-summary {padding-top:clamp(80px,9vw,145px);padding-bottom:clamp(80px,9vw,145px);border-top:1px solid var(--er-edit-line);}
body[data-page=home] .project-section-heading .h-xl,body[data-page=home] .home-process-summary .h-xl {font-weight:730;letter-spacing:-.065em;}
body[data-page=home] .brand-project-card {border-radius:0;overflow:hidden;}
body[data-page=home] .brand-project-bottom {border-top:1px solid rgba(255,255,255,.13);}
body[data-page=home] .section-heading {margin-bottom:clamp(34px,5vw,70px);}
@media (max-width:900px){
 .er-intro-top>span:last-child{display:none;}
 body[data-page=home] .er-intro-title {font-size:clamp(60px,10vw,106px);}
 .er-cinema-panel {grid-template-columns:60px minmax(0,1fr);}
 .er-cinema-buttons {grid-column:2;justify-self:start;}
 .er-cinema-story {min-height:0;}
}
@media(max-width:600px){
 .er-intro{padding:45px 0 55px;}
 body[data-page=home] .er-intro-title {font-size:clamp(52px,12.8vw,80px);margin:38px 0;line-height:.97;}
 .er-intro-bottom {grid-template-columns:1fr;gap:25px;}
 .er-intro-bottom p {font-size:15px;}
 .er-intro-action{justify-self:start;}
 .er-cinema{padding:17px 0 0;}
 .er-cinema-viewport{aspect-ratio:4/4.1;min-height:320px;}
 .er-cinema-slide picture,.er-cinema-slide img{object-position:center;}
 .er-cinema-panel {grid-template-columns:52px minmax(0,1fr);gap:12px;padding:24px var(--er-edit-gutter) 28px;}
 .er-cinema-index {font-size:15px;}
 .er-cinema-story h2 {font-size:27px;}
 .er-cinema-story p{font-size:14px;}
 .er-cinema-buttons{grid-column:2;gap:8px;}
 .er-cinema-buttons button{width:39px;height:39px;}
 .er-cinema-tabs {padding:16px var(--er-edit-gutter) 26px;gap:3px;}
 .er-cinema-corner{top:18px;left:20px;}
 .er-cinema-overline{left:20px;bottom:18px;max-width:80%;}
}
@media(prefers-reduced-motion:reduce){.er-cinema-slide {transition:none!important;transform:none!important;} .er-cinema-tab span {transition:none!important;}}
/* Optical balance: editorial imagery enters the first desktop viewport. */
@media(min-width:901px){
 .er-intro{padding-top:clamp(44px,4.6vw,80px);padding-bottom:clamp(45px,4.7vw,80px);}
 body[data-page=home] .er-intro-title{font-size:clamp(66px,8.9vw,146px);margin:clamp(34px,3.6vw,58px) 0 clamp(33px,3.6vw,58px);}
 .er-intro-bottom {padding-top:clamp(20px,2.1vw,32px);}
}
.er-cinema-slide img {filter:brightness(1.12) contrast(1.03);}