/* One aqua accent across text, controls, graphics and animation. */
:root{--accent:#17dbcc;--accent-text:#17dbcc;--accent-ink:#17dbcc;--accent-light:#17dbcc}
.accent{color:var(--accent-text)}
.accent-light{color:var(--accent-light)}
.status-dot{background:var(--accent-ink)}
.status-dot::after{color:var(--accent-ink)}
.intro-star,.details-icon{color:var(--accent-text)}
.service-tag,.lprose a,.lswitch [aria-current]{color:var(--accent-ink)}
.project-info h3 a:hover{color:var(--accent-text)}
.email-link:hover,.service-list details[open] .details-icon{color:var(--accent-ink)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-color:var(--accent-text)}
.dark-section :focus-visible{outline-color:var(--accent-light)}
.guides-section :focus-visible{outline-color:var(--ink)}
.icon-brand{width:56px;min-width:56px;height:56px;justify-content:flex-start}
.icon-brand img{width:48px;height:48px}
.button-dark:hover{background:var(--accent);color:var(--ink)}
a:hover>.round-arrow{background:var(--accent);color:var(--ink)}
::selection{background:var(--accent);color:var(--ink)}
.skip-link{background:var(--ink);color:var(--paper)}
.marquee{color:var(--ink)}
.guides-section{color:var(--ink)}
.guides-section .outline-text{-webkit-text-stroke-color:var(--ink)}
.guides-title .section-index,.guides-copy p,.guide-note,.register-copy>p,.register-note{color:var(--ink)}
.guide-label{border-color:#17181755}
.guides-section .button-light{background:var(--ink);color:var(--paper)}
.guides-section .button-light:hover{background:#30352a}
.guides-section .button-light .button-arrow{background:#ffffff15}
.register-fields input{border-color:#17181780;color:var(--ink);background:#ffffff35}
.register-fields input::placeholder{color:var(--ink)}
.register-fields input:focus-visible{outline-color:var(--ink)}
.project-stint .project-visual{background:#e1e2df;color:var(--ink)}
.project-stint .project-visual-name{color:#c4c6c1}
.stint-ring{border-color:#b7c5bb60}
.frame-accent{background:#e7f5bd}
.frame-accent>span{color:#17181760}

/* A separate, bounded art column prevents the app images intruding into copy. */
.hero-grid{grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);gap:clamp(38px,6vw,104px);min-height:640px;padding-block:42px 48px}
.hero-copy{min-width:0}
.hero h1{font-size:clamp(82px,10.5vw,166px);line-height:.9}
.hero-intro{margin-top:32px;max-width:455px}
.hero-intro p{max-width:370px}
.hero-actions{flex-wrap:wrap}
.hero-art{width:100%;height:auto;min-width:0;margin:0;align-self:center;border:1px solid #d4d5cc;border-radius:4px;overflow:hidden;background:#eaeae4;isolation:isolate}
.hero-art-heading{display:flex;justify-content:space-between;gap:15px;padding:19px 22px;border-bottom:1px solid #d4d5cc;font-size:.75rem;font-weight:600;letter-spacing:.06em;line-height:1.4}
.hero-art-heading>span:last-child{color:var(--muted);font-weight:500}
.hero-app-stage{position:relative;aspect-ratio:1.34;isolation:isolate;overflow:hidden;background:linear-gradient(140deg,#eeeee8,#dfdfd5)}
.hero-art .orbital-disc{width:79%;height:auto;aspect-ratio:1;top:5%;left:52%;background:var(--accent);transform:translateX(-50%);border-radius:50%;overflow:hidden}
.hero-art .orbital-disc::after{box-shadow:inset -20px -20px 55px #17181724}
.hero-art .hero-phone{position:absolute;pointer-events:none;max-width:none;filter:drop-shadow(8px 15px 10px #17181730);will-change:transform}
.hero-art .hero-phone-back{width:64%;top:28%;right:0;left:auto;z-index:1;transform:rotate(10deg);animation:studio-back 9s ease-in-out infinite}
.hero-art .hero-phone-front{width:70%;top:20%;left:1%;right:auto;z-index:2;transform:rotate(-9deg);animation:studio-front 9s ease-in-out -3s infinite}
.hero-art .hero-phone img{width:100%;-webkit-mask-image:none;mask-image:none}
.stage-coordinate{position:absolute;left:21px;top:25px;font-size:.75rem;letter-spacing:.08em;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--muted);z-index:2}
.hero-art-footer{display:flex;align-items:center;gap:15px;position:relative;z-index:3;background:var(--paper);padding:18px 22px;border-top:1px solid #d4d5cc;line-height:1.5}
.hero-art-footer>span:nth-child(2){display:flex;flex-direction:column;gap:3px}
.hero-art-footer strong{font-size:.75rem;font-weight:700;letter-spacing:.045em}
.hero-art-footer>span:nth-child(2)>span{font-size:.8125rem;color:var(--muted)}
.stage-link-arrow{font-size:1.9rem;line-height:1;margin-left:auto;transition:transform .35s var(--ease)}
.hero-art-footer:hover .stage-link-arrow{transform:translate(3px,-3px);color:var(--accent-ink)}
.project-visual,.featured-project{border-radius:10px}
.project-visual{transform:translateZ(0)}
.featured-project{overflow:hidden}
.accent .full-stop{color:inherit}
.project-kicker .status-dot{background:var(--accent)}
.project-kicker .status-dot::after{color:var(--accent)}
.featured-project{background:var(--ink)}
.featured-art{background:radial-gradient(ellipse at 45% 40%,#17dbcc22,transparent 67%)}
.featured-number{color:#17dbcc14}
.featured-orbit,.featured-orbit::after{border-color:#17dbcc38}
.project-hexit .project-visual{color:var(--ink)}
.project-hexit .project-visual-name{color:#17181732}
.hexit-grid{background-image:radial-gradient(#17dbcc88 7px,transparent 8px)}
.motryn-hero-ring{border-color:#17dbcc80}
.motryn-art-type{color:#17dbcc55}
.frame-green{background:#e7f5bd}
.frame-green>span{color:#17181760}
@keyframes studio-front{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-7px)}}
@keyframes studio-back{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(8deg) translateY(-5px)}}
@media(min-width:1600px){.hero-grid{min-height:725px}.hero-art{max-width:620px;justify-self:end}}
@media(min-width:801px){.hero{height:calc(100svh - 94px);min-height:590px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:clamp(16px,2.5vh,28px)}.hero-grid{min-height:0;padding-block:clamp(18px,3vh,36px)}.hero-art{width:min(100%,560px);max-width:560px;justify-self:end}.hero-bottom{padding-block:clamp(15px,2.2vh,22px)} }
@media(min-width:801px) and (max-height:820px){.hero{min-height:0}.hero h1{font-size:clamp(92px,10.2vw,150px)}.hero-intro{margin-top:22px}.hero-actions{margin-top:20px}.hero-art{max-width:500px}.hero-art-heading{padding-block:14px}.hero-art-footer{padding-block:13px}.hero-grid{padding-block:14px 16px}}
@media(max-width:1100px){.hero-grid{gap:5vw;min-height:580px}.hero h1{font-size:10.5vw}.hero-intro{gap:17px}.hero-art-heading{padding:16px 17px;font-size:.75rem;letter-spacing:0}.hero-app-stage{aspect-ratio:1.17}.hero-art-footer{padding:16px 17px}.stage-coordinate{left:14px;top:20px;font-size:.75rem}.hero-art .hero-phone-front{top:23%;width:73%}.hero-art .hero-phone-back{top:30%;width:68%}}
@media(max-width:800px){.hero-grid{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:38px;padding-block:37px 32px}.hero h1{font-size:clamp(100px,19.5vw,146px)}.hero-intro{max-width:490px}.hero-intro p{max-width:430px}.hero-actions{gap:30px}.hero-art{max-width:580px;align-self:center;margin:0}.hero-app-stage{aspect-ratio:1.34}.hero-art .hero-phone-front{top:20%;width:70%}.hero-art .hero-phone-back{top:28%;width:64%}.hero-art-heading{padding:17px 20px;letter-spacing:.035em}.hero-art-footer{padding:18px 20px}.hero-edition{display:none}}
@media(max-width:600px){.icon-brand{min-width:44px;width:44px;height:44px}.icon-brand img{width:41px;height:41px}.hero-grid{gap:33px;padding-block:35px 25px}.hero h1{font-size:20.8vw}.hero-intro{margin-top:25px;gap:18px}.hero-intro p{font-size:1rem}.hero-actions{gap:24px}.hero-art{max-width:440px}.hero-app-stage{aspect-ratio:1.16}.hero-art .hero-phone-front{width:75%;left:-1%;top:24%}.hero-art .hero-phone-back{width:71%;right:-1%;top:32%}.hero-art-heading{font-size:.75rem;letter-spacing:0;padding:15px 17px}.stage-coordinate{font-size:.75rem;top:22px;left:14px}.hero-art-footer{padding:17px}.hero-art-footer>span:nth-child(2)>span{font-size:.8125rem}.hero-bottom{gap:22px}.hero-intro .intro-star{font-size:40px}.site-footer .icon-brand img{width:44px;height:44px}}
@media(max-width:360px){.hero-actions{gap:18px}.hero h1{font-size:20.8vw}.hero-art-heading{padding:14px}.hero-art-footer{padding:15px;gap:12px}.hero-art-footer strong{font-size:.75rem}.hero-art-footer>span:nth-child(2)>span{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.hero-art .hero-phone{animation:none!important}}
@media print{.hero-art{display:none}.hero-grid{display:block;min-height:0}.marquee,.guides-section{background:white;color:black}}

/* MOTRYN hero: three complete screens, layered like a product editorial. */
.motryn-hero-art{background:#e8e9e4}
.motryn-hero-art>.motryn-hero-screen{position:absolute;width:258px;max-width:none;top:76px;left:50%;border-radius:25px;filter:drop-shadow(10px 20px 15px #17181735);transform-origin:center bottom;transition:transform .8s var(--ease)}
.motryn-hero-art>.screen-left{transform:translateX(-108%) rotate(-12deg);z-index:1}
.motryn-hero-art>.screen-centre{transform:translateX(-50%) translateY(-34px);z-index:3}
.motryn-hero-art>.screen-right{transform:translateX(8%) rotate(12deg);z-index:2}
.motryn-hero-art:hover>.screen-left{transform:translateX(-115%) rotate(-15deg) translateY(-5px)}
.motryn-hero-art:hover>.screen-centre{transform:translateX(-50%) translateY(-44px)}
.motryn-hero-art:hover>.screen-right{transform:translateX(15%) rotate(15deg) translateY(-5px)}
.motryn-hero-art .motryn-art-note{z-index:5;background:var(--paper);padding:9px 12px;color:var(--ink)}
@media(max-width:1100px){.motryn-hero-art>.motryn-hero-screen{width:220px;top:92px}}
@media(max-width:800px){.motryn-hero-art>.motryn-hero-screen{width:205px;top:102px}}
@media(max-width:600px){.motryn-hero-art>.motryn-hero-screen{width:190px;top:85px}.motryn-hero-art>.screen-centre{transform:translateX(-50%) translateY(-27px)}.motryn-hero-art:hover>.screen-centre{transform:translateX(-50%) translateY(-27px)}}
@media(prefers-reduced-motion:reduce){.motryn-hero-art>.motryn-hero-screen{transition:none}}
@media(min-width:801px) and (max-height:820px){.hero .hero-grid{min-height:0}}
