/* Approved Rellan slide wave: real HTML copy remains the accessible fallback. */
#rellan-hero-scene{background:#fff}
/* Match the page containers so the scene and its lettering stop growing together. */
#rellan-glass-hero{position:relative;isolation:isolate;width:88%;max-width:1240px;margin-inline:auto;container-type:inline-size;aspect-ratio:16/9;overflow:hidden;background:#fff}
#rellan-glass-stage{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;transition:opacity .35s ease}
#rellan-glass-stage canvas{display:block;width:100%;height:100%;pointer-events:none}
#rellan-glass-hero[data-ready="true"] #rellan-glass-stage{opacity:1}
#rellan-glass-hero .rg-copy{position:absolute;z-index:1;left:17.5%;top:24%;width:66%;color:#4f2a57;font-family:Arial,Helvetica,sans-serif}
#rellan-glass-hero h1{margin:0;font-family:inherit;font-weight:700;font-size:clamp(2rem,6.15cqw,6.9rem);line-height:1.09;letter-spacing:-.035em;text-wrap:initial;overflow-wrap:normal;color:#4f2a57}
#rellan-glass-hero h1 span{display:block}
#rellan-glass-hero p{max-width:95%;margin:clamp(18px,4.2cqw,66px) 0 0;font-family:inherit;font-size:clamp(1rem,2.8cqw,3.15rem);line-height:1.3;letter-spacing:-.025em;color:#4f2a57;text-wrap:pretty}
#rellan-glass-hero[data-ready="true"] .rg-copy{width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
@media(min-width:768px) and (max-width:991px){#rellan-glass-hero{width:90%}}
@media(max-width:680px){
 #rellan-glass-hero{width:100%;aspect-ratio:auto;height:clamp(520px,148.72vw,760px);min-height:520px;padding:0}
 #rellan-glass-hero:not([data-ready="true"]) .rg-copy{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0;padding:70px 24px;overflow:visible;clip:auto;clip-path:none;white-space:normal}
 #rellan-glass-hero h1{font-size:clamp(2.25rem,10.5vw,3.5rem);line-height:1.09;letter-spacing:-.035em;text-wrap:balance}
 #rellan-glass-hero h1 span{display:inline}
 #rellan-glass-hero p{max-width:32rem;margin-top:28px;font-size:1.125rem;line-height:1.55;letter-spacing:-.015em}
}
@media(prefers-reduced-motion:reduce){#rellan-glass-stage{transition:none}}
/* The flowing ribbon shares the page background and crosses both side edges. */
#rellan-design{position:relative}
#rellan-slide-header{position:absolute;inset:0 0 auto;z-index:10;background:transparent}
#rellan-slide-header .rs-header{background:transparent;border-bottom:0}
#rellan-slide-header:has(.rs-menu-toggle[aria-expanded="true"]) .rs-header{background:#fff;box-shadow:0 8px 20px #4f2a5710}
#rellan-slide-header .rs-nav-contact{background:rgba(255,255,255,.85)}
#rellan-glass-hero{width:100%;max-width:none;height:clamp(720px,62.25vw,1000px);aspect-ratio:auto;margin:0}
#ribbon-motion{position:absolute;right:6%;bottom:24px;z-index:2;border:1px solid #e5ddea;background:#ffffffd9;border-radius:24px;padding:8px 13px;font:12px Arial,Helvetica,sans-serif;color:#6c5775;cursor:pointer}
#ribbon-motion:focus-visible{outline:2px solid #9a71c4;outline-offset:3px}
@media(max-width:991px){
 #rellan-glass-hero{height:clamp(560px,calc(100vw + 240px),720px);min-height:0}
 /* The same readable layout is available before WebGL loads or if it fails. */
 #rellan-glass-hero:not([data-ready="true"]){height:auto;min-height:clamp(560px,calc(100vw + 240px),720px)}
 #rellan-glass-hero:not([data-ready="true"]) .rg-copy{box-sizing:border-box;position:relative;left:auto;top:auto;width:100%;max-width:480px;height:auto;margin:0 auto;padding:132px 20px 100px;overflow:visible;clip:auto;clip-path:none;white-space:normal}
 #rellan-glass-hero h1{font-size:clamp(2rem,8.8vw,3rem);line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
 #rellan-glass-hero h1 span{display:inline}
 #rellan-glass-hero p{max-width:none;margin-top:28px;font-size:clamp(1.125rem,4.8vw,1.5rem);line-height:1.45;letter-spacing:-.015em}
}
@media(max-width:680px){
 /* Show the full rendered sculpture; the stage already has this height. */
 #rellan-glass-hero{height:clamp(560px,calc(100vw + 240px),720px)}
 #rellan-glass-stage{bottom:auto;height:clamp(560px,calc(100vw + 240px),720px);mask-image:none}
 #rellan-glass-hero:not([data-ready="true"]){min-height:0}
 #rellan-glass-hero:not([data-ready="true"]) .rg-copy{padding-bottom:36px}
 #rellan-design #services.rl-services{padding-top:24px}
}

@media print{#ribbon-motion{display:none!important}#rellan-slide-header{position:static!important}#rellan-glass-stage{display:none!important}#rellan-glass-hero{aspect-ratio:auto;height:auto;padding:32px;min-height:0}#rellan-glass-hero .rg-copy,#rellan-glass-hero[data-ready="true"] .rg-copy{position:static;width:auto;height:auto;margin:0;clip:auto;clip-path:none;white-space:normal}#rellan-glass-hero h1{font-size:32pt}#rellan-glass-hero p{font-size:14pt;margin-top:20px}}

/* Mid-size screens get shorter lines of copy without the phone column. */
@media(min-width:600px) and (max-width:991px){
 #rellan-glass-hero:not([data-ready="true"]) .rg-copy{max-width:640px;padding:158px 36px 80px}
 #rellan-glass-hero h1{font-size:clamp(2.5rem,5.6vw,3rem);line-height:1.1;text-wrap:initial}
 #rellan-glass-hero h1 span{display:block}
 #rellan-glass-hero p{font-size:1.375rem;line-height:1.35}
}