/* Upcoming Trips — the honest "nothing's booked" page.
   A sky/sea decorative layer behind a ship's-log sheet carrying one penciled
   sample trip. All motion is decorative and lives on .cts-anim, so the
   reduced-motion block at the bottom can freeze the lot in one go.

   Depth-of-field rule for the sea life: size, opacity, blur, colour and speed
   all scale together per tier (far → mid → near). Fish travel one way only and
   loop from the entry edge; a fish whose artwork faces left is flipped once,
   at rest, by .ut-flip — never mid-cycle. */

/* ---------- keyframes ---------- */
@keyframes ctsDrop{0%{transform:translateY(-40px);opacity:0}70%{transform:translateY(5px);opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes ctsCloud{0%{transform:translateX(-26px)}100%{transform:translateX(44px)}}
@keyframes ctsWobble{0%{transform:translateY(0) skewX(0deg)}25%{transform:translateY(-4px) skewX(.5deg)}50%{transform:translateY(2px) skewX(0deg)}75%{transform:translateY(-3px) skewX(-.5deg)}100%{transform:translateY(0) skewX(0deg)}}
@keyframes ctsSwell{0%{transform:translateX(0)}100%{transform:translateX(-90px)}}
@keyframes ctsSwell2{0%{transform:translateX(0)}100%{transform:translateX(72px)}}
@keyframes ctsSwimR{0%{left:-260px}100%{left:calc(100% + 260px)}}
@keyframes ctsSwimL{0%{left:calc(100% + 260px)}100%{left:-260px}}
@keyframes ctsCoral{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}
@keyframes ctsFishBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes ctsFin{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@keyframes ctsKelp{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
@keyframes ctsKelp2{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-6deg)}}
@keyframes ctsBub{0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}12%{opacity:.9}80%{opacity:.7}100%{transform:translateY(-300px) translateX(var(--bx,12px)) scale(1);opacity:0}}
@keyframes ctsYacht{0%{transform:translateX(0) translateY(0)}50%{transform:translateX(12vw) translateY(-3px)}100%{transform:translateX(0) translateY(0)}}
@keyframes ctsCrab{0%,100%{transform:translateX(0) rotate(0deg)}25%{transform:translateX(14px) rotate(2deg)}50%{transform:translateX(22px) rotate(0deg)}75%{transform:translateX(9px) rotate(-2deg)}}
@keyframes ctsClaw{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-16deg)}}
@keyframes ctsPeek{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ctsPeekBub{0%{transform:translateY(0) scale(.5);opacity:0}20%{opacity:.9}100%{transform:translateY(-60px) scale(1.05);opacity:0}}
@keyframes ctsBook{0%{transform:rotate(-.6deg) translateY(0)}50%{transform:rotate(-.2deg) translateY(-5px)}100%{transform:rotate(-.6deg) translateY(0)}}
@keyframes ctsBob{0%{transform:translateY(0)}50%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes ctsSun{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* ---------- root ---------- */
.ut-root{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:linear-gradient(180deg,#8ec8ee 0,#a6d4f1 20%,#c3e4f6 40%,#d6ecf9 56%,#e4f2fb 68%);
}

/* ---------- sky: sun, clouds, gull, the motor yacht ---------- */
.ut-sky{position:absolute;left:0;right:0;top:0;height:640px;z-index:0;overflow:hidden;pointer-events:none}
.ut-sun-glow{
  position:absolute;top:-150px;left:-90px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,208,.95),rgba(255,238,190,.34) 44%,rgba(255,238,190,0) 68%);
}
.ut-sun{position:absolute;top:20px;left:24px;opacity:.5;animation:ctsSun 90s linear infinite}
.ut-cloud{position:absolute;border-radius:40px}
.ut-cloud--1{top:60px;right:12%;width:210px;height:44px;background:rgba(255,255,255,.62);filter:blur(11px);animation:ctsCloud 36s ease-in-out infinite alternate}
.ut-cloud--2{top:150px;left:14%;width:150px;height:34px;background:rgba(255,255,255,.48);filter:blur(9px);animation:ctsCloud 30s ease-in-out infinite alternate;animation-delay:-12s}
.ut-cloud--3{top:120px;right:30%;width:120px;height:26px;background:rgba(255,255,255,.4);filter:blur(8px);animation:ctsCloud 42s ease-in-out infinite alternate;animation-delay:-6s}
.ut-gull{position:absolute;top:96px;left:44%;opacity:.45;animation:ctsCloud 48s linear infinite alternate}

/* The yacht sits below the hero copy and drifts within the sky layer (z-index 0),
   so it never rides over the stage text at any width. */
.ut-yacht{position:absolute;left:5%;top:582px;animation:ctsYacht 52s ease-in-out infinite}
.ut-yacht svg{opacity:.9}

/* ---------- stage ---------- */
.ut-stage{
  position:relative;z-index:10;max-width:1180px;margin:0 auto;
  padding:clamp(10px,2vw,20px) clamp(14px,4vw,40px) 0;
}

.ut-crumb{
  display:flex;align-items:center;gap:9px;
  font:700 12px/1 'Oswald',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:#1c4368;margin-bottom:clamp(14px,2vw,22px);
}
.ut-crumb a{color:#1c4368;text-decoration:none}
.ut-crumb a:hover{color:#14304e}
.ut-crumb-sep{color:#6f97bd}
.ut-crumb-now{color:#14304e}

/* ---------- hero ---------- */
.ut-hero{position:relative;max-width:860px;margin:0 auto clamp(30px,5vw,60px);text-align:center}
.ut-eyebrow{
  font:700 11px/1 'Oswald',sans-serif;letter-spacing:.3em;text-transform:uppercase;
  color:#1c4368;margin-bottom:14px;
}
/* The reveal wrapper carries the transform the script animates, which leaves the
   h1's own tilt intact instead of being overwritten by it. */
.ut-h1{
  font:700 clamp(52px,10vw,104px)/.88 'Caveat',cursive;color:#12395e;margin:0;
  transform:rotate(-1.5deg);text-shadow:0 2px 0 rgba(255,255,255,.4);
}
.ut-h1-alt{color:#0a7f92}
.ut-lede{
  font:400 clamp(16px,2vw,18.5px)/1.7 'Nunito Sans',sans-serif;color:#173049;
  margin:22px auto 0;max-width:600px;text-wrap:pretty;
}
.ut-sign{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  font:700 22px/1 'Caveat',cursive;color:#1c4368;
}

/* ---------- the log section + its sea ---------- */
.ut-log{position:relative;padding:0 0 clamp(80px,12vw,150px)}

.ut-sea{
  position:absolute;left:0;right:0;top:clamp(90px,13vw,150px);bottom:0;
  z-index:0;overflow:hidden;border-radius:30px 30px 0 0;
}
.ut-sea-body{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#40dde5 0,#17becd 24%,#0a9cb0 50%,#077e95 76%,#05576c 100%);
  animation:ctsWobble 7s ease-in-out infinite;
}
.ut-sea-caustics{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 180px at 22% 6%,rgba(233,255,255,.5),transparent 62%),
             radial-gradient(360px 150px at 82% 3%,rgba(210,255,255,.34),transparent 60%);
}
.ut-sea-deep{
  position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(3,52,66,.55));
}
.ut-swell--1{position:absolute;left:-90px;top:40px;width:1580px;height:44px;animation:ctsSwell 9s linear infinite}
.ut-swell--2{position:absolute;left:-40px;top:150px;width:1520px;height:40px;animation:ctsSwell2 12s linear infinite}

.ut-glint{position:absolute;height:4px;border-radius:3px}
.ut-glint--1{left:16%;top:16%;width:120px;background:rgba(233,255,255,.5)}
.ut-glint--2{left:64%;top:26%;width:80px;background:rgba(233,255,255,.4)}
.ut-glint--3{left:40%;top:40%;width:150px;background:rgba(233,255,255,.36)}

/* kelp — foreground sharp, background faded */
.ut-kelp{position:absolute;transform-origin:50% 100%}
.ut-kelp--1{left:3%;bottom:-16px;animation:ctsKelp 6s ease-in-out infinite}
.ut-kelp--2{right:5%;bottom:-16px;animation:ctsKelp2 6.8s ease-in-out infinite}
.ut-kelp--3{left:11%;bottom:-14px;opacity:.7;animation:ctsKelp2 7.5s ease-in-out infinite}
.ut-kelp--4{left:18%;bottom:-10px;opacity:.42;animation:ctsKelp 8.5s ease-in-out infinite}
.ut-kelp--5{right:15%;bottom:-10px;opacity:.38;animation:ctsKelp2 9s ease-in-out infinite}

/* fish — one-way drift. ctsSwimR/ctsSwimL animate `left`, so the `left` below
   only positions them before the animation takes over (and under reduced motion). */
.ut-fish{position:absolute}
.ut-flip{transform:scaleX(-1)}

/* far tier: flat silhouettes, faint, blurred, slowest, no bob */
.ut-fish--shark{top:33%;left:60%;width:208px;opacity:.3;filter:blur(2.2px);animation:ctsSwimL 50s linear infinite;animation-delay:-10s}
.ut-fish--far-a{top:47%;left:20%;width:62px;opacity:.42;filter:blur(1.5px);animation:ctsSwimR 38s linear infinite;animation-delay:-6s}
.ut-fish--far-b{top:25%;left:78%;width:56px;opacity:.38;filter:blur(1.7px);animation:ctsSwimL 41s linear infinite;animation-delay:-25s}

/* mid tier: muted two-tone, slight blur, gentle bob */
.ut-fish--mid-a{top:60%;left:42%;width:146px;opacity:.58;filter:blur(.7px);animation:ctsSwimR 46s linear infinite;animation-delay:-14s}
.ut-fish--mid-b{top:55%;left:34%;width:82px;opacity:.72;filter:blur(.5px);animation:ctsSwimR 30s linear infinite;animation-delay:-8s}
.ut-fish--mid-c{top:20%;left:66%;width:76px;opacity:.68;filter:blur(.6px);animation:ctsSwimL 33s linear infinite;animation-delay:-20s}

/* near tier: full colour + linework, tack sharp, fastest */
.ut-fish--near-a{top:50%;left:12%;width:106px;animation:ctsSwimR 24s linear infinite;animation-delay:-3s}
.ut-fish--near-b{top:68%;left:82%;width:96px;animation:ctsSwimL 26s linear infinite;animation-delay:-16s}

.ut-bob--a{animation:ctsFishBob 6s ease-in-out infinite}
.ut-bob--b{animation:ctsFishBob 3.6s ease-in-out infinite}
.ut-bob--c{animation:ctsFishBob 3.9s ease-in-out infinite}
.ut-bob--d{animation:ctsFishBob 3.2s ease-in-out infinite}
.ut-bob--e{animation:ctsFishBob 3.4s ease-in-out infinite}

/* coral — seafloor features. Near ones sway in place; far ones are blurred and
   still. Nothing here travels. */
.ut-coral{position:absolute}
.ut-coral--1{left:6%;bottom:-6px;transform-origin:50% 100%;animation:ctsCoral 8s ease-in-out infinite}
.ut-coral--2{right:9%;bottom:-6px;transform-origin:50% 100%;animation:ctsCoral 9.5s ease-in-out infinite;animation-delay:-3s}
.ut-coral--3{left:24%;bottom:-4px;opacity:.6;filter:blur(.6px)}
.ut-coral--4{right:30%;bottom:-2px;opacity:.34;filter:blur(1.5px)}

/* bubble streams */
.ut-bub{position:absolute;bottom:0;border-radius:50%}
.ut-bub--1{left:26%;width:14px;height:14px;--bx:16px;animation:ctsBub 6.5s ease-in infinite;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95),rgba(255,255,255,.14) 62%,rgba(255,255,255,0) 72%)}
.ut-bub--2{left:29%;width:9px;height:9px;--bx:-10px;animation:ctsBub 5.2s ease-in infinite;animation-delay:1.4s;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9),rgba(255,255,255,.12) 62%,rgba(255,255,255,0) 72%)}
.ut-bub--3{left:74%;width:12px;height:12px;--bx:14px;animation:ctsBub 7.4s ease-in infinite;animation-delay:.6s;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.92),rgba(255,255,255,.12) 62%,rgba(255,255,255,0) 72%)}
.ut-bub--4{left:46%;width:10px;height:10px;--bx:-12px;animation:ctsBub 6.8s ease-in infinite;animation-delay:2.2s;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9),rgba(255,255,255,.12) 62%,rgba(255,255,255,0) 72%)}
.ut-bub--5{left:58%;width:8px;height:8px;--bx:12px;animation:ctsBub 5.8s ease-in infinite;animation-delay:3.4s;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.88),rgba(255,255,255,.1) 62%,rgba(255,255,255,0) 72%)}
.ut-bub--6{left:84%;width:11px;height:11px;--bx:-8px;animation:ctsBub 7s ease-in infinite;animation-delay:1s;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9),rgba(255,255,255,.12) 62%,rgba(255,255,255,0) 72%)}
.ut-bub--7{left:12%;width:7px;height:7px;--bx:10px;animation:ctsBub 6.2s ease-in infinite;animation-delay:2.8s;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85),rgba(255,255,255,.1) 62%,rgba(255,255,255,0) 72%)}

/* the crab sidling the near edge */
.ut-crab{
  position:absolute;z-index:14;
  left:clamp(16px,8vw,120px);bottom:clamp(30px,7vw,96px);
  animation:ctsCrab 9s ease-in-out infinite;
}
.ut-claw{transform-origin:26px 34px;animation:ctsClaw 3.2s ease-in-out infinite}
.ut-claw--r{transform-origin:70px 34px;animation-delay:.5s}

/* ---------- the open log page ---------- */
.ut-page-wrap{position:relative;z-index:12;max-width:760px;margin:0 auto}
.ut-book{position:relative;animation:ctsBook 9s ease-in-out infinite;transform-origin:50% 30%}
.ut-sheet{
  position:relative;overflow:hidden;border-radius:4px;
  background:linear-gradient(158deg,#fffdf7 0,#f6efdd 55%,#f0e7cf 100%);
  border:1px solid rgba(90,66,30,.24);
  box-shadow:0 4px 6px -2px rgba(30,16,6,.3),
             28px 40px 64px -30px rgba(10,45,70,.62),
             0 2px 0 rgba(255,255,255,.5) inset;
}
.ut-grain{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)'/%3E%3C/svg%3E");
}
.ut-rules{
  position:absolute;left:0;right:0;top:120px;bottom:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(20,48,78,.11) 33px 34px);
}
.ut-margin{
  position:absolute;left:clamp(40px,7vw,74px);top:0;bottom:0;width:2px;z-index:0;
  background:rgba(168,67,42,.22);pointer-events:none;
}
.ut-holes{
  position:absolute;left:clamp(16px,3vw,28px);top:0;bottom:0;z-index:0;
  display:flex;flex-direction:column;justify-content:space-evenly;padding:60px 0;
}
.ut-holes span{
  width:15px;height:15px;border-radius:50%;
  background:#8ec8ee;box-shadow:inset 0 2px 3px rgba(10,45,70,.4);
}
.ut-sheet-inner{
  position:relative;z-index:1;
  padding:clamp(26px,4vw,40px) clamp(26px,4.5vw,52px) clamp(30px,4vw,46px) clamp(58px,9vw,104px);
}

.ut-log-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ut-log-meta{
  font:600 10.5px/1.4 'Oswald',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8a5a34;
}
.ut-log-meta--r{letter-spacing:.14em;text-align:right}
.ut-log-h2{
  font:700 clamp(30px,5vw,46px)/.9 'Oswald',sans-serif;letter-spacing:.01em;
  text-transform:uppercase;color:#173049;margin:12px 0 0;
}
.ut-rule-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.ut-rule{height:3px;flex:1;background:#173049}
.ut-rule--thin{height:1.5px}
.ut-rule-note{font:600 19px/1 'Caveat',cursive;color:#8a5a34;white-space:nowrap}
.ut-log-intro{font:400 15px/1.65 'Nunito Sans',sans-serif;color:#3a4c5e;margin:16px 0 0;max-width:520px}

/* ---------- the one penciled sample ---------- */
.ut-sample{margin:clamp(26px,3.5vw,38px) 0 0}
.ut-sample-kicker{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.ut-sample-kicker span{
  font:700 10px/1 'Oswald',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#7a8794;
}
.ut-tilt-wrap{perspective:1100px;animation:ctsBob 8s ease-in-out infinite;max-width:560px}
.ut-tilt-card{
  position:relative;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  border:2.5px dashed #9aa7b2;border-radius:8px;
  background:linear-gradient(158deg,#f3f6f4 0,#e9efec 60%,#e3ebe8 100%);
  box-shadow:0 26px 48px -20px rgba(10,35,70,.5);
}
.ut-pin{position:absolute;top:-11px;left:50%;transform:translate(-50%,0) translateZ(30px);z-index:6}
.ut-pin-head{
  width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#8fb7d6,#3f6f96 62%);
  box-shadow:0 4px 7px rgba(10,35,70,.4);border:1.5px solid #2c5578;
}
.ut-stamp{position:absolute;top:14px;right:-6px;transform:rotate(-9deg) translateZ(46px);z-index:7;color:#5b6b7a}
.ut-stamp-box{
  position:relative;overflow:hidden;text-align:center;
  border:3px solid #5b6b7a;border-radius:7px;padding:7px 15px 5px;
  background:rgba(243,246,244,.35);
}
.ut-stamp-noise{
  position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='ms'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ms)'/%3E%3C/svg%3E");
}
.ut-stamp-ship{font:700 7.5px/1 'Oswald',sans-serif;letter-spacing:.2em;text-transform:uppercase}
.ut-stamp-bar{height:2px;background:#5b6b7a;width:66%;margin:3px auto}
.ut-stamp-word{font:700 24px/.92 'Oswald',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.ut-stamp-sub{font:700 7.5px/1 'Oswald',sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-top:4px}

.ut-sample-grid{
  position:relative;z-index:2;padding:clamp(20px,3vw,30px);
  display:grid;grid-template-columns:1fr 190px;gap:clamp(16px,2.4vw,26px);align-items:center;
}
.ut-sample-words{transform:translateZ(14px)}
.ut-sample-kick2{
  font:700 10px/1 'Oswald',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:#7a8794;margin-bottom:7px;
}
.ut-sample-title{font:700 clamp(30px,4.6vw,42px)/.92 'Caveat',cursive;color:#3c4b5a}
.ut-sample-when{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  font:700 13px/1 'Oswald',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#4a6072;
  border:1.5px solid #b3bfc9;border-radius:30px;padding:6px 12px;background:rgba(255,255,255,.4);
}
.ut-sample-body{font:400 14px/1.6 'Nunito Sans',sans-serif;color:#48586a;margin:14px 0 0;max-width:300px;text-wrap:pretty}
.ut-sample-doodle{transform:translateZ(26px)}
/* sized here, not on the element — SVG's height attribute rejects `auto` */
.ut-sample-doodle svg{display:block;width:100%;height:auto;overflow:visible}
.ut-doodle-sun{transform-origin:158px 34px;animation:ctsSun 60s linear infinite}
.ut-doodle-boat{transform-origin:74px 132px;animation:ctsPeek 4.5s ease-in-out infinite}

.ut-sample-caption{display:flex;align-items:flex-start;gap:9px;margin-top:16px;max-width:560px}
.ut-sample-caption svg{flex:none;margin-top:1px}
.ut-sample-caption p{font:400 12.5px/1.55 'Nunito Sans',sans-serif;color:#4a5a68;margin:0}
.ut-sample-caption strong{color:#3c4b5a}

/* The fully-blank state. Dormant — the script only shows it if the sample is
   ever pulled, so the page still reads honestly with nothing penciled in. */
.ut-empty-note{
  display:none;margin:clamp(24px,3.5vw,36px) 0 0;text-align:center;padding:34px 20px;
  border:1.5px dashed rgba(20,48,78,.2);border-radius:8px;
}
.ut-empty-note-h{font:700 26px/1.1 'Caveat',cursive;color:#3a4c5e}
.ut-empty-note p{font:400 13.5px/1.55 'Nunito Sans',sans-serif;color:#4a5a68;margin:8px auto 0;max-width:360px}

.ut-blank-rest{margin-top:clamp(20px,3vw,30px);display:flex;align-items:center;justify-content:center;gap:12px}
.ut-blank-rule{height:1.5px;flex:1;max-width:120px;background:rgba(20,48,78,.14)}
.ut-blank-note{font:600 15px/1 'Caveat',cursive;color:#93a0ac}

/* ---------- the single enquire CTA (the only rust on the page) ---------- */
.ut-cta-wrap{margin-top:clamp(26px,4vw,40px);display:flex;flex-direction:column;align-items:center;text-align:center}
.ut-cta-kicker{font:600 17px/1.3 'Caveat',cursive;color:#8a5a34;margin-bottom:10px}
.ut-cta{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font:800 14px/1 'Nunito Sans',sans-serif;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:#a8432a;padding:16px 28px;border-radius:3px;
  box-shadow:4px 4px 0 rgba(120,60,48,.4);
  transition:transform .14s ease,box-shadow .14s ease;
}
.ut-cta:hover{color:#fff;transform:translateY(-3px);box-shadow:4px 7px 0 rgba(120,60,48,.4)}
.ut-cta:focus-visible{outline:3px solid #ffe6ad;outline-offset:4px}
.ut-cta-fine{font:400 12.5px/1.5 'Nunito Sans',sans-serif;color:#4a5a68;margin-top:14px;max-width:380px}

/* the hopeful pufferfish peeking under the page */
.ut-peek{
  position:absolute;left:50%;bottom:clamp(-52px,-5vw,-40px);z-index:8;
  width:clamp(120px,15vw,150px);
  transform:translateX(-50%);transform-origin:50% 100%;
  pointer-events:none;
}
.ut-peek-inner{animation:ctsPeek 4.6s ease-in-out infinite}
.ut-peek svg{display:block;width:100%;height:auto}
.ut-peek-bubble{
  position:absolute;left:74%;top:-4px;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.96),rgba(255,255,255,.2) 60%,rgba(255,255,255,0) 74%);
  animation:ctsPeekBub 4s ease-in infinite;
}

/* ---------- narrow ---------- */
/* The script sets these too (off the root's measured width); this keeps the
   layout honest if it never runs. */
@media (max-width:760px){
  .ut-sample-grid{grid-template-columns:1fr}
  .ut-stamp{top:auto;bottom:16px;right:12px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .cts-anim{animation:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .ut-tilt-card{transition:none}
}