/* A quieter control system and a phone composition designed in normal flow. */
.motion-panel summary{color:#b8bcae;font-size:11px;gap:10px}
.motion-panel summary .ui-icon{width:16px;height:16px}
.motion-panel-inner{min-width:240px;border-color:#555b4c;border-radius:3px;padding:16px 18px}
.motion-panel-inner button{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;width:100%;font-size:13px}
.motion-panel-inner .hero-play{position:static;border:0;padding:0;background:transparent}
.motion-panel-inner .hero-play [data-control-label]{font-size:13px}
html:not(.js) .film-settings{display:none}
.motion-panel-inner #motion-status{line-height:1.6;margin-top:5px;max-width:210px;font-size:11px}
.no-webgl .motion-panel-inner #hero-play,.still-artwork .motion-panel-inner #hero-play{display:flex}
.film-settings{position:relative;flex-shrink:0}
.film-settings>summary{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;cursor:pointer;list-style:none;font-size:11px;color:#c6c8bb;white-space:nowrap}
.film-settings>summary::-webkit-details-marker{display:none}
.film-settings>summary .ui-icon{width:17px;height:17px}
.film-settings-content{position:absolute;right:0;bottom:48px;min-width:185px;padding:12px;background:#191d17;border:1px solid #555d4b;box-shadow:0 12px 35px #0004;z-index:5}
.company-film-caption .film-settings-content button{width:100%;min-width:0;justify-content:space-between;font-size:12px;padding:8px 10px;border:0;background:transparent;min-height:44px}
.company-film-caption{padding:7px 20px;min-height:58px;font-size:12px;gap:15px}
.company-film-frame{border-color:#ffffff24}
.company-film-stage{overflow:hidden}
.company-film-story summary{display:flex;align-items:center;justify-content:space-between;list-style:none}
.company-film-story summary::-webkit-details-marker{display:none}
.company-film-story summary::after{content:' ';width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 5px 4px 15px}
.company-film-story[open] summary::after{transform:rotate(225deg);margin-bottom:-4px}
.header .brand-symbol{mix-blend-mode:screen}
.close-dialog,.privacy-choices-close{display:grid;place-items:center;min-width:44px;min-height:44px}
.contact-arrow .ui-icon{width:32px;height:32px}
.principles summary i{display:grid;place-items:center;flex:0 0 24px}
.faq-row summary>span{display:grid;place-items:center;flex:0 0 24px}
.faq-row details[open] summary>span{transform:rotate(45deg)}

@media(max-width:700px){
 :root{--pad:clamp(20px,6vw,36px)}
 html{scroll-padding-top:20px}
 body{font-size:15px}
 .header{height:88px;padding:21px var(--pad);align-items:center}
 .brand{font-size:11px;gap:11px;letter-spacing:.1em}
 .brand-symbol{width:32px;height:34px}
 .brand-symbol img{width:55px;height:55px;left:-11.3px;top:-10px}
 .brand-group{font-size:8px;letter-spacing:.4em}
 .menu-button{width:44px;height:44px;border:1px solid #ffffff35;padding:11px;border-radius:50%;align-items:center}
 .header nav{top:87px;gap:4px;padding:19px var(--pad) 25px}
 .header nav a{font-size:20px;padding:12px 0;min-height:48px}
 .header nav .nav-contact{display:flex;align-items:center;justify-content:space-between}
 .header nav .nav-contact span{float:none;margin:0}
 .hero{display:flex;flex-direction:column;min-height:0;height:auto;max-height:none;padding-top:123px;overflow:hidden}
 .hero-content{order:1;width:100%;padding:0 var(--pad);pointer-events:auto}
 .hero .eyebrow{font-size:9px;letter-spacing:.06em;gap:8px;line-height:1.6}
 .hero h1{font-size:clamp(36px,11.4vw,68px);line-height:1.09;letter-spacing:-.065em;margin:23px 0 21px}
 .hero h1 em{font-size:1.14em;letter-spacing:-.045em}
 .hero-description{font-size:14px;line-height:1.8;max-width:330px;color:#c4c6bb}
 .hero .primary-link{font-size:12px;gap:42px;margin-top:16px;padding:12px 0;min-height:44px;border-color:#727969}
 .hero .primary-link .ui-icon{width:20px;height:20px}
 .hero-art{position:relative;order:2;inset:auto;z-index:0;width:100%;height:clamp(280px,78vw,390px);margin:5px 0 -5px;pointer-events:none}
 #brand-sculpture{min-height:0;height:100%;width:100%}
 .hero-art-vignette{background:linear-gradient(180deg,#101211,transparent 13%,transparent 90%,#101211)}
 .hero-baseline{position:relative;order:3;left:auto;right:auto;bottom:auto;margin:0 var(--pad);padding:10px 0 15px;gap:10px;border-color:#ffffff25}
 .scroll-cue{font-size:10px;gap:9px;min-height:44px}
 .scroll-cue .ui-icon{width:16px;height:16px}
 .motion-panel summary{font-size:10px;gap:7px;min-height:44px;padding:10px 0 10px 6px}
 .motion-panel-inner{right:0;bottom:52px}
 .section-pad{padding:64px var(--pad)}
 .section-top{margin-bottom:32px;gap:15px;align-items:center}
 .eyebrow{font-size:9px;letter-spacing:.1em;line-height:1.7}
 .section-index{font-size:9px;white-space:nowrap}
 .group-layout{gap:28px}
 .group h2{font-size:clamp(36px,10.6vw,64px);line-height:1.08}
 .group-copy .lead{font-size:19px;line-height:1.6;margin-bottom:23px}
 .group-copy>p:not(.lead),.worlds-heading>p,.worlds-pair p,.world-description p:not(:first-child),.approach-intro p,.principles p,.research-strip p,.contact-bottom>p,.faq-row details p{font-size:14px;line-height:1.85}
 .group-end{font-size:21px;gap:10px 14px;margin-top:35px;padding-top:24px}
 .group-end .small-line{width:24px}
 .worlds-heading{margin-bottom:28px}
 .worlds h2{font-size:clamp(43px,12vw,68px);line-height:1.03}
 .worlds-heading>p{margin-top:22px}
 .world-feature .world-image{aspect-ratio:auto;overflow:hidden;background:transparent}
 .world-feature .world-image>img{height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center}
 .world-feature .world-image::after{bottom:auto;aspect-ratio:4/3;background:linear-gradient(180deg,#05080677,transparent 45%)}
 .world-feature .world-image-title{position:relative;inset:auto;display:flex;align-items:center;gap:20px;padding-top:25px}
 .world-image-title h3{font-size:clamp(38px,11vw,58px);line-height:1.04}
 .world-image figcaption,.worlds-pair .world-image figcaption{top:17px;left:16px;right:16px;font-size:9px;gap:10px;align-items:center;line-height:1.4;letter-spacing:.04em}
 .world-image figcaption>span:last-child,.worlds-pair .world-image figcaption>span:last-child{font-size:8px;letter-spacing:.025em;padding:5px 7px;line-height:1.4;margin-top:0;white-space:nowrap}
 .worlds-pair{gap:40px;margin-top:40px}
 .world-commerce .world-image,.world-technology .world-image{aspect-ratio:4/3}
 .worlds-pair .world-image img{object-position:center}
 .worlds-pair .world-image::after{background:linear-gradient(180deg,#05080677,transparent 45%,#05080620)}
 .round-button,.worlds-pair .round-button{width:46px;height:46px;background:#10121160;backdrop-filter:blur(8px);border-color:#f2f0e980}
 .round-button .ui-icon,.worlds-pair .round-button .ui-icon{width:21px;height:21px}
 .worlds-pair .round-button{right:16px;bottom:16px}
 .worlds-pair h3{font-size:clamp(35px,10.2vw,58px);margin-top:22px;line-height:1.08}
 .world-description{padding-top:20px;gap:14px}
 .world-description p:first-child{font-size:18px;line-height:1.65}
 .worlds-pair p{margin-top:16px}
 .concept-note{font-size:11px;line-height:1.75;margin-top:30px}
 .company-film-heading{gap:22px;margin-bottom:28px}
 .company-film-heading h2{font-size:clamp(43px,12vw,68px);line-height:1.03}
 .company-film-heading>p{font-size:14px;line-height:1.85;color:#c4c6ba}
 .company-film-frame{margin-inline:calc(-1 * var(--pad));border-left:0;border-right:0}
 .scene-captions{height:98px;background:#151912;border:0}
 .scene-caption{top:17px;left:var(--pad);right:var(--pad);bottom:auto}
 .scene-caption span{font-size:9px;letter-spacing:.06em;margin-bottom:7px;line-height:1.5}
 .scene-caption strong{font-size:clamp(22px,6.4vw,34px);line-height:1.1;max-width:560px}
 .company-film-caption{flex-direction:row;align-items:center;padding:6px var(--pad);gap:10px;min-height:56px;font-size:10px;line-height:1.5}
 .company-film-caption>span{max-width:190px}
 .film-settings>summary{font-size:10px;gap:6px}
 .company-film-concepts{font-size:11px;line-height:1.75;margin-top:18px}
 .company-film-story{margin-top:22px}
 .company-film-story summary{font-size:13px}
 .company-film-story li,.company-film-story-intro>p{font-size:14px;line-height:1.85}
 .company-film-story ol{padding-left:19px}
 .approach-layout{gap:32px}
 .approach h2{font-size:clamp(43px,12vw,68px);line-height:1.05}
 .principles details{padding:18px 0}
 .principles summary{font-size:17px;line-height:1.45;gap:12px;letter-spacing:-.025em}
 .principles p{margin-left:22px;margin-top:16px}
 .underlined{margin-left:22px;gap:18px;font-size:11px}
 .research-strip{margin-top:36px;padding-top:26px}
 .research-button{font-size:12px;gap:22px}
 .contact h2{font-size:clamp(40px,11.2vw,65px);line-height:1.06}
 .contact-arrow{width:56px;height:56px;margin-top:24px}
 .contact-arrow .ui-icon{width:25px;height:25px}
 .enquiry-form{padding:28px 21px 25px}
 .enquiry-form h3{font-size:31px}
 .enquiry-intro .enquiry-lead{font-size:23px;line-height:1.5}
 .footer{padding:32px var(--pad) 24px}
 .footer-top{display:block}
 .footer-top>div{display:flex;justify-content:flex-start;flex-wrap:wrap;max-width:none;gap:8px 22px;margin-top:22px;font-size:11px;align-items:center}
 .footer-top>div>a{width:auto;text-align:left;margin-left:auto}
 .footer-word{font-size:10.3vw;letter-spacing:-.07em;margin-top:24px;line-height:1.25}
 .footer-bottom{font-size:9px;line-height:1.7;margin-top:18px;padding-top:18px}
 .detail-dialog h2{font-size:clamp(31px,9vw,43px);line-height:1.12}
 .detail-dialog p{font-size:14px;line-height:1.85}
}
@media(max-width:360px){
 .hero{padding-top:111px}
 .hero .eyebrow{font-size:9px;letter-spacing:.03em}
 .hero-art{height:275px;margin-top:10px}
 .hero-baseline{gap:5px}
 .scroll-cue,.motion-panel summary{font-size:9px}
 .motion-panel summary{gap:5px}
 .scene-captions{height:100px}
 .company-film-caption>span{max-width:150px}
 .principles summary{font-size:16px}
}