/* ---------- tokens ---------- */
:root{
  /* ---- brand palette, the only literal colours in the system ---- */
  --sapphire:#002A95;   /* Sapphire Blue  */
  --coral:#FE6B35;      /* Vibrant Coral  */
  --ivory:#EFEECF;      /* Ivory Mist     */
  --peach:#F7C5A0;      /* Peach Sand     */
  --ocean:#1A659E;      /* Ocean Horizon  */
  --coverage-fade:#688DAF;  /* the COVERAGE gradient's right stop */

  /* ---- derived, never hand-picked ---- */
  --coral-deep:color-mix(in srgb, var(--coral) 84%, #000);
  --ivory-50:color-mix(in srgb, var(--ivory) 50%, transparent);
  --ivory-30:color-mix(in srgb, var(--ivory) 30%, transparent);
  --ivory-18:color-mix(in srgb, var(--ivory) 18%, transparent);

  /* ---- materials ---- */
  --glass:rgba(0,0,0,.10);        /* client spec: §1 panel + notification cards */
  --glass-ivory:color-mix(in srgb, var(--ivory) 10%, transparent);  /* §3 FEEL. panel */
  --glass-deep:rgba(0,0,0,.35);   /* client spec: §4 panel */
  --scrim:rgba(0,0,0,.25);
  --shadow:rgba(0,0,0,.35);

  --ink-deep:#141821;
  --nav-h:clamp(58px,6.2vh,78px);
  --gut:clamp(20px,4.4vw,68px);
  --e-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--coral);color:var(--ivory);
  font-family:'Zalando Sans SemiExpanded','Zalando Sans',system-ui,sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.emo{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}

::selection{background:var(--ivory);color:var(--coral-deep)}
:focus-visible{outline:2px solid var(--ivory);outline-offset:5px;border-radius:2px;box-shadow:0 0 0 5px var(--ink-deep)}
/* the document is inert; #scroll-wrapper is the scrollport. That is what stops
   iOS and Android collapsing the URL bar, since the document never scrolls. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
#scroll-wrapper{
  position:fixed;inset:0;
  overflow-x:hidden;overflow-y:auto;
  scrollbar-color:var(--ivory-50) var(--coral-deep);scrollbar-width:thin;
}
#scroll-wrapper::-webkit-scrollbar{width:10px}
#scroll-wrapper::-webkit-scrollbar-track{background:var(--coral-deep)}
#scroll-wrapper::-webkit-scrollbar-thumb{background:var(--ivory-50);border-radius:99px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut)}
.nav::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(var(--scrim),transparent);pointer-events:none}
.nav__mark img{height:clamp(22px,2.4vw,32px);width:auto}
.nav__links{display:flex;gap:clamp(16px,2.3vw,40px);list-style:none;margin:0;padding:0}
.nav__links a{color:var(--ivory);text-decoration:none;
  font-size:clamp(13px,1.45vw,20px);font-weight:500;letter-spacing:-.005em;
  opacity:.88;transition:opacity .25s var(--e-out);
  text-underline-offset:.34em;text-decoration-thickness:1px}
.nav__links a:hover{opacity:1;text-decoration:underline}
.nav__burger{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--ivory)}
.nav__burger svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/*.menu{*/
/*  position:fixed;inset:0;z-index:90;*/
/*  background:var(--sapphire);*/
/*  display:flex;flex-direction:column;justify-content:center;*/
/*  padding:0 var(--gut);*/
/*  opacity:0;visibility:hidden;transition:opacity .38s var(--e-out),visibility .38s;*/
/*}*/
/*.menu[data-open]{opacity:1;visibility:visible}*/
/*.menu__close{*/
/*  position:absolute;top:calc(var(--nav-h)/2 - 22px);left:var(--gut);*/
/*  background:none;border:0;padding:6px;cursor:pointer;color:var(--ivory);*/
/*}*/
/*.menu__close svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}*/
/*.menu__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:2.5em;text-align: center;}*/
/*.menu__nav a{*/
/*  color:var(--ivory);text-decoration:none;*/
/*  font-size:clamp(26px,8vw,40px);font-weight:600;letter-spacing:-.028em;*/
/*}*/
/*.menu__nav a:hover{text-decoration:underline;text-underline-offset:.2em}*/

/* ---------- scene scaffold ----------
   §2 is pulled up a full viewport so its stage climbs OVER the still-pinned hero,
   which is what lets its edge cross the child's foot mid-fade. */
.scene{position:relative}
#s1{height:208svh;z-index:1}   /* -20% on the run into §2 */
#s2{height:220svh;z-index:2;margin-top:-100svh}   /* pinned 120svh, then 100svh of release the exit rides */
/* §3 does not overlap §2 — it follows, pushing §2 up ahead of it */
#s3{height:700svh;z-index:3}   /* 87 units × 8.05svh; zoom ~0.7 viewport per journey */
#s4{height:240svh;z-index:4}   /* pinned 140svh; dwell ~50svh, exit ~36svh */
/* §5 unpins as soon as the last metric lands, so the footer takes over in
   ordinary scroll flow rather than after a dead hold */
#s5{height:260svh;z-index:5}   /* one beat, so no runway for sequential reveals */
.stage{position:sticky;top:0;height:100svh;width:100%;overflow:hidden;isolation:isolate}

/* ---------- shared: the section watermarks ---------- */
.watermark{
  position:absolute;z-index:3;
  font-weight:600;letter-spacing:-.04em;line-height:.8;text-transform:uppercase;
  color:var(--ivory);opacity:.5;
  will-change:opacity,transform;
}
.js .watermark{opacity:0}
.watermark--see{right:var(--gut);bottom:2svh;font-size:clamp(3rem,7.6vw,7.4rem);mix-blend-mode:soft-light}
.watermark--remember{right:var(--gut);top:calc(var(--nav-h) + 1svh);font-size:clamp(2.4rem,6.6vw,6.4rem);color:var(--ivory);opacity:.6;mix-blend-mode:normal}
.js .watermark--remember{opacity:0}

/* ---------- 1 · hero ---------- */
.stage--hero{background:var(--sapphire)}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;will-change:transform}
.hero__title{
  position:absolute;z-index:2;left:var(--gut);right:var(--gut);top:22svh;margin:0;
  font-size:9.6vw;line-height:.88;font-weight:700;letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--ivory);will-change:transform,opacity;
  text-align:center;
}
.hero__title>span{display:block;white-space:nowrap}
.hero__br{display:none}
/* only the word COVERAGE carries the fade */
.hero__title .grad{
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--ivory) 85%,transparent),var(--coverage-fade));
  -webkit-background-clip:text;background-clip:text;
  background-repeat:no-repeat;   /* a repeated gradient would restart mid-word */
  color:transparent;
}
/* the child's body centres at exactly 50% of its own file, so auto margins do the
   centring and `transform` is left entirely to GSAP */
.hero__drift{position:absolute;inset:0;z-index:3;pointer-events:none;will-change:transform}
.hero__child{
  position:absolute;left:50%;bottom:-3.5svh;translate:-50% 0;
  height:min(84svh,62vw);width:auto;max-width:none;
  transform-origin:50% 100%;will-change:transform,opacity;
}
.js .hero__child{opacity:0;visibility:hidden}
.hero__panel{
  position:absolute;z-index:4;right:0;bottom:0;
  width:min(52vw,640px);aspect-ratio:619/292;
  display:flex;align-items:center;justify-content:flex-end;
  /* percentage PADDING would resolve against the viewport, not the panel, so
     the copy is inset by its own WIDTH instead — that does resolve here */
  clip-path:url(#glassHero);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  will-change:transform,opacity;
}
.js .hero__panel{opacity:0;visibility:hidden}
.hero__kicker,.hero__sub{
  margin:0;font-weight:700;letter-spacing:-.018em;text-transform:uppercase;
  color:var(--ivory);line-height:1.14;
}
.hero__panelIn{width:62%;margin-right:5%}   /* clears the curve at x=28% */
.hero__kicker,.hero__sub{font-size:clamp(17px,2.5vw,36px)}


/* ---------- 2 · touchpoint ---------- */
.stage--touch{background:var(--coral)}
/* colour from the token, pattern as a transparent overlay on top of it, so the
   ground stays exact at any aspect and the pattern can be scaled independently
   per breakpoint. The old flat JPEG baked the two together and could only crop. */
.touch__bg{position:absolute;inset:0;z-index:0;background-color:var(--coral)}
.touch__figure{position:absolute;z-index:1;left:0;bottom:0;height:82svh;will-change:transform,opacity}
.touch__figure img{height:100%;width:auto;max-width:none;object-fit:contain;object-position:left bottom}
.touch__copy{position:absolute;z-index:2;left:47%;right:var(--gut);top:35svh}
.touch__title{
  margin:0 0 clamp(12px, 2vw, 0px);font-size:clamp(28px,4.7vw,68px);line-height:1.08;font-weight:600;
  letter-spacing:-.028em;text-transform:uppercase;color:var(--ivory);
}
.touch__title span{display:block;width:98%}
.touch__body{margin:0;font-size:clamp(16px,2.2vw,32px);line-height:1.3;font-weight:500;
  letter-spacing:-.008em;color:var(--ivory)}
.js .touch__copy{opacity:0;visibility:hidden}

/* ---------- 3 · journey ---------- */
.stage--journey{background:var(--coral)}
.journey__ground{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.journey__title{
  position:absolute;z-index:3;left:var(--gut);right:var(--gut);top:19svh;margin:0;
  font-size:10.9vw;line-height:1.08;font-weight:600;letter-spacing:-.036em;
  text-transform:uppercase;color:var(--ivory);will-change:transform,opacity;
}
.journey__title span{display:block;white-space:nowrap}
.journey__title span:last-child{text-align:center}   /* line 2 centres under line 1 */
.journey__body{
  position:absolute;z-index:3;left:var(--gut);right:var(--gut);top:65svh;
  margin:0;text-align:center;
  font-size:clamp(16px,2vw,28px);line-height:1.46;letter-spacing:-.006em;
  font-weight:500;color:var(--ivory);
  will-change:transform,opacity;
}
.js .journey__body{opacity:0;visibility:hidden}
.watermark--feel{left:var(--gut);right:auto;bottom:5svh;font-size:clamp(3rem,7.6vw,7.4rem);mix-blend-mode:soft-light}

.journey__viewport{position:absolute;inset:0;z-index:4}
.js .journey__viewport{opacity:0;visibility:hidden}
/* Frames stack in REVERSE: journey 1 sits on top of 2, which sits on top of 3.
   That lets a card slot between two frames — above its own, below the one
   before it — so it stays hidden until the previous frame has cleared. */
.jshot{position:absolute;inset:0;margin:0;background:var(--coral);will-change:opacity}
.jshot[data-shot="1"]{z-index:15}
.jshot[data-shot="2"]{z-index:13}
.jshot[data-shot="3"]{z-index:11}
/* anchored to the top so the crop and the push both keep the top of the frame */
.jshot img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;transform-origin:50% 0%;will-change:transform,filter}
.jthumb{position:absolute;z-index:1;margin:0;left:50%;top:50%;height:62svh;transform:translate(-50%,-50%);will-change:opacity}
/* the closing thumbnail lands larger and lower than the opening one */
.jthumb[data-thumb="end"]{top:47%;height:78svh}
.jthumb img{height:100%;width:auto;max-width:none;transform-origin:50% 50%;will-change:transform,filter}
.js .jthumb{opacity:0;visibility:hidden}

/* no z-index here: a stacking context would trap the cards and stop them
   interleaving with the frames */
.notes{position:absolute;inset:0;pointer-events:none}
.note[data-note="1"]{z-index:16}
.note[data-note="2"]{z-index:14}
.note[data-note="3"]{z-index:12}
.note{
  position:absolute;bottom:7svh;width:min(82vw,660px);
  border-radius:56px;border:1px solid #ffffffab;
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:0 34px 64px -32px var(--shadow), inset 0 1px 0 #ffffff70;
  color:#fff;pointer-events:auto;overflow:hidden;
  will-change:transform,opacity;
}
/* avatar is its own column so the kicker, headline and body share one left edge */
.note__body{display:flex;gap:clamp(14px,1.5vw,20px);padding:clamp(20px,2.3vw,32px)}
.note__avatar{width:clamp(34px,3.1vw,44px);height:clamp(34px,3.1vw,44px);border-radius:50%;flex:none}
.note__col{flex:1;min-width:0}
.note__meta{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.4em}
.note[data-note="1"]{right:var(--gut)}
.note[data-note="2"]{left:var(--gut)}
.note[data-note="3"]{right:var(--gut)}
.js .note{opacity:0;visibility:hidden}
html:not(.js) .note[data-note="2"]{bottom:calc(7svh + 200px)}
html:not(.js) .note[data-note="3"]{bottom:calc(7svh + 400px)}
.note__kicker{font-size:clamp(15px,1.7vw,24px);font-weight:400;letter-spacing:.005em;text-transform:uppercase;color:#fff}
.note time{font-size:clamp(15px,1.7vw,24px);font-weight:400;color:#ffffffdb;flex:none}   /* no tabular figures: static value, not a column */
.note h3{margin:0 0 .34em;font-size:clamp(17px,1.95vw,28px);line-height:1.28;font-weight:600;letter-spacing:-.014em;color:#fff}
.note p{margin:0;font-size:clamp(14px,1.4vw,20px);line-height:1.5;letter-spacing:-.004em;color:#fff}
.note a{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.note a:hover{text-decoration-thickness:2px}

/* ---------- 4 · claim ---------- */
.stage--claim{background:var(--sapphire)}
.claim__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.claim__pattern{position:absolute;z-index:1;left:0;top:0;width:min(58vw,744px);height:auto}
.claim__copy{position:absolute;z-index:3;left:var(--gut);top:34svh;width:min(52vw,760px)}
.js .claim__copy{opacity:0;visibility:hidden}
.claim__title{
  margin:0 0 clamp(14px,1.6vw,24px);
  font-size:clamp(30px,5vw,72px);line-height:1.08;font-weight:600;letter-spacing:-.03em;
  text-transform:uppercase;color:var(--ivory);will-change:transform,opacity;
}
.claim__title span{display:block;white-space:nowrap}
.claim__figure{position:absolute;z-index:2;right:0;bottom:0;width:min(62vw,1027px);will-change:transform,opacity}
.claim__figure img{width:100%;height:auto}
.js .claim__figure{opacity:0;visibility:hidden}
.claim__body{margin:0;font-size:clamp(16px,1.95vw,28px);line-height:1.42;font-weight:500;letter-spacing:-.008em;color:var(--ivory)}

/* ---------- 5 · proof ---------- */
.stage--proof{background:linear-gradient(to bottom, #F7C5A0 -26%, #FE6B35 33%, #FE6B35 100%);display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(var(--nav-h) + 6svh)}
.proof__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);padding:0 var(--gut)}
.proof__title{margin:0;font-size:clamp(1.5rem,2.9vw,2.9rem);line-height:1.08;font-weight:600;letter-spacing:-.026em;color:var(--ivory)}
.proof__body{margin:0;max-width:40ch;font-size:clamp(15px,1.4vw,20px);line-height:1.3;font-weight:500;letter-spacing:-.006em;color:var(--ivory)}
.js .proof__title,.js .proof__body{opacity:0;visibility:hidden}
.proof__cells{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.cell{
  position:relative;aspect-ratio:347/253;
  background:url("../images/ancileo-frame5-bg-pattern-blue.png") no-repeat 0 0/100% 100%;
  display:flex;align-items:flex-start;justify-content:flex-start;
}
.cell__in{padding:20% 8% 0% 34%;will-change:transform,opacity}   /* clears the cell's own curve */
.js .cell__in{opacity:0;visibility:hidden}
.cell__n{display:block;font-size:clamp(24px,3.5vw,54px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ivory);margin-bottom:.34em}
.cell__l{display:block;font-size:clamp(14px,1.7vw,24px);line-height:1.32;font-weight:500;letter-spacing:-.006em;color:var(--ivory)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:6;background:var(--coral);padding:clamp(48px,9svh,110px) var(--gut) clamp(20px,3svh,34px);overflow:hidden}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,72px)}
.foot__claim{margin:0;font-size:clamp(18px,2vw,28px);line-height:1.36;font-weight:600;letter-spacing:-.022em;color:#fff}
.foot__col h2{margin:0 0 1.5em;font-size:clamp(16px,1.3vw,18px);font-weight:700;letter-spacing:-.008em;color:#fff}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:1.1em}
.foot__col a{color:#fff;text-decoration:none;font-size:clamp(14px,1.15vw,16px);font-weight:500;letter-spacing:-.006em;
  text-underline-offset:.3em;text-decoration-thickness:1px}
.foot__col a:hover{text-decoration:underline}
.foot__mark{width:min(78vw,1180px);height:auto;margin:clamp(40px,8svh,110px) auto clamp(28px,5svh,64px);opacity:.4}
.foot__legal{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--ivory-18);padding-top:clamp(14px,2svh,22px)}
.foot__legal p{margin:0;font-size:clamp(13px,1.15vw,16px);font-weight:500;color:var(--ivory);display:flex;gap:clamp(18px,2.6vw,44px)}
.foot__legal p:first-child{gap:4px;}
.foot__legal a{color:inherit;text-decoration:none;text-underline-offset:.3em}
.foot__legal a:hover{text-decoration:underline}



/*=============19.08.2026==============*/
body.page-template-felt-coverage(font-family: 'Zalando Sans SemiExpanded','Zalando Sans',system-ui,sans-serif; font-weight: 400; color: #EFEECF;)
html body.page-template-felt-coverage(font-family: 'Zalando Sans SemiExpanded','Zalando Sans',system-ui,sans-serif; font-weight: 400; color: #EFEECF;)
.page-template-felt-coverage h1, .page-template-felt-coverage h2, .page-template-felt-coverage h3, .page-template-felt-coverage h4, .page-template-felt-coverage h5, .page-template-felt-coverage h6{font-family: 'Zalando Sans SemiExpanded','Zalando Sans',system-ui,sans-serif;}
.page-id-115378 header .container{ width:94%!important; max-width:94%!important; margin:0px auto!important; border:0px solid red!important;}
.page-id-115378 header .container #navbarTogglerDemo03 ul li a{font-size: clamp(13px,1.45vw,20px)!important; font-family: 'Zalando Sans SemiExpanded','Zalando Sans',system-ui,sans-serif!important;
color:#EFEECF !important; font-weight:500;}
.page-id-115378 header .container #navbarTogglerDemo03 ul li a:hover{color:#fff !important; text-decoration:underline;}

.page-id-115378 header .container #navbarTogglerDemo03 ul li:hover > .dropdown-content{ display:none!important;}

.page-id-115378 #s5 h2.proof__title{font-family: 'Zalando Sans SemiExpanded','Zalando Sans',system-ui,sans-serif!important; color: var(--ivory)!important; font-size: clamp(1.5rem,2.9vw,2.9rem)!important;}

.hero__kicker, .hero__sub {font-family: 'Zalando Sans SemiExpanded','Zalando Sans',system-ui,sans-serif; margin: 0; font-weight: 700; letter-spacing: -.018em; text-transform: uppercase; color: var(--ivory); line-height: 1.14;}

.banner-outer-rs{background-size:100% 100%;}

@media (max-width:767px){

.page-id-115378 header .container #navbarTogglerDemo03 ul li a{font-size:21px !important; padding: 0 16px; font-weight: 500; line-height: 50px; white-space: nowrap; width: 100%; color:#5b7184 !important;}
.page-id-115378 header .container #navbarTogglerDemo03 ul li a:hover{color:rgb(236, 162, 99) !important; text-decoration:none;}

}




/* ---------- responsive (desktop-first; mobile pass to follow) ---------- */
@media (max-width:900px){
  /* Shorter tracks. A flick with momentum covers two or three screens, so a
     200svh dwell is crossed before it registers as a hold. Compressing the
     track compresses every beat inside it proportionally. */
  #s1{height:200svh}
  #s2{height:190svh}
  #s3{height:900svh}
  #s4{height:250svh}
  #s5{height:300svh}

  .nav__links{display:none}
  .nav__burger{display:flex}

  /* --- hero: FELT over COVERAGE, child in front of both ---
     Measured off the artboard: cap height 81pt on a 360pt screen, so ~112pt,
     which is 31vw. At that size COVERAGE runs ~157% of the viewport and bleeds
     off both edges. The JS fitter would size it to fit, so it stands down. */
  .hero__title{--fit:off;font-size:16vw;line-height:.9;text-align:center;left:0;right:0;top:18svh}
  .hero__br{display:inline}
  /* inline-block, not block: the box shrink-wraps to the word, so the gradient
     spans COVERAGE itself. As a full-width block the background box would be
     one viewport wide while the word is ~1.6, and the fade would restart
     partway through the letters. Shrink-wrapped also lets text-align centre it,
     which is what splits the overflow evenly across both edges. */
  .hero__title .grad{display:inline-block;margin-left:-1vw;}
  /* The 1.25 is folded into the height rather than applied as a scale. GSAP
     owns both `transform` and `scale` on this element for the intro tween, so
     any CSS scaling is a fight; height is a dimension nothing animates.
     78 x 1.25 = 97.5svh, 150 x 1.25 = 187.5vw. It grows upward from the pinned
     bottom edge and outward from the centre, same result, no conflict. */
  .hero__child{height:min(74svh,133vw);bottom:-2svh}
  .hero__panel{width:100%;aspect-ratio:auto;min-height:20svh;max-width:480px;}
  /* 56% keeps the copy clear of the curve, which reaches x=28% at the top line.
     74% started it at x=20% and the clip ate the first letter. */
  .hero__panelIn{width:59%;margin-right:6%;text-align:left}
  .hero__kicker{font-size:clamp(16px,9vw,21px)}
  .hero__sub{font-size:clamp(16px,5.2vw,21px)}
  .hero__kicker, .hero__sub{line-height:1.4}

  /* --- §2 stacks: copy, then the photo beneath it. The figure precedes the
         copy in the DOM, so order has to put it back. --- */
  .stage--touch{display:flex;flex-direction:column;padding-top:calc(var(--nav-h) + 5svh)}
  .touch__copy{order:1;position:relative;left:auto;right:auto;top:auto;padding:0 var(--gut)}
  .touch__title{font-size:clamp(28px,8vw,42px);margin-bottom:14px}
  .touch__title span{width:100%}
  .touch__body{font-size:clamp(15px,4.3vw,20px)}
  .touch__figure{order:2;position:relative;left:auto;bottom:auto;height:auto;width:100%;margin-top:auto;margin-bottom:5svh;}
  .touch__figure img{width:100%;height:auto;object-position:left top}
  .watermark--see{order:3;position:absolute;right:7vw;bottom:auto;top:47svh;font-size:clamp(40px,12vw,76px);opacity:0.65 !important;}
  /* cover would blow the panel up ~3.5x on a tall viewport; hold it at a
     readable scale and let the coral field carry the rest */

  /* --- §3 --- */
  .journey__title{top:35svh;font-size:9.2vw;line-height:1.3;text-align:center}
  .journey__title span:last-child{text-align:center}
  /* the thumbnail overlaps the headline rather than clearing it */
  .jthumb{top:50%;height:46svh}
  .jthumb[data-thumb="end"]{top:44%;height:54svh}
  .journey__body{top:62svh;font-size:clamp(14px,4.1vw,18px)}
  .watermark--feel{bottom:5svh;font-size:clamp(40px,14vw,76px)}

  /* cards centre on the bottom edge. Centred with auto margins, never a
     transform, because GSAP owns transform on these. */
  .note{border-radius:32px;}
  .note,.note[data-note="1"],.note[data-note="2"],.note[data-note="3"]{
    left:0;right:0;margin-inline:auto;width:min(92vw,430px);bottom:6svh;
  }
  .note__body{padding:20px;gap:14px}
  .note__kicker,.note time{font-size:15px}
  .note h3{font-size:18px}
  .note p{font-size:15px}
  .note__avatar{width:36px;height:36px}

  /* --- §4 stacks --- */
  .stage--claim{display:flex;flex-direction:column;padding-top:calc(var(--nav-h) + 3svh)}
  .claim__bg{object-position: left;}
  .watermark--remember{position:relative;right:auto;top:3svh;display:block;padding:0 var(--gut);font-size:clamp(40px,13.5vw,72px)}
  .claim__title{position:relative;left:auto;top:10svh;width:auto;font-size:clamp(30px,8.4vw,46px);line-height:1.28}
  .claim__figure{position:relative;right:30%;bottom:auto;width:130%;margin-top:auto;}
  .claim__copy{position:relative;left:auto;top:auto;width:auto;padding:0 var(--gut);}
  .claim__body{position: relative; top: 9svh; font-size:clamp(15px,4.4vw,20px)}
  .claim__pattern{width:74vw}

  /* --- §5 --- */
  .stage--proof{padding-top:calc(var(--nav-h) + 4svh)}
  .proof__head{grid-template-columns:1fr;gap:16px}
  .proof__title{font-size:clamp(26px,8.2vw,38px)}
  .proof__body{font-size:clamp(15px,4.4vw,19px);max-width:none}
  .proof__cells{grid-template-columns:repeat(2,1fr)}
  .cell{
        aspect-ratio: 300 / 240;
    background:url("../images/ancileo-frame5-bg-pattern-blue_mobile.png") no-repeat 0 0/100% 100%;
  }
  .cell__in{padding: 28% 6% 0 30%;}
  .cell__n{font-size:clamp(26px,7.8vw,40px)}
  .cell__l{font-size:clamp(13px,3.8vw,17px)}

  /* --- footer --- */
  .foot__grid{grid-template-columns:1fr;gap:40px;text-align:center}
  .foot__claim{text-align:center;font-size: clamp(22px, 2vw, 28px);}
  .foot__col h2{margin: 0 0 1.3em;}
  .foot__col ul{gap:0.8em}
  .foot__mark{width:100%;margin:6svh auto 4svh}
  .foot__legal{flex-direction:column;align-items:center;gap:16px}
  .foot__legal p{flex-direction:column;gap:14px;align-items:center}
  .foot__legal p:first-child{flex-direction:row;gap:4px;align-items:center}

  /* --- cost control: blur is the one thing that will drop frames here --- */
  .note{-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
  .hero__panel{-webkit-backdrop-filter:blur(9px) saturate(1.1);backdrop-filter:blur(9px) saturate(1.1)}
}


/* ---------- reduced motion: same story, standing still ---------- */
@media (prefers-reduced-motion:reduce){
  .scene{height:auto !important;margin-top:0 !important}
  .nav{position:static;background:var(--scrim)}
  .nav::before{display:none}
  .stage{position:static;height:auto;min-height:100svh;overflow:visible;padding:6svh 0 8svh;display:block}
  .hero__title,.journey__title,.claim__title{position:relative;left:auto;right:auto;top:auto;width:auto;padding-inline:var(--gut)}
  .hero__drift{position:relative;inset:auto}
  .hero__child{position:relative;bottom:auto;margin:4svh auto 0;height:46svh}
  .hero__panel{position:relative;right:auto;bottom:auto;margin:4svh 0 0 auto;aspect-ratio:auto;padding:26px var(--gut)}
  .touch__copy{position:relative;left:auto;right:auto;top:auto;padding:0 var(--gut);margin-bottom:6svh}
  .touch__figure,.claim__figure{position:relative;height:auto;width:auto;top:auto;margin-top:5svh}
  .watermark{position:relative;right:auto;top:auto;bottom:auto;display:block;padding:0 var(--gut);opacity:.4}
  .journey__body{position:relative;left:auto;right:auto;top:auto;margin:5svh var(--gut) 0}
  .journey__viewport{position:relative;height:auto;margin-top:6svh}
  .jthumb{position:relative;left:auto;top:auto;transform:none;height:44svh;margin:0 auto 3svh}
  .jshot{position:relative;height:56svh}
  .jshot+.jshot{margin-top:2svh}
  .jshot img{transform:none}
  .notes{position:static}
  .note{position:relative;left:auto;right:auto;bottom:auto;margin:3svh var(--gut) 0;width:auto;max-width:520px}
  .stage--proof{display:block}
}