/* ShapedSI motion layer: reveals, header, menu, ribbons and page transitions.
   Pages opt in with <body class="si-elevated"> (fixed header) or "si-warm" (in-flow header) and an inline `si-motion` flag on <html>. */
/* Brand materials for pages that load the motion layer without shapedsi.css; any page that defines them wins. */
:where(:root){--si-espresso:#51331D;--si-linen:#F3EADC;--si-clay:#A36538;--si-cocoa:#633C1F}
:root{--si-ease:cubic-bezier(.16,1,.3,1);--si-ease-soft:cubic-bezier(.33,1,.68,1);--si-ease-io:cubic-bezier(.65,0,.35,1)}

/* Cross-page transitions where the browser supports them. */
@view-transition{navigation:auto}
/* Let the old page clear before the new text appears, keeping headings legible. */
::view-transition-old(root){animation:si-page-out .14s ease-out both}
::view-transition-new(root){animation:si-page-in .28s ease-out .14s both}
@keyframes si-page-out{to{opacity:0}}
@keyframes si-page-in{from{opacity:0}to{opacity:1}}
:is(.si-elevated,.si-warm) .si-header{view-transition-name:si-header}
::view-transition-group(si-header){animation-duration:.3s;animation-timing-function:var(--si-ease)}
::view-transition-old(si-header),::view-transition-new(si-header){animation:none}

/* Header: fixed, condenses after the first scroll and tucks away while reading. */
.si-elevated .si-header{position:fixed;transition:padding .6s var(--si-ease),background-color .6s,box-shadow .6s,translate .7s var(--si-ease)}
.si-elevated .si-header.is-condensed{padding-block:14px;background:rgba(251,247,241,.88);box-shadow:0 12px 32px -22px rgba(43,28,19,.35)}
.si-elevated .si-header.is-tucked:not(:focus-within):not(:has(.si-mobile-menu:not([hidden]))){translate:0 -105%}
.si-elevated .si-brand img{transition:width .6s var(--si-ease),height .6s var(--si-ease)}
.si-elevated .si-header.is-condensed .si-brand img{width:38px;height:38px}
.si-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--si-clay);transform-origin:0 50%;transform:scaleX(var(--si-progress,0));pointer-events:none}
:is(.si-elevated,.si-warm) .si-nav>a:not(.si-button){background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .55s var(--si-ease)}
:is(.si-elevated,.si-warm) .si-nav>a:not(.si-button):is(:hover,:focus-visible,[aria-current=page]){text-decoration:none;background-size:100% 1px}

:is(.si-elevated,.si-warm) .si-nav>a.si-nav-lang{display:inline-grid;place-items:center;min-width:34px;height:30px;padding:0 9px;border:1px solid var(--si-line);border-radius:30px;background:none!important;font-size:9px!important;letter-spacing:.16em!important;color:var(--si-muted)!important;transition:border-color .3s,color .3s}
:is(.si-elevated,.si-warm) .si-nav>a.si-nav-lang:hover{border-color:rgba(81,51,29,.45);color:var(--si-ink)!important}
@media(max-width:1240px){html body:is(.si-elevated,.si-warm) .si-nav{display:none!important}html body:is(.si-elevated,.si-warm) .si-menu-button{display:block!important}}

/* Buttons and links: arrows travel, surfaces warm. */
:is(.si-elevated,.si-warm) .si-button{position:relative;overflow:hidden;isolation:isolate;transition:background-color .45s var(--si-ease),color .45s,translate .45s var(--si-ease),transform .4s var(--si-ease),box-shadow .45s}
:is(.si-elevated,.si-warm) .si-button:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--si-clay);border-radius:inherit;transform:translateY(101%);transition:transform .6s var(--si-ease)}
:is(.si-elevated,.si-warm) .si-button:hover{transform:none;translate:0 -2px;box-shadow:0 14px 28px -16px rgba(81,51,29,.55)}
:is(.si-elevated,.si-warm) .si-button:hover:before{transform:none}
:is(.si-elevated,.si-warm) .si-outline:before{background:var(--si-espresso)}
:is(.si-elevated,.si-warm) .si-outline:hover{color:var(--si-paper)!important}
:is(.si-elevated,.si-warm) :is(.si-button,.si-text-link,.si-card-link,.si-index a,.si-more-grid h3) span[aria-hidden]{display:inline-block;transition:translate .5s var(--si-ease)}
:is(.si-elevated,.si-warm) :is(.si-button,.si-text-link):hover span[aria-hidden],:is(.si-elevated,.si-warm) :is(.si-door,.si-more-grid a,.si-index a,.si-product-card):hover span[aria-hidden]{translate:3px -3px}
:is(.si-elevated,.si-warm) .si-text-link[href^="#"]:hover span[aria-hidden]{translate:0 3px}
:is(.si-elevated,.si-warm) .si-text-link{background:linear-gradient(var(--si-cocoa),var(--si-cocoa)) 0 100%/0 1px no-repeat;transition:background-size .6s var(--si-ease),border-color .3s}
:is(.si-elevated,.si-warm) .si-text-link:hover{background-size:100% 1px}

/* Mobile menu: a calm full-height sheet with staggered serif links. */
:is(.si-elevated,.si-warm) .si-menu-button{position:relative;transition:background-color .3s}
:is(.si-elevated,.si-warm) .si-menu-button span{transition:translate .5s var(--si-ease),rotate .5s var(--si-ease)}
:is(.si-elevated,.si-warm) .si-menu-button[aria-expanded=true] span:first-child{translate:0 3px;rotate:45deg}
:is(.si-elevated,.si-warm) .si-menu-button[aria-expanded=true] span:last-child{translate:0 -3px;rotate:-45deg}
:is(.si-elevated,.si-warm) .si-mobile-menu{left:0;right:0;top:100%;height:100dvh;margin:0;border:0;border-top:1px solid var(--si-line);border-radius:0;box-shadow:none;padding:clamp(28px,6vh,64px) var(--si-gutter) 140px;overflow-y:auto;display:flex;flex-direction:column;background:var(--si-paper);clip-path:inset(0);transition:clip-path .75s var(--si-ease)}
:is(.si-elevated,.si-warm) .si-mobile-menu[hidden]{display:none}
@starting-style{:is(.si-elevated,.si-warm) .si-mobile-menu:not([hidden]){clip-path:inset(0 0 100% 0)}}
:is(.si-elevated,.si-warm) .si-mobile-menu a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px solid var(--si-line);font:400 clamp(30px,7.4vw,46px)/1.15 var(--si-serif);letter-spacing:-.02em}
:is(.si-elevated,.si-warm) .si-mobile-menu a:after{content:"↗";font:400 18px var(--si-sans);color:var(--si-clay)}
:is(.si-elevated,.si-warm) .si-mobile-menu a[lang]{font:500 11px/1.6 var(--si-sans);letter-spacing:.18em;text-transform:uppercase;border:0;margin-top:22px}
:is(.si-elevated,.si-warm) .si-mobile-menu a[lang]:after{content:none}
:is(.si-elevated,.si-warm) .si-mobile-menu .si-menu-foot{margin-top:auto;padding-top:28px;font-size:12px;color:var(--si-muted)}
:is(.si-elevated,.si-warm) .si-mobile-menu .si-menu-foot a{display:inline;border:0;padding:0;font:400 26px var(--si-serif);color:var(--si-ink)}
:is(.si-elevated,.si-warm) .si-mobile-menu .si-menu-foot a:after{content:none}
:is(.si-elevated,.si-warm):has(.si-mobile-menu:not([hidden])){overflow:hidden}
.si-motion :is(.si-elevated,.si-warm) .si-mobile-menu:not([hidden])>*{animation:si-rise .9s var(--si-ease) both;animation-delay:calc(var(--si-i,0)*55ms + 120ms)}
:is(.si-elevated,.si-warm) .si-mobile-menu>:nth-child(2){--si-i:1}:is(.si-elevated,.si-warm) .si-mobile-menu>:nth-child(3){--si-i:2}:is(.si-elevated,.si-warm) .si-mobile-menu>:nth-child(4){--si-i:3}:is(.si-elevated,.si-warm) .si-mobile-menu>:nth-child(5){--si-i:4}:is(.si-elevated,.si-warm) .si-mobile-menu>:nth-child(6){--si-i:5}:is(.si-elevated,.si-warm) .si-mobile-menu>:nth-child(7){--si-i:6}:is(.si-elevated,.si-warm) .si-mobile-menu>:nth-child(8){--si-i:7}:is(.si-elevated,.si-warm) .si-mobile-menu>:nth-child(9){--si-i:8}

/* Scroll reveals. Hidden states only apply once the motion flag is set. */
@keyframes si-rise{from{opacity:0;translate:0 28px}}
@keyframes si-fade{from{opacity:0}}
@keyframes si-settle{from{scale:1.07}}
.si-motion [data-reveal]{opacity:0;translate:0 30px;transition:opacity 1.1s var(--si-ease),translate 1.3s var(--si-ease);transition-delay:calc(var(--si-i,0)*95ms + var(--si-delay,0ms))}
.si-motion [data-reveal].is-in{opacity:1;translate:none}
.si-motion [data-reveal=fade]{translate:none}
.si-motion [data-reveal=line]{opacity:1;translate:none;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--si-ease-io);transition-delay:calc(var(--si-i,0)*95ms + var(--si-delay,0ms))}
.si-motion [data-reveal=line].is-in{transform:none}
.si-motion [data-reveal=arch]{opacity:1;translate:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--si-ease-io);transition-delay:calc(var(--si-i,0)*110ms + var(--si-delay,0ms))}
.si-motion [data-reveal=arch] img{scale:1.16;transition:scale 2.2s var(--si-ease),transform .9s var(--si-ease);transition-delay:calc(var(--si-i,0)*110ms + var(--si-delay,0ms)),0s}
.si-motion [data-reveal=arch].is-in{clip-path:inset(0)}
.si-motion [data-reveal=arch].is-in img{scale:1}

/* Headings rise line by line from a soft mask. */
.si-line{display:block;padding-bottom:.14em;margin-bottom:-.14em;clip-path:inset(-.4em -.6em 0 -.6em)}
.si-line-inner{display:block}
.si-motion [data-split] .si-line-inner{translate:0 108%;transition:translate 1.35s var(--si-ease);transition-delay:calc(var(--si-l,0)*120ms + var(--si-delay,0ms))}
.si-motion [data-split].is-in .si-line-inner{translate:none}

/* Image drift inside fixed frames. */
.si-motion [data-parallax]{scale:1.12;translate:0 var(--si-shift,0px);will-change:translate}

/* Shared section finishes used by elevated pages. */
:is(.si-elevated,.si-warm) .si-door-copy{display:flex;flex-direction:column;flex:1}
:is(.si-elevated,.si-warm) .si-door-copy .si-eyebrow{margin-bottom:12px!important}
:is(.si-elevated,.si-warm) .si-door-copy>p:not(.si-eyebrow){font-size:14px;line-height:1.85;color:var(--si-muted);max-width:340px;margin-bottom:24px;flex:1}
:is(.si-elevated,.si-warm) .si-door h3{transition:color .5s var(--si-ease)}
:is(.si-elevated,.si-warm) .si-door:hover h3{color:var(--si-cocoa)}
:is(.si-elevated,.si-warm) .si-card-link{transition:border-color .5s var(--si-ease)}
:is(.si-elevated,.si-warm) .si-door:hover .si-card-link{border-color:var(--si-cocoa)}
:is(.si-elevated,.si-warm) .si-arch{position:relative}
:is(.si-elevated,.si-warm) .si-arch:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(81,51,29,.08);pointer-events:none}
:is(.si-elevated,.si-warm) .si-door:hover .si-arch img{transform:scale(1.04)}
:is(.si-elevated,.si-warm) .si-steps article{position:relative;border-top:0}
:is(.si-elevated,.si-warm) .si-steps article:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(81,51,29,.32);transform-origin:0 50%}
:is(.si-elevated,.si-warm) .si-steps article:after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--si-clay)}
.si-motion :is(.si-elevated,.si-warm) .si-steps article:before{transform:scaleX(0);transition:transform 1.5s var(--si-ease-io);transition-delay:calc(var(--si-i,0)*140ms + 200ms)}
.si-motion :is(.si-elevated,.si-warm) .si-steps article.is-in:before{transform:none}
:is(.si-elevated,.si-warm) .si-media{display:block;overflow:hidden;border-radius:20px;margin-bottom:24px;aspect-ratio:4/3;background:var(--si-linen)}
:is(.si-elevated,.si-warm) .si-media img{width:100%;height:100%!important;object-fit:cover;margin:0!important;border-radius:0!important;transition:transform 1.1s var(--si-ease)}
:is(.si-elevated,.si-warm) a:hover>.si-media img{transform:scale(1.045)}
:is(.si-elevated,.si-warm) .si-feature-image{overflow:hidden}
:is(.si-elevated,.si-warm) .si-meet{position:relative;overflow:hidden}

/* Ribbon: a slow line of what we make. */
.si-ribbon{overflow:hidden;border-block:1px solid var(--si-line);padding:clamp(18px,2.4vw,30px) 0;background:var(--si-paper);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.si-ribbon-track{display:flex;width:max-content;animation:si-marquee 58s linear infinite}
.si-ribbon:hover .si-ribbon-track{animation-play-state:paused}
.si-ribbon-track span{display:flex;align-items:center;gap:clamp(26px,3vw,48px);padding-right:clamp(26px,3vw,48px);font:400 clamp(34px,4.4vw,64px)/1 var(--si-serif);letter-spacing:-.02em;white-space:nowrap;color:var(--si-ink)}
.si-ribbon-track em{color:var(--si-clay)}
.si-ribbon-track i{font:400 clamp(12px,1vw,15px) var(--si-sans);font-style:normal;color:var(--si-clay)}
@keyframes si-marquee{to{transform:translateX(-50%)}}

/* Rotating seal around the mark. */
.si-seal{position:relative;display:inline-grid;place-items:center;width:132px;height:132px;margin:0 auto 34px}
.si-seal svg{position:absolute;inset:0;width:100%;height:100%;animation:si-spin 34s linear infinite}
.si-seal text{font:500 7.4px var(--si-sans);letter-spacing:.2em;text-transform:uppercase;fill:var(--si-cocoa)}
.si-seal img{width:46px;height:46px}
@keyframes si-spin{to{rotate:360deg}}

/* Footer wordmark. */
.si-footer-mark{display:flex;justify-content:space-between;max-width:var(--si-wrap);margin:70px auto 0;font:400 clamp(64px,15.4vw,236px)/.8 var(--si-serif);letter-spacing:-.01em;color:#E8D9C3;opacity:.92;overflow:hidden;padding-bottom:.06em;user-select:none}
.si-footer-mark span{display:inline-block}
.si-motion .si-footer-mark span{translate:0 105%;transition:translate 1.4s var(--si-ease);transition-delay:calc(var(--si-l,0)*55ms)}
.si-motion .si-footer-mark.is-in span{translate:none}
.si-footer-mark i{font-style:italic;color:#C9A27F}

/* AI Desk launcher and panel in the ShapedSI palette. */
html body #shapedsi-trigger-wrap,html body #shapedsi-panel{--desk-paper:#F3EADC;--desk-panel:#FBF7F1;--desk-ink:#2B1C13;--desk-forest:#51331D;--desk-lime:#E8D9C3;--desk-muted:#6F5B4C;--desk-line:rgba(81,51,29,.19);font-family:var(--si-sans)}
html body #shapedsi-trigger{background:#51331D;border-color:#7a5638;font-family:var(--si-sans);font-weight:500;letter-spacing:.02em;box-shadow:0 14px 30px -16px rgba(43,28,19,.6);transition:background-color .35s,translate .45s var(--si-ease)}
html body #shapedsi-trigger:hover{background:#633C1F;translate:0 -2px}
html body #shapedsi-panel{border-color:#d9c8b0}
html body #shapedsi-panel::backdrop{background:rgba(43,28,19,.16)}
html body #shapedsi-panel .desk-action{border-color:#cdb89b}
html body #shapedsi-panel .desk-check input{accent-color:#51331D}
:is(.si-elevated,.si-warm):has(.si-mobile-menu:not([hidden])) #shapedsi-trigger-wrap{visibility:hidden}
/* Keep enquiry fields, consent and recovery messages free of floating controls. */
body.si-request-visible #shapedsi-trigger-wrap{visibility:hidden;pointer-events:none}

@media(max-width:600px){.si-seal{width:112px;height:112px}.si-seal img{width:40px;height:40px}.si-footer-mark{margin-top:48px}}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  :is(.si-elevated,.si-warm) *,:is(.si-elevated,.si-warm) *:before,:is(.si-elevated,.si-warm) *:after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .si-ribbon-track{transform:none}
  .si-ribbon{-webkit-mask:none;mask:none}
  .si-ribbon-track span:nth-child(n+2){display:none}
  .si-ribbon-track span{flex-wrap:wrap;white-space:normal;justify-content:center;padding-inline:var(--si-gutter)}
  .si-ribbon-track{width:auto}
}

/* A little more life: softer page changes, light that moves across the photos, warm hover and a signed note. */
::view-transition-old(root){animation:si-page-out .32s ease-out both}
::view-transition-new(root){animation:si-page-in .62s cubic-bezier(.22,.61,.36,1) .1s both}
@keyframes si-page-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes si-breathe{from{scale:1}to{scale:1.045}}
@keyframes si-sunlight{from{transform:translate(-7%,-5%);opacity:.5}to{transform:translate(9%,7%);opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html.si-motion :is(.si-page-visual,.sp-visual .si-arch,.sv-hero-photo,.sv-split-photo) img{animation:si-breathe 26s ease-in-out infinite alternate;transform-origin:62% 38%}
  html.si-motion :is(.si-page-visual,.sp-visual .si-arch,.sv-hero-photo,.sv-split-photo)::after{content:"";position:absolute;inset:-25%;pointer-events:none;z-index:1;background:radial-gradient(55% 42% at 30% 22%,rgba(255,234,200,.42),transparent 72%);mix-blend-mode:soft-light;animation:si-sunlight 19s ease-in-out infinite alternate}
}
.sp-visual .si-arch,.sv-hero-photo,.sv-split-photo{position:relative;overflow:hidden}
/* Evening light: after 6 pm local time the photos warm and a lamp glow settles in. */
html.si-evening :is(.si-page-visual,.sp-visual .si-arch,.sv-hero-photo,.sv-split-photo) img{filter:sepia(.16) saturate(1.06) brightness(.94)}
html.si-evening :is(.si-page-visual,.sp-visual .si-arch,.sv-hero-photo,.sv-split-photo)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(58% 48% at 72% 78%,rgba(255,168,92,.3),transparent 72%);mix-blend-mode:soft-light}
@media (hover:hover) and (pointer:fine){
  .si-warm .si-content-flow :is(.card,.feature-card,.service-card,.route-card,.plan-card,.mf-card,.step-card,.cmd-card,.use,.case-card,.eco-card,.search-signal-card,.demo-card,.price-card){transition:translate .55s var(--si-ease),box-shadow .55s var(--si-ease),border-color .55s ease}
  .si-warm .si-content-flow :is(.card,.feature-card,.service-card,.route-card,.plan-card,.mf-card,.step-card,.cmd-card,.use,.case-card,.eco-card,.search-signal-card,.demo-card,.price-card):hover{translate:0 -3px;box-shadow:0 24px 44px -30px rgba(81,51,29,.5);border-color:rgba(163,101,56,.32)}
}
html body :is(#meet,.si-meet,.sv-contact) p.si-signature{margin:2px 0 30px!important;font:italic 400 clamp(28px,2.6vw,36px)/1 var(--si-serif)!important;color:var(--si-clay)!important;-webkit-text-fill-color:var(--si-clay)!important;letter-spacing:.01em!important;opacity:1!important}

/* Printing never hides content that has not been scrolled into view yet. */
@media print{.si-motion :is([data-reveal],[data-split] .si-line-inner,.si-footer-mark span){opacity:1!important;translate:none!important;transform:none!important;clip-path:none!important}.si-motion [data-reveal=arch] img{scale:1!important}.si-elevated .si-header{position:absolute!important}}