/* One stable photographic plane. Only opacity changes; no artificial camera motion. */
.hero{height:100svh;min-height:620px;max-height:none;margin:0;isolation:isolate}.hero-img{animation:none;transform:none;object-position:center}.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.3s;pointer-events:none}.hero-film.is-loaded{opacity:1}.hero-shade{background:linear-gradient(180deg,#0003,transparent 24%,transparent 70%,#0005)}header{position:absolute;inset:0 0 auto;height:100px;padding:28px 5% 0;background:none;color:#fff;align-items:flex-start;gap:35px}header .brand{width:160px;opacity:.65;padding-top:5px}header .brand img{filter:brightness(0) invert(1)}.desktop{padding-top:13px;gap:25px}.desktop a{font-size:10px;letter-spacing:.08em}.header-contact{border-color:#ffffff80;font-size:10px;padding:13px 17px;gap:20px}.header-contact:hover{background:#fff;color:#333}.hero-signature{display:none}.hero-copy{position:absolute;top:auto;left:6%;right:auto;bottom:150px}.hero-copy .eyebrow,.hero-kicker{display:none}.hero h1{font-size:22px;line-height:1.8;letter-spacing:.16em;margin:0 0 13px;text-shadow:none}.hero-sub{font-size:10px;line-height:2;letter-spacing:.12em;margin:0;opacity:.8}.hero-link{right:6%;bottom:102px;font-size:10px;gap:20px}.hero-link span{width:auto;height:auto;border:none;font-size:19px}.hero-index{left:6%;bottom:98px;font-size:8px;letter-spacing:.14em;opacity:.7}.hero-index i{width:40px}.film-toggle{position:absolute;right:6%;bottom:150px;z-index:3;background:none;border:0;color:#fff;font-size:9px;letter-spacing:.09em;padding:8px 0;opacity:.8}.film-toggle[hidden]{display:none}.hero-foot{padding:24px 6%;font-size:9px}.hero-foot>a{font-size:8px}.concept{padding-top:135px;padding-bottom:135px}.works{background:var(--paper)}.work-grid{gap:90px 9%}.full-photo>p{font-size:42px}.contact{background:#676d60}.contact h2{font-size:38px}
/* B: a small translucent signature suspended within the landscape. */
html[data-pattern=b] header .brand{visibility:hidden}html[data-pattern=b] .hero-signature{display:block;position:absolute;left:50%;top:48%;width:225px;transform:translate(-50%,-50%);z-index:2;opacity:.43}html[data-pattern=b] .hero-signature img{width:100%;height:auto;filter:brightness(0) invert(1)}html[data-pattern=b] .hero-copy{left:auto;right:6%;bottom:165px}html[data-pattern=b] .hero h1{font-size:19px}
/* C: paper and film, with a quiet editorial margin. */
html[data-pattern=c] .hero{background:var(--paper);color:var(--ink)}html[data-pattern=c] .hero-img,html[data-pattern=c] .hero-film{left:29%;width:71%;object-position:center}html[data-pattern=c] .hero-shade{left:29%;background:linear-gradient(180deg,#0002,transparent 25%,transparent 70%,#0004)}html[data-pattern=c] header{padding-left:4%;padding-right:4%}html[data-pattern=c] header .brand{width:150px;opacity:.8}html[data-pattern=c] header .brand img{filter:none}html[data-pattern=c] .desktop{gap:24px}html[data-pattern=c] .hero-copy{left:4%;right:auto;bottom:auto;top:39%;width:21%}html[data-pattern=c] .hero-kicker{display:block;font-family:Georgia,serif;font-size:11px;letter-spacing:.12em;color:#888e80;margin-bottom:25px}html[data-pattern=c] .hero h1{font-size:28px;line-height:1.9;max-width:170px;letter-spacing:.13em}html[data-pattern=c] .hero-sub{font-size:10px;line-height:2.3;max-width:170px;margin-top:25px;color:#666d61}html[data-pattern=c] .hero-index{color:#fff;left:33%}html[data-pattern=c] .hero-link,html[data-pattern=c] .film-toggle{color:white}
/* Intro: draw the original logo contours, then let its solid form emerge. */
#brand-intro{display:none}#brand-intro[hidden]{display:none!important}.intro-pending #brand-intro{display:grid;position:fixed;inset:0;z-index:100;place-items:center;background:#343832;animation:curtain-out 1.1s 3.4s ease forwards}.intro-art{width:min(390px,64vw);text-align:center}.intro-logo-drawing{position:relative;width:100%;aspect-ratio:4}.draw-logo{width:100%;height:100%;overflow:visible}.draw-logo path{fill:none;stroke:#f6f4e9;stroke-width:.65;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:trace-letter 1.5s var(--stroke-delay) cubic-bezier(.36,0,.3,1) forwards}.intro-logo-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:0;animation:logo-materialise 1.3s 1.9s ease forwards}.intro-caption{color:#b7bdaf;font-size:8px;letter-spacing:.3em;margin-top:25px;opacity:0;animation:logo-materialise 1s 2.15s ease forwards}.intro-words-drawing{display:none}.draw-words path{fill:none;stroke:#f6f4e9;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:trace-letter 1.5s var(--stroke-delay) ease forwards,ink-fill 1.4s 2s ease forwards}.draw-words{display:block;width:100%;height:auto}html[data-pattern=c] .intro-logo-drawing{display:none}html[data-pattern=c] .intro-words-drawing{display:block}html[data-pattern=c] .intro-art{width:min(580px,76vw)}html[data-pattern=c] .intro-caption:after{content:' / IES DESIGNWORKS'}#skip-intro{position:absolute;right:5%;bottom:34px;font-size:9px;letter-spacing:.17em;background:none;border:0;color:#c2c7bc;padding:15px}.intro-pending header,.intro-pending .hero-copy,.intro-pending .hero-link,.intro-pending .hero-signature,.intro-pending .hero-index{opacity:0}header,.hero-copy,.hero-link,.hero-signature,.hero-index{transition:opacity 1.2s ease}.intro-pending .hero-img{animation:none}@keyframes trace-letter{to{stroke-dashoffset:0}}@keyframes ink-fill{to{fill:#f6f4e9;fill-opacity:.7;stroke-opacity:.25}}@keyframes logo-materialise{to{opacity:.78}}@keyframes curtain-out{to{opacity:0;visibility:hidden;pointer-events:none}}
/* Review controls are part of this design study, not the final public website. */
.design-switch{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:7px;background:#f7f6f2ed;border:1px solid #deded5;box-shadow:0 5px 30px #0001;z-index:25;color:var(--ink);font-size:10px;white-space:nowrap}.design-switch a{display:block;padding:10px 15px}.design-switch a span{margin-left:7px;color:#7b8073}.design-switch a[aria-current=page]{background:#454c40;color:white}.design-switch a[aria-current=page] span{color:#d9ded0}.design-switch .patterns-home{font-size:9px;border-right:1px solid #ddd;padding-left:9px;padding-right:16px;margin-right:3px}.design-switch button{background:none;border:0;font-size:16px;width:28px;height:32px;opacity:.65}.design-switch[hidden]{display:none!important}
@media(max-width:1050px) and (min-width:761px){header{gap:20px}.desktop{gap:15px}.desktop a{font-size:9px}html[data-pattern=c] .hero-copy{left:3%;width:22%}html[data-pattern=c] .hero h1{font-size:24px}html[data-pattern=c] .desktop{gap:15px}}
@media(max-width:760px){header{height:80px;padding:22px 7% 0;align-items:flex-start}header .brand{width:135px;padding-top:2px;visibility:visible}.desktop,.header-contact{display:none}#menu-toggle{margin-top:-4px}#menu-toggle span{background:white}#mobile-menu{top:80px}.hero{height:100svh;min-height:620px}.hero-img,.hero-film{object-position:62% center}.hero-copy{left:8%;right:8%;bottom:185px}.hero h1{font-size:19px;margin-bottom:10px}.hero-sub{font-size:9px}.hero-link{right:8%;bottom:112px;font-size:9px}.hero-index{left:8%;bottom:118px;font-size:7px;gap:10px}.hero-index i{width:22px}.hero-index>span:last-child{display:none}.film-toggle{right:8%;bottom:154px;font-size:8px}.hero-foot{padding:24px 8% 10px}html[data-pattern=b] .hero-signature{width:180px;top:42%;opacity:.42}html[data-pattern=b] .hero-copy{left:8%;right:8%;bottom:190px}html[data-pattern=b] .hero h1{font-size:18px}html[data-pattern=c] .hero-img,html[data-pattern=c] .hero-film{left:0;top:0;width:100%;height:72%;object-position:62% center}html[data-pattern=c] .hero-shade{left:0;height:72%}html[data-pattern=c] header .brand{filter:brightness(0) invert(1);opacity:.65}html[data-pattern=c] .hero-copy{top:72%;bottom:auto;left:8%;width:84%;padding-top:20px}html[data-pattern=c] .hero-kicker{font-size:8px;margin:0 0 10px}html[data-pattern=c] .hero h1{font-size:21px;max-width:none;margin:0;line-height:1.7}html[data-pattern=c] .hero-sub{font-size:8px;max-width:none;margin:8px 0 0}html[data-pattern=c] .hero-index{left:8%;bottom:calc(28% + 24px)}html[data-pattern=c] .hero-link{bottom:calc(28% + 18px)}html[data-pattern=c] .film-toggle{bottom:calc(28% + 60px)}.design-switch{bottom:12px;padding:5px;gap:2px;font-size:9px;max-width:96vw}.design-switch a{padding:10px 11px}.design-switch a span{display:none}.design-switch .patterns-home{padding:10px 8px;margin-right:2px}.design-switch button{width:25px}.intro-caption{font-size:6px;letter-spacing:.2em}.intro-art{width:68vw}.concept{padding-top:75px;padding-bottom:75px}.contact h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){#brand-intro,.hero-film,.film-toggle{display:none!important}.intro-pending header,.intro-pending .hero-copy,.intro-pending .hero-link,.intro-pending .hero-signature,.intro-pending .hero-index{opacity:1}html[data-pattern=b] .hero-signature{opacity:.43}*{transition:none!important}}
.film-stage{position:absolute;inset:0;container-type:size;overflow:hidden;opacity:0;transition:opacity 1.5s;pointer-events:none}.film-stage.is-loaded{opacity:1}.film-stage .hero-film{position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);max-width:none;transform:translate(-50%,-50%);border:0;opacity:1;transition:none;object-fit:initial}html[data-pattern=c] .film-stage{left:29%}html[data-pattern=c] .film-stage .hero-film{left:50%;top:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw)}@media(max-width:760px){html[data-pattern=c] .film-stage{left:0;height:72%}}@media(prefers-reduced-motion:reduce){.film-stage{display:none!important}}
.hero-img{position:absolute;inset:0;width:100%;height:100%}
.c-break{display:none}html[data-pattern=c] .c-break{display:contents}html[data-pattern=c] .hero-copy{width:23%}html[data-pattern=c] .hero h1{font-size:26px;max-width:285px}html[data-pattern=c] .hero-sub{max-width:240px;font-size:9px}@media(max-width:1050px) and (min-width:761px){html[data-pattern=c] .hero h1{font-size:21px;letter-spacing:.08em}}@media(max-width:760px){html[data-pattern=c] .c-break{display:none}html[data-pattern=c] .hero-copy{width:84%}html[data-pattern=c] .hero h1{font-size:21px;max-width:none}html[data-pattern=c] .hero-sub{font-size:8px;max-width:none}}
/* The original i-dot is #f39700, sampled from the supplied company logo. */
header .brand img,.intro-logo-fill,html[data-pattern=b] .hero-signature img{filter:none}.intro-logo-fill{animation:logo-materialise 1.2s 2.05s ease forwards}.draw-logo .logo-orange-dot{stroke:#f39700;stroke-width:.55;fill:#f39700;fill-opacity:0;animation:trace-letter .65s .08s ease forwards,orange-ink .65s .25s ease forwards;filter:drop-shadow(0 0 2px #f3970028)}.draw-logo .logo-letter{animation-duration:1.45s}.intro-caption{letter-spacing:.22em}.intro-caption:before{content:'';display:block;width:26px;height:1px;background:#f39700;opacity:.55;margin:0 auto 18px}html[data-pattern=c] header .brand img{content:url(assets/logo.png);filter:none}html[data-pattern=c] .intro-logo-drawing{display:block;width:235px;max-width:50vw;margin:0 auto 22px}html[data-pattern=c] .intro-caption:after{content:''}html[data-pattern=c] .draw-words path{animation-delay:calc(var(--stroke-delay) + .5s),2.15s}@keyframes orange-ink{to{fill-opacity:1}}@media(max-width:760px){html[data-pattern=c] header .brand{filter:none}html[data-pattern=c] header .brand img{content:url(assets/logo-light.svg)}html[data-pattern=c] .intro-logo-drawing{width:185px;margin-bottom:24px}}

/* Local opening edits fill the hero at their native aspect ratio. */
.film-stage video.hero-film,html[data-pattern=c] .film-stage video.hero-film{inset:0;width:100%;height:100%;max-width:none;transform:none;object-fit:cover;object-position:center}