/* Motion: section entrances, the header's reading line, the product switch and the past-work stage. */
:root{--spring:cubic-bezier(.34,1.56,.64,1);--glide:cubic-bezier(.16,1,.3,1)}

/* Header: reading progress and the current-section ink. */
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--orange),#ffb365 45%,#5878eb);transform-origin:0 50%;transform:scaleX(var(--scroll,0));pointer-events:none}
.top nav{position:relative}
.nav-ink{position:absolute;left:0;top:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--orange),#ffb365);box-shadow:0 0 12px #ff761fa6;pointer-events:none;transition:transform .7s var(--spring),width .7s var(--spring)}
.top nav a{transition:color .4s}.top nav a.is-current{color:var(--dark)}

/* Product switch: one glossy pill glides between the two products. */
.product-switch.has-pill{position:relative;align-self:flex-start;gap:4px;padding:4px;border-radius:26px;background:#fffcf2b8;box-shadow:inset 0 0 0 1px #172c9224,0 8px 22px #172c9214;backdrop-filter:blur(6px)}
.product-switch.has-pill button,.product-switch.has-pill button[aria-pressed="true"]{position:relative;z-index:1;background:transparent;border-color:transparent;transition:color .45s var(--glide)}
.product-switch.has-pill button[aria-pressed="true"]{color:#fff}
.switch-pill{position:absolute;left:0;top:0;border-radius:22px;background:linear-gradient(180deg,#3d5be6,#172c92 60%,#0f1d6a);box-shadow:0 8px 20px #172c924d,inset 0 1px 0 #ffffff5c;transition:transform .75s var(--spring),width .75s var(--spring),height .75s var(--spring)}
.switch-pill::after{content:"";position:absolute;left:9px;right:9px;top:2px;height:46%;border-radius:20px 20px 12px 12px;background:linear-gradient(#ffffff4d,#fff0)}
.product-switch:not(.is-ready) .switch-pill{transition:none}

/* Product figures: pointer tilt with a glare, and a light sweep when a product enters. */
.product-gallery .product figure{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .6s var(--glide)}
.product-gallery .product figure::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,0%),#ffffff3d,#fff0 48%);opacity:var(--glare,0);transition:opacity .5s}
.product.is-entering figure::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,#fff0 38%,#ffffff9e 48%,#ffb365a8 53%,#fff0 64%) 160% 0/260% 100% no-repeat;animation:sheen 1.15s .3s var(--glide) both}
@keyframes sheen{to{background-position:-60% 0}}

/* Past-work stage: the left column stacks the leaving and the entering media while they swap. */
.heritage-display{position:relative;display:grid}
.heritage-display>*{grid-area:1/1;z-index:1}
.heritage-display>.is-leaving{z-index:0;pointer-events:none}
.heritage-display.is-swapping{overflow:hidden}
/* On desktop an item's own media spot never shows, not even in the frame before its toggle event moves the media to the stage. */
@media(min-width:761px){.heritage .media-home{display:none}}
.stage-wave{position:absolute;z-index:2;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 3px #ff761f,inset 0 0 26px 6px #ff761f70,0 0 30px 4px #ff761f55}

/* Accordions: an open item draws the header's orange-to-blue line under its title, catches the
   background fields' light in its corner, and its toggle turns into the product pill's glossy disc. */
.rows summary{position:relative;grid-template-columns:minmax(0,1fr) 30px}
.rows summary::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:1px;background:linear-gradient(90deg,var(--orange),#ffb365 38%,#5878eb);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--glide);pointer-events:none}
.rows details[open] summary::after{transform:scaleX(1)}
.opening .offers details[open],.heritage .rows details[open]{background-image:radial-gradient(ellipse 60% 70% at 100% 0,#ffc58f52,#ffc58f00),radial-gradient(ellipse 55% 60% at 0 100%,#b4c5ff38,#b4c5ff00)}
.toggle{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;transition:transform .55s var(--spring),background-color .4s,color .4s,box-shadow .4s}
.rows details[open] .toggle{transform:rotate(180deg);color:#fff;background:linear-gradient(180deg,#3d5be6,#172c92 60%,#0f1d6a);box-shadow:0 5px 14px #172c9240,inset 0 1px 0 #ffffff5c}
@media(max-width:510px){.rows summary{grid-template-columns:minmax(0,1fr) 26px}.rows summary::after{left:10px;right:10px}.toggle{width:26px;height:26px;font-size:19px}}
.rows .row-title{transition:transform .45s var(--glide)}
@media(hover:hover){.rows summary:hover .row-title{transform:translateX(6px)}}

/* The past-work section grows from a rounded card into the full band as it scrolls in. */
.heritage{position:relative;z-index:0;background:transparent}
.heritage::before{content:"";position:absolute;inset:0;z-index:-1;background:#e9edfa9c;clip-path:inset(calc((1 - var(--enter,1)) * 110px) calc((1 - var(--enter,1)) * 7vw) 0 round calc((1 - var(--enter,1)) * 80px))}

:root{interpolate-size:allow-keywords}
/* Only the service accordions grow; the past-work column keeps its reserved, fixed geometry. */
.offers details::details-content{block-size:0;overflow:clip;transition:block-size .6s var(--glide),content-visibility .6s allow-discrete}
.offers details[open]::details-content{block-size:auto}

/* Entrances: present only while the head script has set .motion (scripts running). */
@keyframes rise{from{opacity:0;transform:translateY(16px);filter:blur(4px)}}
.motion .rows details[open] .details-body li,.motion .rows details[open] .details-body>p{animation:rise .65s var(--glide) both}
.motion .rows details[open] .details-body li:nth-child(2){animation-delay:.07s}
.motion .rows details[open] .details-body li:nth-child(3){animation-delay:.14s}
.motion .rows details[open] .details-body li:nth-child(4){animation-delay:.21s}

.motion :is(.section-index,.title>*,#uzlet-cim,.lead,.products-heading,.product-switch,.product-gallery,.heritage-display,.rows>details,footer .frame){transition:opacity .9s var(--glide) var(--d,0s),transform 1.15s var(--glide) var(--d,0s),filter .9s var(--glide) var(--d,0s),clip-path 1.15s var(--glide) var(--d,0s)}
.motion .section-index{clip-path:inset(0)}
.motion :is(.title>*,#uzlet-cim){clip-path:inset(-25% -8% -35% -8%)}
.motion .title em{display:inline-block}

.motion section:not(.is-in) .section-index{clip-path:inset(0 100% 0 0)}
.motion section:not(.is-in) :is(.title>*,#uzlet-cim){opacity:0;clip-path:inset(-25% -8% 100% -8%);transform:translateY(60%) skewY(6deg)}
.motion section:not(.is-in) :is(.lead,.products-heading,.product-switch,.rows>details),.motion footer:not(.is-in) .frame{opacity:0;transform:translateY(30px);filter:blur(6px)}
.motion section:not(.is-in) .product-gallery{opacity:0;transform:perspective(1200px) translateY(64px) rotateX(14deg) scale(.94);filter:blur(10px)}
.motion section:not(.is-in) .heritage-display{opacity:0;transform:translateX(-56px) scale(.93);filter:blur(10px)}
.motion .heritage:not(.is-in) .rows>details{transform:translateX(56px)}

.title>:nth-child(1){--d:.05s}.title>:nth-child(2){--d:.2s}
.opening .lead{--d:.36s}.opening .product-gallery{--d:.28s}.products-heading{--d:.48s}.product-switch{--d:.56s}
.offers>details:nth-child(1){--d:.66s}.offers>details:nth-child(2){--d:.76s}.offers>details:nth-child(3){--d:.86s}
#uzlet-cim{--d:.1s}.heritage-display{--d:.24s}
.heritage .rows>details:nth-child(1){--d:.3s}.heritage .rows>details:nth-child(2){--d:.4s}.heritage .rows>details:nth-child(3){--d:.5s}