/* ==========================================================================
   UNIEK WEBDESIGN · design system v4
   One brand motif (the logo curve and its dot), one visible spine, two
   easing curves. Light-led; navy only low on the page. Palette and logo
   untouched. Every animated line on this site is the logo curve.
   ========================================================================== */

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/instrumentsans-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/instrumentsans-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IS Fallback';src:local('Helvetica Neue'),local('Arial');
  size-adjust:97%;ascent-override:96%;descent-override:24%;line-gap-override:0%;}

/* ---------- 1 · Tokens ----------------------------------------------------- */

:root{
  --white:#ffffff;
  --bg:#f8fafc;
  --navy:#0f172a;
  --navy-2:#1e293b;
  --navy-3:#111c33;
  --text:#0f172a;
  --text-2:#475569;
  --text-3:#64748b;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --blue-light:#eff6ff;
  --blue-mid:#dbeafe;
  --blue-soft:#60a5fa;
  --border:#e2e8f0;
  --border-2:#cbd5e1;
  --green:#16a34a;

  --on-navy:#e8edf7;
  --on-navy-2:#94a3b8;
  --line-d:rgba(255,255,255,.12);

  --font:'Instrument Sans','IS Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --t-d1:clamp(2.1rem,3.8vw,3.3rem);
  --t-d2:clamp(1.65rem,2.6vw,2.4rem);
  --t-d3:clamp(1.2rem,1.6vw,1.5rem);
  --t-d4:1.0625rem;
  --t-lead:clamp(1rem,1.15vw,1.1875rem);
  --t-body:1rem;
  --t-sm:.9375rem;
  --t-xs:.875rem;
  --t-label:.75rem;

  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:80px; --s8:112px; --s9:160px;

  --wrap:1360px;
  --gut:clamp(20px,4.6vw,60px);
  --col-gap:24px;
  --sec:clamp(76px,9.4vw,140px);

  /* The spine: a visible vertical hairline one third in. Labels live left
     of it, content right. It runs from the stats band to the footer. */
  --spine-col:clamp(200px,22vw,300px);
  --spine-gap:48px;
  --spine-x:calc(var(--gut) + var(--spine-col) + (var(--spine-gap) / 2));

  --radius:12px;
  --radius-lg:18px;
  --radius-xl:28px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-md:0 2px 6px -2px rgba(15,23,42,.08),0 12px 32px -12px rgba(15,23,42,.18);
  --shadow-lg:0 4px 10px -4px rgba(15,23,42,.1),0 32px 64px -24px rgba(15,23,42,.28);

  /* The entire site speaks two easing curves: one for entrances, one for
     state changes. Legacy aliases resolve to the same pair. */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-state:cubic-bezier(.65,0,.35,1);
  --ease:var(--ease-state);
  --out:var(--ease-out);
  --spring:var(--ease-out);
}

/* ---------- 2 · Base -------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font);font-size:var(--t-body);line-height:1.65;
  color:var(--text);background:var(--white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,svg{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.034em;color:var(--navy);}
p{margin:0;}
ul,ol{margin:0;padding:0;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--blue);color:#fff;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;}

@media (min-width:901px){
  html{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent;}
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:3px solid var(--white);}
  ::-webkit-scrollbar-thumb:hover{background:var(--text-3);}
}

.uw-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:1200;
  transform:scaleX(var(--sp,0));transform-origin:0 50%;
  background:var(--blue);pointer-events:none;
}

/* ---------- 3 · Layout + spine ---------------------------------------------- */

.uw-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}
.uw-sec{padding-block:var(--sec);position:relative;}
.uw-sec--bg{background:var(--bg);}

/* Section header: label + title left, optional action right, one baseline. */
.uw-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s3) var(--s5);margin-bottom:var(--s6);
}
.uw-head__text{max-width:820px;}

.uw-label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--t-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin-bottom:var(--s2);
}
.uw-label::before{
  content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
}
.uw-head__title{font-size:var(--t-d1);max-width:22ch;}
.uw-head__lead{font-size:var(--t-lead);line-height:1.75;color:var(--text-2);
  margin-top:var(--s3);max-width:58ch;}

/* ---------- 4 · Buttons & links ---------------------------------------------- */

.uw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding-inline:28px;border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--font);font-size:var(--t-sm);font-weight:600;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background-color .25s var(--ease-state),border-color .25s var(--ease-state),
             color .25s var(--ease-state),transform .3s var(--ease-out),box-shadow .3s var(--ease-state);
}
.uw-btn svg{flex:none;transition:transform .3s var(--ease-out);}
.uw-btn:hover svg{transform:translateX(4px);}
.uw-btn:hover{transform:translateY(-1px);}
.uw-btn:active{transform:translateY(0);}

.uw-btn--primary{background:var(--blue);color:#fff;
  box-shadow:0 2px 8px -2px rgba(37,99,235,.35),0 10px 24px -10px rgba(37,99,235,.45);}
.uw-btn--primary:hover{background:var(--blue-dark);
  box-shadow:0 4px 12px -2px rgba(37,99,235,.4),0 16px 32px -12px rgba(37,99,235,.5);}
.uw-btn--secondary{background:var(--white);color:var(--navy);border-color:var(--border-2);}
.uw-btn--secondary:hover{border-color:var(--navy);background:var(--navy);color:#fff;}
.uw-btn--onnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);}
.uw-btn--onnavy:hover{background:rgba(255,255,255,.1);border-color:#fff;}
.uw-btn--light{background:#fff;color:var(--navy);}
.uw-btn--light:hover{background:var(--blue-light);}
.uw-btn--sm{height:44px;padding-inline:20px;font-size:var(--t-xs);}

/* Text link: the underline is a miniature logo curve that draws on hover. */
.uw-link{
  display:inline-flex;align-items:center;gap:8px;position:relative;
  font-size:var(--t-sm);font-weight:600;color:var(--blue);padding-bottom:5px;
}
.uw-link .uw-curve{position:absolute;left:0;right:auto;bottom:0;width:100%;height:5px;overflow:visible;}
.uw-link .uw-curve path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);
  transition:stroke-dashoffset .35s var(--ease-state);}
.uw-link:hover .uw-curve path{stroke-dashoffset:0;}
.uw-link svg:not(.uw-curve){transition:transform .3s var(--ease-out);}
.uw-link:hover svg:not(.uw-curve){transform:translate(3px,-3px);}

/* ---------- 5 · Navigation (still, refuses to perform) ----------------------- */

.uw-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .25s var(--ease-state),border-color .25s var(--ease-state);
}
.uw-nav.is-stuck{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--border);
}
.uw-nav__in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.uw-logo{display:flex;align-items:center;gap:10px;flex:none;}
.uw-logo-icon{width:34px;height:34px;flex:none;}
.uw-logo__t{font-size:1.35rem;font-weight:700;letter-spacing:-.03em;color:#000;line-height:1;}
.uw-logo__t span{color:var(--blue);}

.uw-nav__links{display:flex;align-items:center;gap:2px;list-style:none;}
.uw-nav__links>li>a{
  position:relative;display:block;padding:10px 14px;
  font-size:var(--t-xs);font-weight:500;color:var(--text-2);
  transition:color .2s var(--ease-state);
}
.uw-nav__links>li>a:hover{color:var(--navy);}
.uw-nav__links>li>a[aria-current="page"]{color:var(--navy);font-weight:600;}
.uw-nav__links>li>a[aria-current="page"]::after{
  content:'';position:absolute;left:50%;bottom:2px;width:4px;height:4px;border-radius:50%;
  background:var(--blue);transform:translateX(-50%);
}
.uw-nav__links a.uw-nav__cta{
  margin-left:var(--s2);background:var(--blue);color:#fff!important;font-weight:600;
  display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:var(--radius);
  transition:background-color .2s var(--ease-state);
}
.uw-nav__links a.uw-nav__cta:hover{background:var(--blue-dark);}

.uw-burger{
  display:none;width:46px;height:46px;margin-right:-6px;border:0;background:transparent;
  cursor:pointer;padding:0;position:relative;color:var(--navy);
}
.uw-burger span{
  position:absolute;left:12px;width:22px;height:2px;background:currentColor;border-radius:2px;
}
.uw-burger span:nth-child(1){top:19px;}
.uw-burger span:nth-child(2){top:26px;}

.uw-menu{
  position:fixed;inset:0;z-index:1001;background:var(--navy);color:#fff;
  padding:var(--s8) var(--gut) var(--s5);
  display:flex;flex-direction:column;overflow-y:auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--ease-state);visibility:hidden;
}
body.uw-menu-open .uw-menu{clip-path:inset(0 0 0 0);visibility:visible;}
body.uw-menu-open{overflow:hidden;}
.uw-menu__list{list-style:none;}
.uw-menu__list li{overflow:hidden;}
.uw-menu__list a{
  display:flex;align-items:baseline;gap:var(--s2);padding:var(--s2) 0;
  border-bottom:1px solid var(--line-d);
  font-size:clamp(1.7rem,7vw,2.4rem);font-weight:700;letter-spacing:-.035em;color:#fff;
  transform:translateY(110%);transition:transform .55s var(--ease-out),color .2s var(--ease-state);
}
body.uw-menu-open .uw-menu__list a{transform:none;}
.uw-menu__list li:nth-child(1) a{transition-delay:.06s}
.uw-menu__list li:nth-child(2) a{transition-delay:.1s}
.uw-menu__list li:nth-child(3) a{transition-delay:.14s}
.uw-menu__list li:nth-child(4) a{transition-delay:.18s}
.uw-menu__list li:nth-child(5) a{transition-delay:.22s}
.uw-menu__list li:nth-child(6) a{transition-delay:.26s}
.uw-menu__list li:nth-child(7) a{transition-delay:.3s}
.uw-menu__list a:hover{color:var(--blue-soft);}
.uw-menu__list .n{font-size:var(--t-label);font-weight:600;color:var(--blue-soft);letter-spacing:.1em;}
.uw-menu__foot{
  margin-top:auto;padding-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);
  font-size:var(--t-xs);color:var(--on-navy-2);opacity:0;transition:opacity .3s ease .3s;
}
body.uw-menu-open .uw-menu__foot{opacity:1;}
.uw-menu__close{
  position:absolute;top:16px;right:calc(var(--gut) - 10px);width:46px;height:46px;
  border:0;background:transparent;cursor:pointer;color:#fff;z-index:2;
}
.uw-menu__close span{position:absolute;left:12px;top:22px;width:22px;height:2px;
  background:currentColor;border-radius:2px;}
.uw-menu__close span:nth-child(1){transform:rotate(45deg);}
.uw-menu__close span:nth-child(2){transform:rotate(-45deg);}

/* ---------- 6 · Motion primitives --------------------------------------------- */

.uw-js [data-reveal],.uw-js [data-rise]{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
.uw-js [data-reveal].is-in,.uw-js [data-rise].is-in{opacity:1;transform:none;}
.uw-js [data-reveal="left"]{transform:translateX(-24px);}
.uw-js [data-reveal="right"]{transform:translateX(24px);}

/* Curtain wipe for imagery: the frame opens, the photo settles. */
.uw-js [data-clip]{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease-out);}
.uw-js [data-clip].is-in{clip-path:inset(0 0 0 0);}
.uw-js [data-clip] img{transform:scale(1.1);transition:transform 1.4s var(--ease-out);}
.uw-js [data-clip].is-in img{transform:scale(1);}

.uw-js [data-stagger]>*{opacity:0;transform:translateY(20px);
  transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);}
.uw-js [data-stagger].is-in>*{opacity:1;transform:none;}
.uw-js [data-stagger].is-in>*:nth-child(1){transition-delay:.04s}
.uw-js [data-stagger].is-in>*:nth-child(2){transition-delay:.1s}
.uw-js [data-stagger].is-in>*:nth-child(3){transition-delay:.16s}
.uw-js [data-stagger].is-in>*:nth-child(4){transition-delay:.22s}
.uw-js [data-stagger].is-in>*:nth-child(5){transition-delay:.28s}
.uw-js [data-stagger].is-in>*:nth-child(6){transition-delay:.34s}
.uw-js [data-stagger].is-in>*:nth-child(7){transition-delay:.4s}
.uw-js [data-stagger].is-in>*:nth-child(8){transition-delay:.46s}

/* Masked line reveal: each .ln is a mask, its child rises into place. */
.uw-ln{display:block;overflow:hidden;}
.uw-js .uw-ln>span{display:block;transform:translateY(112%);
  transition:transform .9s var(--ease-out);}
.uw-js .is-in .uw-ln>span,.uw-js .uw-ln.is-in>span{transform:none;}
.uw-js .is-in .uw-ln:nth-child(2)>span{transition-delay:.09s}
.uw-js .is-in .uw-ln:nth-child(3)>span{transition-delay:.18s}

/* Per-letter rise for the footer wordmark. */
.uw-js [data-letters] i{display:inline-block;font-style:normal;transform:translateY(108%);
  transition:transform .8s var(--ease-out);transition-delay:calc(var(--i) * 35ms);}
.uw-js [data-letters].is-in i{transform:none;}

/* Any logo-curve stroke draws itself when its container reveals. */
.uw-draw path{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  transition:stroke-dashoffset 1s var(--ease-state) .3s;}
.is-in .uw-draw path,.uw-draw.is-in path{stroke-dashoffset:0;}
/* The dot pops after the stroke lands. */
.uw-dot{transform:scale(0);transform-origin:center;
  transition:transform .3s var(--ease-out) 1.15s;}
.is-in .uw-dot{transform:scale(1);}

/* ---------- 7 · Hero: typographic poster --------------------------------------- */

.uw-hero{
  position:relative;background:var(--white);
  padding-top:calc(76px + var(--s6));
}
/* The one piece of atmosphere on the whole site: a single flat tint. */
.uw-hero::before{
  content:'';position:absolute;right:0;top:0;width:52%;height:78%;pointer-events:none;
  background:radial-gradient(closest-side at 72% 30%,rgba(96,165,250,.13),transparent);
}
.uw-hero>.uw-wrap{position:relative;z-index:1;}

.uw-hero__badge{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--s4);
  padding:8px 14px;border-radius:8px;
  background:var(--white);border:1px solid var(--border);
  font-size:var(--t-xs);font-weight:500;color:var(--navy);box-shadow:var(--shadow-sm);
}
.uw-hero__badge i{width:7px;height:7px;border-radius:50%;background:#22c55e;font-style:normal;}

/* One size, one left edge: the headline is a clean block, not a staircase. */
.uw-hero__title{
  font-size:clamp(2.5rem,4.6vw,4.1rem);letter-spacing:-.04em;line-height:1.06;
  margin-bottom:var(--s4);
}
.uw-hero__title .l3{color:var(--blue);}
.uw-accent{position:relative;display:inline-block;}
.uw-accent i{font-style:normal;}
/* The brand curve underlines the accent word, then its dot pops in. */
.uw-accent .uw-swash{
  position:absolute;left:1%;right:4%;bottom:-.1em;height:.2em;overflow:visible;pointer-events:none;
}
.uw-accent .uw-swash path{fill:none;stroke:var(--blue);stroke-width:6.5;stroke-linecap:round;opacity:.45;}
.uw-accent .uw-swash circle{fill:var(--blue);}

.uw-hero__deck{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s5) var(--s7);align-items:center;
}
.uw-hero__lead{font-size:var(--t-lead);line-height:1.8;color:var(--text-2);
  margin-bottom:var(--s4);max-width:44ch;}
.uw-hero__actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4);}
.uw-rating{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-xs);color:var(--text-2);}
.uw-rating b{color:var(--navy);font-weight:700;}

/* One clean, contained screenshot. Straight edges, aligned to the grid. */
.uw-heroshot{
  position:relative;margin:0;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--bg);box-shadow:var(--shadow-lg);
}
.uw-heroshot img{
  width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  transform:translateY(var(--pan,0px)) scale(1.04);
}
.uw-heroshot figcaption{
  position:absolute;left:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;
  background:rgba(255,255,255,.92);border:1px solid var(--border);
  font-size:var(--t-label);font-weight:600;color:var(--navy);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--shadow-sm);
}
.uw-heroshot figcaption i{width:6px;height:6px;border-radius:50%;background:#22c55e;font-style:normal;}

/* ---------- 8 · Stats: one-time odometer ----------------------------------------- */

.uw-statsec{background:var(--bg);padding-block:var(--s6);}
.uw-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.uw-stat{padding:var(--s3) var(--s4) var(--s3) 0;position:relative;}
.uw-stat + .uw-stat{padding-left:var(--s4);}
.uw-stat + .uw-stat::before{
  content:'';position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--border);
}
/* Plain, confident figures. They rise once behind a mask; nothing gimmicky,
   and selecting or reading the page gives exactly "5,0" and "€550". */
.uw-stat__n{
  display:block;overflow:hidden;
  font-size:clamp(2.3rem,3.8vw,3.6rem);font-weight:700;letter-spacing:-.045em;
  line-height:1.1;color:var(--navy);margin-bottom:10px;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.uw-stat__n small{font-size:.44em;font-weight:600;letter-spacing:-.02em;color:var(--text-2);
  margin-left:2px;}
.uw-stat__n .eur{font-size:.6em;font-weight:600;color:var(--blue);margin-right:2px;}
.uw-stat__l{font-size:var(--t-xs);color:var(--text-2);line-height:1.6;max-width:24ch;}

/* The service line-up: the six disciplines as one quiet, businesslike row. */
.uw-lineup{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 0;
  margin-top:clamp(44px,5.6vw,72px);padding-top:var(--s4);
  border-top:1px solid var(--border);
}
.uw-lineup span{
  position:relative;padding-inline:clamp(14px,2vw,26px);
  font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;
}
.uw-lineup span + span::before{
  content:'';position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--blue-mid);
}

/* ---------- 9 · Marquee: straight, quiet, between hairlines ------------------------ */

.uw-marquee{
  overflow:hidden;background:var(--white);border-block:1px solid var(--border);
  padding-block:var(--s3);
}
.uw-marquee__track{display:flex;width:max-content;animation:uwMq 52s linear infinite;}
.uw-marquee:hover .uw-marquee__track{animation-play-state:paused;}
@keyframes uwMq{to{transform:translateX(-50%);}}
.uw-marquee__item{
  display:inline-flex;align-items:center;gap:var(--s4);padding-inline:var(--s3);
  font-size:var(--t-sm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);white-space:nowrap;
}
.uw-marquee__item::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;}

/* ---------- 10 · Pinned services ---------------------------------------------------- */

.uw-pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:var(--s5) var(--s7);align-items:start;}
.uw-pin__side{position:sticky;top:calc(76px + var(--s4));}
/* The services panel runs on the iPad: proportions come from the device. */
.uw-pin__media{position:relative;}
/* Tidy index chip: 01 / 06, top right of the panel. */
.uw-pin__count{
  position:absolute;right:14px;top:14px;z-index:2;
  display:inline-flex;padding:7px 13px;border-radius:8px;
  background:rgba(255,255,255,.92);color:var(--navy);
  font-size:var(--t-label);font-weight:700;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.uw-pin__media figure{position:absolute;inset:0;margin:0;opacity:0;
  transform:scale(1.04);transition:opacity .5s var(--ease-state),transform 1.1s var(--ease-out);}
.uw-pin__media figure.is-on{opacity:1;transform:scale(1);}
.uw-pin__media img{width:100%;height:100%;object-fit:cover;}
.uw-pin__media figcaption{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;padding:8px 14px;border-radius:8px;
  background:rgba(255,255,255,.92);color:var(--navy);
  font-size:var(--t-label);font-weight:600;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:var(--shadow-sm);
}

.uw-item{display:block;padding-block:var(--s5);border-top:1px solid var(--border);position:relative;}
.uw-item:last-child{border-bottom:1px solid var(--border);}
.uw-item__top{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);}
.uw-item__n{font-size:var(--t-label);font-weight:700;letter-spacing:.1em;color:var(--text-3);
  transition:color .25s var(--ease-state);font-variant-numeric:tabular-nums;}
.uw-item.is-on .uw-item__n{color:var(--blue);}
.uw-item__flag{
  padding:4px 10px;border-radius:6px;background:var(--blue-light);color:var(--blue);
  font-size:var(--t-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.uw-item__t{
  font-size:var(--t-d2);letter-spacing:-.03em;margin-bottom:var(--s2);
  color:var(--text-3);transition:color .3s var(--ease-state),transform .45s var(--ease-out);
}
.uw-item.is-on .uw-item__t{color:var(--navy);transform:translateX(6px);}
.uw-item__d{font-size:var(--t-sm);line-height:1.8;color:var(--text-2);max-width:46ch;
  margin-bottom:var(--s3);}
.uw-item__bar{
  position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-state);
}
.uw-item.is-on .uw-item__bar{transform:scaleX(1);}
.uw-item__img{display:none;}

/* ---------- 11 · Process: the curve carries the steps ------------------------------- */

.uw-flowline{position:relative;margin-bottom:var(--s2);display:none;}
.uw-flowline svg{width:100%;height:auto;display:block;overflow:visible;}
.uw-flowline path{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;opacity:.85;}
.uw-flowline .track{stroke:var(--border);opacity:1;}
.uw-flowline circle{fill:var(--blue);}
@media (min-width:901px){.uw-flowline{display:block;}}

.uw-flow{display:grid;gap:0;}
@media (min-width:901px){
  .uw-flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);}
}
.uw-flow__step{padding-block:var(--s4);border-top:1px solid var(--border);}
@media (min-width:901px){
  .uw-flow__step{border-top:0;padding-block:var(--s2) 0;padding-right:var(--s3);}
}
.uw-flow__n{
  display:inline-block;font-size:var(--t-label);font-weight:700;letter-spacing:.1em;
  color:var(--text-3);margin-bottom:var(--s2);font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease-state);
}
.uw-flow__step.is-on .uw-flow__n{color:var(--blue);}
.uw-flow__step h3{font-size:var(--t-d3);margin-bottom:var(--s1);}
.uw-flow__step p{font-size:var(--t-sm);line-height:1.8;color:var(--text-2);max-width:52ch;}

/* ---------- 12 · Showreel ------------------------------------------------------------ */

.uw-reel{position:relative;}
/* The frame carries the caption: overlaid on the video on a desktop, stacked
   underneath it on a phone. */
.uw-reel__frame{position:relative;}
.uw-reel__media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy);
  aspect-ratio:16/7.4;min-height:340px;box-shadow:var(--shadow-lg);cursor:pointer;
}
.uw-reel__media>img{width:100%;height:100%;object-fit:cover;opacity:.94;}
.uw-reel__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(15,23,42,.04) 45%,rgba(15,23,42,.55));
  pointer-events:none;transition:opacity .3s var(--ease-state);
}
.uw-reel__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.uw-reel.is-playing .uw-reel__media{cursor:default;}
.uw-reel.is-playing .uw-reel__media::after,
.uw-reel.is-playing .uw-reel__chip,
.uw-reel.is-playing .uw-reel__cap{opacity:0;pointer-events:none;}

/* The play affordance: a real button, centred by default; on fine pointers it
   follows the cursor (the .is-live mode switches to pixel coordinates). */
.uw-reel__chip{
  position:absolute;left:50%;top:50%;z-index:3;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:10px;
  background:rgba(255,255,255,.95);color:var(--navy);box-shadow:var(--shadow-md);
  font-family:var(--font);font-size:var(--t-sm);font-weight:600;white-space:nowrap;
  transform:translate(-50%,-50%);
  transition:opacity .3s var(--ease-state);
}
.uw-reel__chip.is-live{
  left:0;top:0;pointer-events:none;
  transform:translate3d(var(--chx,0px),var(--chy,0px),0) translate(-50%,-50%);
}
.uw-reel__chip .core{
  width:34px;height:34px;border-radius:8px;background:var(--blue);display:grid;place-items:center;
  color:#fff;flex:none;
}
.uw-reel__chip .core svg{width:13px;height:13px;margin-left:2px;}
.uw-reel__cap{
  position:absolute;left:clamp(18px,3vw,40px);bottom:clamp(16px,2.6vw,32px);z-index:2;color:#fff;
  transition:opacity .3s var(--ease-state);max-width:72%;
}
.uw-reel__cap .tag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;
  padding:6px 12px;border-radius:6px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);font-size:var(--t-label);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.uw-reel__cap h3{color:#fff;font-size:var(--t-d3);margin-bottom:4px;}
.uw-reel__cap p{font-size:var(--t-sm);color:rgba(255,255,255,.82);}

/* ---------- 13 · Portfolio: large aligned showcase rows -------------------------------- */

.uw-shows{display:grid;gap:clamp(56px,7vw,96px);}
.uw-show{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
  align-items:center;}
.uw-show__media{grid-column:1 / span 7;grid-row:1;position:relative;}
.uw-show__body{grid-column:9 / span 4;grid-row:1;}
.uw-show:nth-child(even) .uw-show__media{grid-column:6 / span 7;}
.uw-show:nth-child(even) .uw-show__body{grid-column:1 / span 4;}

.uw-show__shot{
  position:relative;display:block;border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--white);
  box-shadow:var(--shadow-md);
  transition:box-shadow .3s var(--ease-state),transform .3s var(--ease-out);
}
.uw-show:hover .uw-show__shot{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.uw-show__shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  transition:transform 1.2s var(--ease-out);}
.uw-show:hover .uw-show__shot img{transform:scale(1.035);}
.uw-show__mobile{
  position:absolute;right:20px;bottom:-24px;width:19%;max-width:104px;z-index:2;
  border-radius:12px;overflow:hidden;border:3px solid #fff;background:#fff;
  box-shadow:var(--shadow-lg);
  transform:translateY(var(--pary,0px));
}
.uw-show__mobile img{width:100%;height:auto;}
.uw-show__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:var(--s3);}
.uw-show__meta span{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:8px;
  border:1px solid var(--border);background:var(--white);
  font-size:var(--t-label);font-weight:600;letter-spacing:.04em;color:var(--text-2);
}
.uw-show__meta .live{color:var(--green);border-color:#bbf7d0;background:#f0fdf4;}
.uw-show__meta .live i{width:6px;height:6px;border-radius:50%;background:currentColor;font-style:normal;}
.uw-show__t{font-size:var(--t-d2);letter-spacing:-.03em;margin-bottom:var(--s2);}
.uw-show__url{font-size:var(--t-sm);font-weight:600;color:var(--blue);display:inline-block;
  margin-bottom:var(--s2);}
.uw-show__url:hover{text-decoration:underline;text-underline-offset:3px;}
.uw-show__d{font-size:var(--t-sm);line-height:1.8;color:var(--text-2);}

/* ---------- 14 · Split + minis --------------------------------------------------------- */

.uw-minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s6);}
.uw-mini{padding:var(--s4) 0;border-top:1px solid var(--border);}
.uw-mini__n{font-size:var(--t-label);font-weight:700;letter-spacing:.1em;color:var(--blue);
  font-variant-numeric:tabular-nums;}
.uw-mini__t{font-size:var(--t-d4);letter-spacing:-.02em;margin:var(--s2) 0 6px;}
.uw-mini__d{font-size:var(--t-sm);line-height:1.7;color:var(--text-2);}

/* ---------- 15 · Upcoming rows ---------------------------------------------------------- */

.uw-soon{display:grid;}
.uw-soon__i{
  display:grid;grid-template-columns:88px minmax(0,1fr) minmax(120px,180px);
  gap:var(--s4);align-items:center;
  padding-block:var(--s4);border-top:1px solid var(--border);
}
.uw-soon__i:last-child{border-bottom:1px solid var(--border);}
.uw-soon__logo{
  height:64px;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px;
}
.uw-soon__logo img{width:100%;height:100%;object-fit:contain;
  filter:grayscale(1) opacity(.7);transition:filter .35s var(--ease-state);}
.uw-soon__i:hover .uw-soon__logo img{filter:none;}
.uw-soon__t{font-size:var(--t-d4);letter-spacing:-.02em;margin-bottom:4px;}
.uw-soon__d{font-size:var(--t-xs);line-height:1.7;color:var(--text-2);max-width:58ch;}
.uw-soon__foot{display:grid;gap:8px;}
.uw-soon__pct{display:flex;justify-content:space-between;font-size:var(--t-label);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.uw-soon__bar{display:block;height:4px;background:var(--border);border-radius:99px;position:relative;
  overflow:hidden;}
.uw-soon__bar i{position:absolute;left:0;top:0;height:4px;width:var(--pct,15%);display:block;
  border-radius:99px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out) .25s;}
[data-stagger].is-in .uw-soon__bar i,[data-reveal].is-in .uw-soon__bar i{transform:scaleX(1);}

/* ---------- 16 · Reasons ----------------------------------------------------------------- */

.uw-why{display:grid;}
.uw-why__i{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s4);
  padding-block:var(--s5);border-top:1px solid var(--border);
}
.uw-why__i:last-child{border-bottom:1px solid var(--border);}
.uw-why__n{
  font-size:clamp(1.5rem,2.2vw,2rem);font-weight:700;letter-spacing:-.04em;color:var(--border-2);
  line-height:1;padding-top:4px;font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease-state);
}
.uw-why__i:hover .uw-why__n{color:var(--blue);}
.uw-why__i h3{font-size:var(--t-d3);margin-bottom:var(--s1);letter-spacing:-.024em;}
.uw-why__i p{font-size:var(--t-sm);line-height:1.8;color:var(--text-2);max-width:60ch;}

/* ---------- 17 · FAQ ---------------------------------------------------------------------- */

.uw-faq details{border-top:1px solid var(--border);}
.uw-faq details:last-child{border-bottom:1px solid var(--border);}
.uw-faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-block:var(--s3);
  font-size:var(--t-d4);font-weight:600;letter-spacing:-.018em;color:var(--navy);
  transition:color .2s var(--ease-state);
}
.uw-faq summary::-webkit-details-marker{display:none;}
.uw-faq summary:hover{color:var(--blue);}
.uw-faq summary i{position:relative;width:28px;height:28px;flex:none;font-style:normal;
  border-radius:8px;background:var(--bg);
  transition:background-color .25s var(--ease-state),transform .4s var(--ease-out);}
.uw-faq details.is-open summary i,.uw-faq details[open] summary i{background:var(--blue);transform:rotate(135deg);}
.uw-faq summary i::before,.uw-faq summary i::after{content:'';position:absolute;background:var(--navy);
  transition:background-color .25s var(--ease-state);}
.uw-faq summary i::before{left:8px;top:13px;width:12px;height:2px;}
.uw-faq summary i::after{left:13px;top:8px;width:2px;height:12px;}
.uw-faq details.is-open summary i::before,.uw-faq details.is-open summary i::after,
.uw-faq details[open] summary i::before,.uw-faq details[open] summary i::after{background:#fff;}
.uw-faq__body{overflow:hidden;}
.uw-faq__a{font-size:var(--t-sm);line-height:1.85;color:var(--text-2);
  padding:0 0 var(--s4);max-width:72ch;}
.uw-faq__a a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}

/* ---------- 18 · Cities --------------------------------------------------------------------- */

.uw-cities{display:flex;flex-wrap:wrap;gap:var(--s2);}
.uw-city{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:13px 20px;border-radius:var(--radius);border:1px solid var(--border);background:var(--white);
  font-size:var(--t-sm);font-weight:600;color:var(--navy);
  transition:background-color .25s var(--ease-state),color .25s var(--ease-state),
             border-color .25s var(--ease-state),transform .3s var(--ease-out);
}
.uw-city:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px);}
.uw-city span{font-size:var(--t-label);font-weight:600;color:var(--text-3);
  transition:color .25s var(--ease-state);}
.uw-city:hover span{color:var(--blue-soft);}

/* ---------- 19 · CTA card straddling the footer ---------------------------------------------- */

.uw-ctasec{padding-block:var(--sec);}
.uw-ctacard{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:var(--navy);color:var(--on-navy);
  padding:clamp(56px,7.5vw,112px) clamp(28px,5vw,88px);
  box-shadow:var(--shadow-lg);
}
/* The logo curve, monumental, drawing itself across the card. */
.uw-ctacard__arc{
  position:absolute;right:-4%;bottom:-26%;width:clamp(300px,44%,640px);z-index:0;
  pointer-events:none;opacity:.55;overflow:visible;
}
.uw-ctacard__arc path{fill:none;stroke:var(--blue-soft);stroke-width:9;stroke-linecap:round;}
.uw-ctacard__arc circle{fill:var(--blue-soft);}
.uw-ctacard>*{position:relative;z-index:1;}
.uw-ctacard .uw-label{color:var(--blue-soft);margin-bottom:var(--s3);}
.uw-ctacard__t{font-size:clamp(2.1rem,4.2vw,3.8rem);color:#fff;letter-spacing:-.04em;line-height:1.05;
  margin-bottom:var(--s4);max-width:19ch;}
.uw-ctacard__lead{font-size:var(--t-lead);line-height:1.8;color:var(--on-navy-2);
  max-width:54ch;margin-bottom:var(--s5);}
.uw-ctacard__lead strong{color:#fff;font-weight:600;}
.uw-ctacard__act{display:flex;gap:var(--s2);flex-wrap:wrap;}

/* ---------- 20 · Footer + wordmark finale ------------------------------------------------------ */

.uw-foot{background:var(--navy);color:var(--on-navy);}
.uw-foot__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
  padding-block:var(--s7) var(--s6);}
.uw-foot__brand{grid-column:1 / span 4;}
.uw-foot__top>div:nth-of-type(2){grid-column:6 / span 2;}
.uw-foot__top>div:nth-of-type(3){grid-column:8 / span 2;}
.uw-foot__top>div:nth-of-type(4){grid-column:10 / span 3;}
.uw-foot__brand .uw-logo__t{color:#fff;}
.uw-foot__brand .uw-logo__t span{color:var(--blue-soft);}
.uw-foot__brand>p{font-size:var(--t-sm);line-height:1.8;color:var(--on-navy-2);max-width:34ch;
  margin:var(--s3) 0;}
.uw-foot__also{font-size:var(--t-xs);color:var(--on-navy-2);margin:0 0 var(--s3);}
.uw-foot__also a{color:var(--blue-soft);}
.uw-foot__also a:hover{text-decoration:underline;}
.uw-foot h3{font-size:var(--t-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--s3);}
.uw-foot ul{list-style:none;display:grid;gap:11px;}
.uw-foot ul a,.uw-foot ul li{font-size:var(--t-sm);color:var(--on-navy-2);}
.uw-foot ul a{transition:color .2s var(--ease-state);display:inline-block;}
.uw-foot ul a:hover{color:#fff;}
.uw-foot__social{display:flex;gap:var(--s1);margin-bottom:var(--s3);}
.uw-foot__social a{
  width:42px;height:42px;border-radius:10px;border:1px solid var(--line-d);display:grid;
  place-items:center;font-size:var(--t-xs);font-weight:700;color:var(--on-navy-2);
  transition:background-color .2s var(--ease-state),color .2s var(--ease-state),
             border-color .2s var(--ease-state);
}
.uw-foot__social a:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.uw-foot__locales{display:flex;gap:var(--s1);flex-wrap:wrap;}
.uw-foot__locales a{font-size:var(--t-label);font-weight:600;padding:7px 13px;border-radius:8px;
  border:1px solid var(--line-d);color:var(--on-navy-2);
  transition:color .2s var(--ease-state),border-color .2s var(--ease-state);}
.uw-foot__locales a:hover,.uw-foot__locales a[aria-current="true"]{color:#fff;border-color:rgba(255,255,255,.45);}

/* The page closes on the wordmark: large, contained, letters rising once. */
.uw-foot__mark{
  display:block;overflow:hidden;line-height:1;pointer-events:none;user-select:none;
  margin-top:var(--s5);padding-bottom:var(--s4);
}
.uw-foot__mark span{
  display:block;font-size:clamp(2.5rem,8.6vw,8.6rem);font-weight:700;letter-spacing:-.045em;
  white-space:nowrap;color:rgba(255,255,255,.1);
}
.uw-foot__mark span em{font-style:normal;color:rgba(96,165,250,.26);}
.uw-foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);
  padding-block:var(--s3);border-top:1px solid var(--line-d);font-size:var(--t-xs);color:var(--text-3);}
.uw-foot__bar a:hover{color:#fff;}

/* ---------- 21 · Utility + cookie --------------------------------------------------------------- */

/* The chat bubble owns the bottom right corner, so the back-to-top button
   stacks above it, centred on the same vertical line. */
.uw-top{
  position:fixed;right:29px;bottom:94px;z-index:990;width:48px;height:48px;border-radius:12px;
  border:1px solid var(--border);background:var(--white);display:grid;place-items:center;
  color:var(--navy);opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .25s var(--ease-state),transform .35s var(--ease-out),
             background-color .2s var(--ease-state),color .2s var(--ease-state);
  box-shadow:var(--shadow-md);
}
.uw-top.is-on{opacity:1;pointer-events:auto;transform:none;}
.uw-top:hover{background:var(--navy);color:#fff;}
/* Below 520px the chat bubble shrinks and moves in, so this follows it. */
@media (max-width:520px){
  .uw-top{right:17px;bottom:calc(84px + env(safe-area-inset-bottom));}
}

.cookie-banner{
  position:fixed;left:24px;bottom:24px;z-index:9997;width:min(440px,calc(100vw - 48px));
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s3);box-shadow:var(--shadow-lg);
  transform:translateY(140%);opacity:0;pointer-events:none;
  transition:transform .5s var(--ease-out),opacity .3s var(--ease-state);
}
.cookie-banner.show{transform:none;opacity:1;pointer-events:auto;}
.cookie-banner h3{font-size:var(--t-d4);margin-bottom:6px;}
.cookie-banner p{font-size:var(--t-xs);line-height:1.65;color:var(--text-2);margin-bottom:var(--s3);}
.cookie-banner p a{color:var(--blue);text-decoration:underline;}
.cookie-banner-actions{display:flex;gap:var(--s1);}
.cookie-banner-actions button{
  flex:1;height:44px;border-radius:10px;font-family:var(--font);font-size:var(--t-xs);
  font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:background-color .2s var(--ease-state),border-color .2s var(--ease-state);
}
.cookie-btn-accept{background:var(--blue);color:#fff;border-color:var(--blue);}
.cookie-btn-accept:hover{background:var(--blue-dark);}
.cookie-btn-decline{background:var(--white);color:var(--text-2);border-color:var(--border-2);}
.cookie-btn-decline:hover{border-color:var(--navy);color:var(--navy);}

/* ---------- 21b · The laptop: every project opens live on a screen ---------- */

.uw-laptop{position:relative;width:100%;
  filter:drop-shadow(0 24px 34px rgba(15,23,42,.16)) drop-shadow(0 6px 12px rgba(15,23,42,.08));}
.uw-laptop__screen{
  background:linear-gradient(180deg,#101a2e,#0d1526);
  border:1px solid #243149;border-bottom:0;
  border-radius:clamp(12px,1.6vw,20px) clamp(12px,1.6vw,20px) 0 0;
  padding:clamp(8px,1.2vw,14px) clamp(8px,1.2vw,14px) clamp(10px,1.4vw,16px);
}
.uw-laptop__cam{width:5px;height:5px;border-radius:50%;background:#33415a;
  margin:0 auto clamp(6px,1vw,10px);}
.uw-laptop__base{
  position:relative;height:clamp(10px,1.4vw,16px);width:106%;margin-left:-3%;
  background:linear-gradient(180deg,#e8edf4,#c6d0dd);
  border-radius:2px 2px clamp(8px,1.2vw,12px) clamp(8px,1.2vw,12px);
}
.uw-laptop__base::before{
  content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:11%;height:45%;background:#aeb9c9;border-radius:0 0 8px 8px;
}

.uw-browser{background:#fff;border-radius:clamp(6px,.8vw,10px);overflow:hidden;}
.uw-browser__bar{
  display:flex;align-items:center;gap:6px;padding:clamp(6px,.9vw,10px) clamp(8px,1.1vw,12px);
  background:#eef2f7;border-bottom:1px solid var(--border);
}
.uw-browser__bar>i{width:9px;height:9px;border-radius:50%;flex:none;}
.uw-browser__bar>i:nth-child(1){background:#f87171;}
.uw-browser__bar>i:nth-child(2){background:#fbbf24;}
.uw-browser__bar>i:nth-child(3){background:#34d399;}
.uw-browser__url{
  flex:1;display:flex;align-items:center;gap:7px;min-width:0;
  background:#fff;border:1px solid var(--border);border-radius:99px;
  padding:4px 12px;margin-left:6px;min-height:24px;
  font-size:clamp(10px,1vw,12.5px);color:var(--text-2);white-space:nowrap;overflow:hidden;
}
.uw-browser__url svg{flex:none;opacity:.55;}
.uw-browser__url .txt{font-weight:500;color:var(--navy);letter-spacing:.01em;}
.uw-browser__url .caret{
  width:1.5px;height:12px;background:var(--blue);flex:none;
  animation:uwCaret 1s steps(1) infinite;
}
@keyframes uwCaret{50%{opacity:0;}}
.uw-browser__load{height:2px;background:transparent;position:relative;}
.uw-browser__load i{
  position:absolute;left:0;top:0;height:2px;width:100%;background:var(--blue);display:block;
  transform:scaleX(var(--lp,0));transform-origin:left;transition:transform .28s var(--ease-state);
}
/* 16/10 is the ratio the screenshots are shot in, so the frame shows the work
   exactly as captured: full width, no crop, no zoom. */
.uw-browser__view{position:relative;aspect-ratio:16/10;background:#fff;overflow:hidden;}
.uw-browser__view figure{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .45s var(--ease-state);}
.uw-browser__view figure.is-on{opacity:1;}
.uw-browser__view img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.uw-browser__name{
  position:absolute;left:10px;bottom:10px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:8px;
  background:rgba(255,255,255,.94);border:1px solid var(--border);
  font-size:var(--t-label);font-weight:600;color:var(--navy);box-shadow:var(--shadow-sm);
  opacity:0;transition:opacity .4s var(--ease-state);
}
.uw-browser__name.is-on{opacity:1;}
.uw-browser__name i{width:6px;height:6px;border-radius:50%;background:#22c55e;font-style:normal;}

/* Companion phone, straight and neatly tucked against the laptop. */
.uw-devphone{
  position:absolute;right:-2%;bottom:-4%;width:15.5%;max-width:132px;z-index:4;
  background:#0d1526;border:1px solid #243149;border-radius:clamp(10px,1.4vw,18px);
  padding:5px;box-shadow:var(--shadow-lg);
}
.uw-devphone::before{content:'';display:block;padding-top:205%;}
.uw-devphone figure{position:absolute;inset:5px;margin:0;border-radius:clamp(7px,1vw,14px);
  overflow:hidden;opacity:0;transition:opacity .45s var(--ease-state);}
.uw-devphone figure.is-on{opacity:1;}
.uw-devphone img{width:100%;height:100%;object-fit:cover;object-position:top center;}

/* ---------- 21c · The iPad: one even bezel, one big radius, no hinge -------- */

.uw-ipad{
  --ipad-bezel:clamp(9px,1.15vw,15px);
  --ipad-r:clamp(20px,2.5vw,34px);
  position:relative;width:100%;padding:var(--ipad-bezel);
  border-radius:var(--ipad-r);
  background:linear-gradient(155deg,#1f2a3d,#121c2d 48%,#0d1524);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 24px 34px rgba(15,23,42,.16),
    0 6px 12px rgba(15,23,42,.08);
}
/* Front camera, centred on the long edge: landscape, like the real thing. */
.uw-ipad__cam{
  position:absolute;left:50%;top:calc(var(--ipad-bezel) / 2);
  transform:translate(-50%,-50%);
  width:5px;height:5px;border-radius:50%;background:#33415a;
}
.uw-ipad__screen{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  aspect-ratio:1.43;background:var(--white);
  border-radius:calc(var(--ipad-r) - var(--ipad-bezel));
}
/* Inside the tablet the browser fills the glass, edge to edge. */
.uw-ipad .uw-browser{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:0;}
.uw-ipad .uw-browser__view{flex:1;min-height:0;aspect-ratio:auto;}
/* iPadOS Safari: no window buttons, one address field centred in the toolbar. */
.uw-ipad .uw-browser__bar{justify-content:center;background:#f2f5f9;}
.uw-ipad .uw-browser__url{flex:0 1 auto;max-width:66%;margin-left:0;justify-content:center;}

/* Split hero: the story left, the laptop doing its work right. */
.uw-hero--split{padding-top:calc(76px + var(--s7));padding-bottom:var(--s6);}
.uw-hero__split{
  display:grid;grid-template-columns:minmax(0,24fr) minmax(0,30fr);
  gap:clamp(36px,5vw,84px);align-items:center;
}
.uw-hero__copy .uw-hero__badge{margin-bottom:var(--s4);}
.uw-hero__copy .uw-hero__title{
  font-size:clamp(2.35rem,3.75vw,3.6rem);line-height:1.06;margin-bottom:var(--s3);
}
.uw-hero__copy .uw-hero__lead{margin-bottom:var(--s4);max-width:44ch;}
.uw-hero__copy .uw-rating{
  padding-top:var(--s2);border-top:1px solid var(--border);
}
.uw-hero__stage{position:relative;text-align:left;}
.uw-hero--split .uw-lineup{margin-top:clamp(44px,5.6vw,76px);}

@media (max-width:900px){
  .uw-hero__split{grid-template-columns:minmax(0,1fr);gap:var(--s5);}
  .uw-hero--split{padding-top:calc(76px + var(--s5));}
}

/* Portfolio rows built around the laptop. */
.uw-show__stage{display:block;}
/* Phone and laptop stand on one line, with a light gap between the two. */
.uw-show__media .uw-devphone{
  right:0;bottom:0;width:17%;
  box-shadow:0 0 0 4px var(--white),var(--shadow-lg);
}

/* ---------- 22 · Responsive ---------------------------------------------------------------------- */

@media (max-width:1100px){
  .uw-pin{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s5);}
  .uw-show__media,.uw-show:nth-child(even) .uw-show__media{grid-column:1 / span 7;}
  .uw-show__body,.uw-show:nth-child(even) .uw-show__body{grid-column:8 / span 5;}
}

@media (max-width:900px){
  .uw-nav__links{display:none;}
  .uw-burger{display:block;}

  .uw-hero{padding-top:calc(76px + var(--s5));}
  .uw-hero__deck{grid-template-columns:minmax(0,1fr);gap:var(--s5);}

  .uw-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s3);}
  .uw-stat:nth-child(odd)::before{display:none;}
  .uw-stat:nth-child(odd){padding-left:0;}
  .uw-stat:nth-child(-n+2){border-bottom:1px solid var(--border);padding-bottom:var(--s3);}

  .uw-pin{grid-template-columns:minmax(0,1fr);}
  .uw-pin__side{display:none;}
  .uw-item__img{display:block;border-radius:var(--radius);overflow:hidden;margin-bottom:var(--s3);
    aspect-ratio:16/9;background:var(--bg);border:1px solid var(--border);
    transition:transform .35s var(--ease-out),box-shadow .4s var(--ease-state);}
  .uw-item__img img{width:100%;height:100%;object-fit:cover;}
  .uw-item__t{color:var(--navy);}
  /* No pinned panel here, so the row in the middle of the screen lifts itself. */
  .uw-item.is-on .uw-item__img{transform:translateY(-4px);box-shadow:var(--shadow-md);}

  /* The same bar the services use, now under the process steps as you scroll. */
  .uw-flow__step{position:relative;}
  .uw-flow__step::before{
    content:'';position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--blue);
    transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-state);
  }
  .uw-flow__step.is-on::before{transform:scaleX(1);}

  .uw-show__media,.uw-show:nth-child(even) .uw-show__media{grid-column:1 / span 12;grid-row:1;}
  .uw-show__body,.uw-show:nth-child(even) .uw-show__body{grid-column:1 / span 12;grid-row:2;}
  .uw-show{row-gap:var(--s5);}
  /* On a phone the work is shown on a phone: the laptop steps aside. */
  .uw-show__media .uw-laptop{display:none;}
  .uw-show__media .uw-devphone{
    display:block;position:relative;right:auto;bottom:auto;
    width:min(220px,56vw);max-width:none;margin-inline:auto;
    padding:7px;border-radius:26px;box-shadow:var(--shadow-lg);
  }
  .uw-show__media .uw-devphone figure{inset:7px;border-radius:19px;opacity:1;}

  .uw-minis{grid-template-columns:minmax(0,1fr);gap:0;}
  .uw-soon__i{grid-template-columns:64px minmax(0,1fr);}
  .uw-soon__foot{grid-column:1 / -1;}
  .uw-why__i{grid-template-columns:48px minmax(0,1fr);gap:var(--s3);}

  .uw-foot__brand{grid-column:1 / span 12;}
  .uw-foot__top>div:nth-of-type(2){grid-column:1 / span 4;}
  .uw-foot__top>div:nth-of-type(3){grid-column:5 / span 4;}
  .uw-foot__top>div:nth-of-type(4){grid-column:9 / span 4;}
  /* min-height together with aspect-ratio pushed the width out past the screen.
     Below 900px the ratio alone decides how tall the video is. */
  .uw-reel__media{aspect-ratio:16/9;min-height:0;}
  .uw-reel__chip{left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
    pointer-events:auto!important;}
}

@media (max-width:640px){
  .uw-hero__actions{flex-direction:column;align-items:stretch;}
  .uw-hero__actions .uw-btn{width:100%;}
  .uw-ctacard__act{flex-direction:column;align-items:stretch;}
  .uw-ctacard__act .uw-btn{width:100%;}
  .uw-stats{grid-template-columns:minmax(0,1fr);}
  .uw-stat{border-bottom:1px solid var(--border);padding:var(--s3) 0!important;}
  .uw-stat:last-child{border-bottom:0;}
  .uw-stat::before{display:none!important;}
  .uw-show__mobile{width:22%;right:10px;bottom:-14px;}
  .uw-devphone{width:20%;right:0;}
  .uw-browser__url{font-size:9.5px;padding:3px 9px;}
  .uw-soon__i{grid-template-columns:minmax(0,1fr);gap:var(--s2);}
  .uw-soon__logo{width:88px;}
  .uw-foot__top>div:nth-of-type(2),.uw-foot__top>div:nth-of-type(3),
  .uw-foot__top>div:nth-of-type(4){grid-column:1 / span 12;}
  /* 12 columns with a 48px column gap is wider than a phone: 11 gaps alone
     measured 528px. Row gap only, so the footer stays inside the screen. */
  .uw-foot__top{gap:var(--s5) 0;}
  .uw-foot__bar{flex-direction:column;gap:var(--s1);}
  /* A 16/9 frame is too small to carry text on top, so the caption drops
     underneath the video and turns dark. */
  .uw-reel__cap{position:static;max-width:none;margin-top:var(--s2);}
  .uw-reel__cap .tag{background:var(--blue-light);border-color:var(--blue-mid);color:var(--blue);}
  .uw-reel__cap h3{color:var(--navy);}
  .uw-reel__cap p{color:var(--text-2);}
  .uw-reel__media::after{display:none;}
  .uw-reel.is-playing .uw-reel__cap{opacity:1;}
  .uw-ctacard{padding:var(--s6) var(--s3);}
}

/* ---------- 22b · Touch: a press where a mouse would hover ------------------ */

@media (hover:none){
  .uw-btn:active{transform:scale(.97);}
  .uw-show__media .uw-devphone,.uw-reel__media{transition:transform .2s var(--ease-state);}
  .uw-show__stage:active .uw-devphone,
  .uw-item:active .uw-item__img,
  .uw-reel__media:active{transform:scale(.985);}
  .uw-top:active{transform:scale(.92);}
}

/* ---------- 23 · Reduced motion -------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;}
  .uw-js [data-reveal],.uw-js [data-stagger]>*{opacity:1!important;transform:none!important;}
  .uw-js .uw-ln>span{transform:none!important;}
  .uw-js [data-letters] i{transform:none!important;}
  .uw-draw path{stroke-dashoffset:0!important;}
  .uw-dot{transform:scale(1)!important;}
  .uw-soon__bar i{transform:scaleX(1)!important;}
  .uw-odo .d>span{transform:translateY(calc(var(--dn,0) * -1em))!important;}
  .uw-heroshot img{transform:none!important;}
  .uw-marquee__track{animation:none!important;}
  .uw-browser__url .caret{animation:none!important;opacity:0!important;}
}

/* Snelaanvraag. Een kort formulier hoog op de homepage, zodat bezoekers uit
   advertenties meteen kunnen reageren zonder eerst door te klikken naar
   contact.html. De uitgebreide wizard daar blijft bestaan voor wie meer wil
   invullen. */
.uw-qf{padding-block:clamp(52px,7vw,92px);}
.uw-qf__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);
  gap:clamp(30px,5vw,64px);align-items:center;
}
.uw-qf__title{
  font-size:var(--t-d2);font-weight:700;letter-spacing:-.034em;
  color:var(--navy);line-height:1.08;margin:10px 0 14px;
}
.uw-qf__lead{font-size:var(--t-lead);color:var(--text-2);max-width:42ch;margin-bottom:24px;}
.uw-qf__points{list-style:none;display:flex;flex-direction:column;gap:11px;padding:0;margin:0;}
.uw-qf__points li{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-sm);color:var(--text-2);}
.uw-qf__points svg{flex:none;margin-top:3px;color:var(--green);}

.uw-qf__card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-md);
}
.uw-qf__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.uw-qf__field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.uw-qf__field label{font-size:var(--t-xs);font-weight:600;color:var(--text-2);}
.uw-qf__field input,.uw-qf__field select{
  height:48px;padding-inline:14px;border:1px solid var(--border-2);border-radius:var(--radius);
  font-family:var(--font);font-size:var(--t-sm);color:var(--navy);background:var(--white);
  transition:border-color .2s var(--ease-state),box-shadow .2s var(--ease-state);
}
.uw-qf__field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:38px;}
.uw-qf__field input:focus,.uw-qf__field select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);
}
.uw-qf__field input::placeholder{color:var(--text-3);}
.uw-qf__card .uw-btn{width:100%;margin-top:4px;}
.uw-qf__note{font-size:var(--t-xs);color:var(--text-3);text-align:center;margin-top:12px;}
.uw-qf__note a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px;}
.uw-qf__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.uw-qf__err{
  font-size:var(--t-xs);color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;
  border-radius:var(--radius);padding:9px 12px;margin-bottom:14px;display:none;
}
.uw-qf__err.is-on{display:block;}

@media (max-width:900px){
  .uw-qf__grid{grid-template-columns:1fr;gap:26px;}
  .uw-qf__lead{max-width:none;}
}
@media (max-width:520px){
  .uw-qf__row{grid-template-columns:1fr;gap:0;}
}

@media print{
  .uw-nav,.uw-menu,.uw-top,.uw-progress,.uw-marquee{display:none!important;}
  body{background:#fff;color:#000;}
}