/* 05: 03's geometric composition and serif type, with 02's flowing tones. */
.variant-5{--paper:#f4f5ee;--line:#16223428;background:var(--paper);color:#162234}
.variant-5 .site-header,.variant-5 .mobile-menu{background:#f4f5eef5}
.variant-5 .form-hero.hero{background:#edf1ec}
.variant-5 .form-hero-layout{z-index:2}
.variant-5 .form-hero-bottom{z-index:3}
.fusion-atmosphere .gradient-fold{top:28%;opacity:.56;filter:blur(36px)}
.fusion-atmosphere .gradient-light{opacity:.8}
.variant-5 .form-hero h1 em{color:#344e67;background:linear-gradient(110deg,#162234 0%,#3c5874 40%,#628493 68%,#1d3047 100%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:fusion-ink 12s ease-in-out infinite alternate}
.variant-5 .geometry-hero{filter:drop-shadow(0 12px 18px #29465e08)}
.variant-5 .flow-stop{animation:fusion-reflection 11s ease-in-out infinite alternate}
.variant-5 .geometry-practice .flow-stop{animation-delay:-4s}
.variant-5 .form-intro{background:linear-gradient(115deg,#edf0e7 0%,#cededf 38%,#acc6cf 70%,#e3ebe5 100%);background-size:200% 160%;animation:fusion-surface 18s ease-in-out infinite alternate}
.variant-5 .form-intro .prose,.variant-5 .form-intro .prose>p:first-child{font-size:13px;line-height:2.2}
.variant-5 .form-works{background:#fafbf6}
.variant-5 .form-section-head h2 em,.variant-5 .form-profile h2 em{color:#5d788b}
.variant-5 .form-practice{background:#e3eaeb}
.variant-5 .form-profile,.variant-5 .site-footer{background:#f4f5ee}
.variant-5 .form-contact{background:linear-gradient(120deg,#162234 25%,#243a50 70%,#3f5a6e 100%);background-size:180% 140%;animation:fusion-surface 18s ease-in-out infinite alternate}
.variant-5 .form-service>div>p+p{margin-top:12px}
@keyframes fusion-ink{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes fusion-surface{from{background-position:0% 0%}to{background-position:100% 100%}}
@keyframes fusion-reflection{from{stop-color:#6f95a8}to{stop-color:#c0d4d5}}
@media(max-width:768px){
 .variant-5 .form-hero.hero{min-height:680px}
 .variant-5 .form-hero-layout{inset:135px 23px 65px}
 .variant-5 .geometry-hero{width:clamp(200px,29svh,255px);bottom:0}
 .fusion-atmosphere .gradient-fold{top:33%;filter:blur(25px);opacity:.55}
 .variant-5 .form-intro .prose,.variant-5 .form-intro .prose>p:first-child{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.variant-5 .flow-stop,.variant-5 .form-intro,.variant-5 .form-contact,.variant-5 .form-hero h1 em{animation:none!important}}

/* 14: separate blue-grey and light layers make the quiet movement perceptible. */
.variant-14 :is(.form-intro,.form-practice){position:relative;isolation:isolate;overflow:clip}
.variant-14 .form-intro{background:#d4e2e3;animation:none}
.variant-14 :is(.form-intro,.form-practice):before,
.variant-14 :is(.form-intro,.form-practice):after{
 content:"";position:absolute;z-index:-1;pointer-events:none;will-change:transform;
}
.variant-14 :is(.form-intro,.form-practice):before{
 inset:-26%;
 background:
  radial-gradient(ellipse at 20% 28%,rgba(248,249,239,.95),rgba(248,249,239,0) 52%),
  radial-gradient(ellipse at 78% 70%,rgba(130,170,190,.62),rgba(130,170,190,0) 48%),
  linear-gradient(115deg,#e9f0e9,#c4dbe0 50%,#e6eeea);
 animation:section-wash-drift 10.5s cubic-bezier(.45,0,.55,1) -2s infinite alternate;
}
.variant-14 .form-intro:before{
 background:
  radial-gradient(ellipse at 20% 28%,rgba(242,247,235,.95),rgba(242,247,235,0) 52%),
  radial-gradient(ellipse at 78% 70%,rgba(119,164,185,.58),rgba(119,164,185,0) 48%),
  linear-gradient(115deg,#dce9e4,#b2cfd7 50%,#d9e7e4);
 animation-delay:-5.5s;
}
.variant-14 :is(.form-intro,.form-practice):after{
 inset:-30%;
 background:radial-gradient(ellipse at 48% 46%,rgba(250,250,238,.85) 0%,rgba(247,249,237,.38) 25%,rgba(247,249,237,0) 53%);
 animation:section-light-drift 13.7s ease-in-out -7.7s infinite alternate;
}
.variant-14 .form-intro:after{animation-delay:-2.1s}
@keyframes section-wash-drift{
 from{transform:translate3d(-12%,-4%,0)}
 to{transform:translate3d(12%,4%,0)}
}
@keyframes section-light-drift{
 from{transform:translate3d(14%,5%,0);opacity:.4}
 to{transform:translate3d(-14%,-5%,0);opacity:.85}
}
@media(prefers-reduced-motion:reduce){
 .variant-14 :is(.form-intro,.form-practice):before,
 .variant-14 :is(.form-intro,.form-practice):after{animation:none!important;will-change:auto}
}

/* Keep the selected Works sections on each direction's base paper colour. */
:is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-works{background:var(--paper)}