/* ==========================================================================
   Scenes: Storyset illustrations (recoloured to the brand palette), duotone
   stock photos, parallax depth and objects that cross section borders.
   Everything here is decoration (aria-hidden in the markup).
   ========================================================================== */

:root {
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --halo: radial-gradient(closest-side, rgba(243, 178, 11, 0.3), rgba(243, 178, 11, 0.1) 52%, transparent 72%);
  --jag: polygon(0.00% 1.0%,4.17% 3.0%,8.33% 6.1%,12.50% 3.3%,16.67% 6.3%,20.83% 5.8%,25.00% 6.7%,29.17% 3.6%,33.33% 5.9%,37.50% 5.8%,41.67% 7.5%,45.83% 1.9%,50.00% 7.5%,54.17% 5.5%,58.33% 7.4%,62.50% 3.6%,66.67% 6.9%,70.83% 2.1%,75.00% 4.0%,79.17% 7.6%,83.33% 6.1%,87.50% 1.4%,91.67% 4.9%,95.83% 4.0%,100.00% 7.4%,100.00% 98.4%,95.83% 93.5%,91.67% 95.7%,87.50% 97.3%,83.33% 95.8%,79.17% 96.5%,75.00% 93.7%,70.83% 97.0%,66.67% 92.4%,62.50% 95.3%,58.33% 97.7%,54.17% 95.6%,50.00% 96.8%,45.83% 96.0%,41.67% 98.4%,37.50% 94.3%,33.33% 94.3%,29.17% 94.1%,25.00% 94.1%,20.83% 95.9%,16.67% 98.1%,12.50% 93.9%,8.33% 95.6%,4.17% 93.4%,0.00% 92.4%);
}

/* ---------- building blocks ---------- */
.scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.px {
  position: absolute; inset-inline: 0; bottom: 0; pointer-events: none; direction: ltr;
  transform: translate3d(0, var(--py, 0px), 0); will-change: transform;
}
.tiles-row { position: relative; left: 50%; display: flex; align-items: flex-end; width: max(100%, 1500px); max-width: none; transform: translateX(-50%); }
.tiles-row .t { flex: 1 1 0; min-width: 0; height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom; }
.tiles-row .t--flip { transform: scaleX(-1); }
.tiles-row--far { height: clamp(230px, 27vw, 430px); opacity: 0.5; -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%); mask-image: linear-gradient(to top, #000 45%, transparent 100%); }
.tiles-row--mid { height: clamp(150px, 17vw, 270px); }
.cross { position: absolute; z-index: 5; height: auto; max-width: none; pointer-events: none; }

/* film grain: a little texture on every flat surface */
.hero::after, .sec--black::after, .footer::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grain-light); opacity: 0.08;
}
.sec--white::after, .sec--amber::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grain-dark); opacity: 0.1;
}
.sec > .container, .footer > .container { position: relative; z-index: 2; }

@keyframes breathe { 0%, 100% { opacity: 0.85; transform: translate(-50%, -35%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -35%) scale(1.06); } }
@keyframes drive { from { transform: translateX(105vw); } to { transform: translateX(-115%); } }
@keyframes bobble { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes mkring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes drawin { to { clip-path: inset(0 0 0 0); } }
@keyframes dashmove { to { stroke-dashoffset: -48; } }
@keyframes arrownudge { 0%, 100% { translate: 0 0; } 50% { translate: 10px -6px; } }

/* the truck: Storyset pick-up, wheels sit on the road */
.truck {
  position: absolute; left: 0; z-index: 2; max-width: none;
  width: var(--tw, 300px); height: auto;
  bottom: calc(var(--rh) * 0.5);
  animation: drive var(--drive, 28s) linear infinite, bobble 0.5s ease-in-out infinite;
  filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1px #000);
}
#trip-truck image { filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1px #000); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  --tw: clamp(230px, 25vw, 500px);
  --rh: clamp(54px, 6vw, 84px);
  padding-bottom: calc(var(--tw) * 0.6 + var(--rh) + 40px);
}
.hero__halo {
  position: absolute; left: 50%; top: 22%; width: min(1100px, 130vw); aspect-ratio: 1;
  transform: translate(-50%, -35%); background: var(--halo);
  animation: breathe 7s ease-in-out infinite;
}
.px--far  { bottom: calc(var(--rh) + clamp(10px, 2vw, 40px)); }
.px--mid  { bottom: calc(var(--rh) * 0.45); }
.px--near { bottom: 0; }
.hero__road { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; height: var(--rh); background: #0a0a0a; border-top: 6px solid var(--amber-dark); }
.hero__road::before { content: ""; position: absolute; inset-inline: 0; top: 52%; height: 4px; opacity: 0.7; background: repeating-linear-gradient(90deg, #fff 0 36px, transparent 36px 78px); }
.hero__worker { position: absolute; z-index: 1; left: 2vw; bottom: calc(var(--rh) * 0.35); width: clamp(190px, 23vw, 420px); height: auto; max-width: none; }
.hero__mark {
  width: clamp(104px, 11vw, 158px); height: auto; aspect-ratio: 1;
  padding: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 5px rgba(243, 178, 11, 0.45), 0 0 60px rgba(243, 178, 11, 0.35);
}
.hero__tools { z-index: 1; }
.tool { position: absolute; left: var(--x); top: var(--y); width: var(--s, 90px); height: auto; max-width: none; --r: 0deg; transform: rotate(var(--r)); animation: float var(--t, 6s) ease-in-out var(--d, 0s) infinite; }
.cross--hero { right: 4%; bottom: calc(-1 * clamp(36px, 5vw, 70px)); width: clamp(150px, 18vw, 300px); }

/* ==========================================================================
   Services: tool wall photo, worker, halo
   ========================================================================== */
.sec--white {
  background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.svc__halo { position: absolute; left: 50%; top: 30%; width: min(1300px, 130vw); aspect-ratio: 1; transform: translate(-50%, -30%); background: var(--halo); opacity: 0.8; }
.svc__stage { position: relative; z-index: 1; height: clamp(260px, 31vw, 440px); margin-top: -0.4rem; }
.svc__photo { position: absolute; inset-inline: 0; top: 0; height: 84%; clip-path: var(--jag); }
.svc__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc__worker { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: clamp(260px, 34vw, 500px); height: auto; max-width: none; }
.tiles { margin-top: -1.2rem; }
.tile:hover, .tile:focus-visible { transform: translateY(-7px) rotate(-1.4deg); box-shadow: 0 18px 38px rgba(243, 178, 11, 0.6), 0 0 0 2px #000; }
.tiles li:nth-child(even) .tile:hover, .tiles li:nth-child(even) .tile:focus-visible { transform: translateY(-7px) rotate(1.2deg); }
.cross--svc { left: 4%; bottom: calc(-1 * clamp(40px, 5vw, 70px)); width: clamp(100px, 12vw, 190px); }

/* ==========================================================================
   Fix vs move: photos in the diagonal halves, illustrations near the diagonal
   ========================================================================== */
.duo__photos { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; }
.duo__photo { position: absolute; inset: 0; }
.duo__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duo__photo--move { clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); }
.duo__photo--move img { opacity: 0.5; mix-blend-mode: multiply; }
.duo__photo--fix { clip-path: polygon(52% 0, 100% 0, 100% 100%, 44% 100%); }
.duo__photo--fix img { opacity: 0.8; filter: brightness(0.62); }
.duo__art { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.duo__grid { z-index: 2; }
.duo__px { inset-inline: auto; bottom: calc(-1 * clamp(40px, 6vw, 90px)); }
.duo__px--fix  { left: calc(50% + 1vw); width: clamp(240px, 24vw, 420px); }
.duo__px--move { right: calc(50% + 0.5vw); width: clamp(240px, 24vw, 420px); }
.duo__obj { display: block; width: 100%; height: auto; max-width: none; }

@media (min-width: 1100px) { .duo__photos { display: block; } }
/* below 1100px the panels stack and take their photo as a backdrop */
@media (max-width: 1099.98px) {
  .duo__stage { display: flex; flex-direction: column; }
  .duo__grid { order: 1; }
  .duo__art { order: 2; position: relative; inset: auto; height: clamp(110px, 24vw, 200px); margin-top: 1rem; }
  .duo__px { bottom: -70px; width: clamp(180px, 42vw, 320px); }
  .duo__px--fix  { left: calc(50% + 2vw); }
  .duo__px--move { right: calc(50% + 2vw); }
  .panel--fix { background-image: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url("../assets/photos/duo-fix.webp"); background-size: cover; background-position: center; }
  .panel--move { background-image: linear-gradient(rgba(243, 178, 11, 0.5), rgba(243, 178, 11, 0.5)), url("../assets/photos/duo-move.webp"); background-size: cover; background-position: center; }
}

/* ==========================================================================
   Lead form: dark workshop photo, grid to the horizon, 24/7 illustration
   ========================================================================== */
.leadsec { padding-top: clamp(110px, 12vw, 200px); }
.leadsec__halo { position: absolute; left: 50%; top: 52%; width: min(1200px, 130vw); aspect-ratio: 1; transform: translate(-50%, -40%); background: var(--halo); opacity: 0.75; pointer-events: none; z-index: 0; }
.leadsec__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 62%, transparent 100%); }
.leadsec__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leadsec::before {
  height: 92%;
  background:
    linear-gradient(180deg, rgba(243, 178, 11, 0.55) 0 2px, transparent 2px) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, rgba(184, 115, 0, 0.5) 1px, transparent 1px) 0 0 / 90px 100%,
    linear-gradient(180deg, rgba(184, 115, 0, 0.5) 1px, transparent 1px) 0 0 / 100% 54px;
  transform: perspective(480px) rotateX(70deg);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 96%); mask-image: linear-gradient(to top, #000 30%, transparent 96%);
}
.lead__ill { position: relative; z-index: 2; display: block; width: min(70%, 280px); height: auto; margin: 0 auto 0.4rem; max-width: none; }
@media (min-width: 1500px) {
  .lead__ill { position: absolute; z-index: 1; left: 2vw; bottom: 8%; width: clamp(280px, 22vw, 420px); margin: 0; }
}
.hand { font-size: clamp(3.9rem, 15vw, 5.6rem); line-height: 1.02; text-wrap: balance; }
@media (min-width: 760px) {
  .hand { white-space: nowrap; width: 100vw; margin-left: 0; margin-right: calc(50% - 50vw); font-size: min(9rem, 9.6vw); text-wrap: nowrap; }
}
.hand svg { width: min(78%, 560px); height: 28px; }
.js .hand__txt { display: inline-block; clip-path: inset(0 100% 0 0); }
.js .hand.in .hand__txt { animation: drawin 1.5s cubic-bezier(0.6, 0.1, 0.2, 1) 0.25s forwards; }
.submit-wrap { position: relative; }
.hand-arrow { display: none; }
@media (min-width: 1100px) {
  .hand-arrow { display: block; position: absolute; right: calc(100% + 6px); top: -34px; width: 120px; height: auto; pointer-events: none; animation: arrownudge 2.2s ease-in-out infinite; }
}
.cross--lead { left: 7%; bottom: calc(-1 * clamp(50px, 6vw, 90px)); width: clamp(70px, 8vw, 130px); }

/* ==========================================================================
   How it works: Storyset on each step, a painted road with a driving truck
   ========================================================================== */
.step { padding-top: 2.2rem; }
.step__num { position: absolute; top: 0.6rem; inset-inline-start: 1.1rem; font-size: 3.4rem; line-height: 1; }
.step__ill { display: block; width: min(200px, 70%); height: auto; margin: 0 auto 0.3rem; max-width: none; }
.step:nth-child(1) { rotate: -1.6deg; }
.step:nth-child(2) { rotate: 1.2deg; margin-top: 26px; }
.step:nth-child(3) { rotate: -0.8deg; }
.trip { display: block; width: 100%; height: auto; overflow: visible; margin-top: -4px; position: relative; z-index: 1; }
.trip__dash { animation: dashmove 1.4s linear infinite; }
#trip-truck { will-change: transform; }
.cross--how { right: 7%; bottom: calc(-1 * clamp(70px, 9vw, 140px)); width: clamp(90px, 10vw, 160px); }

/* ==========================================================================
   Why us: two houses, every reason points at a part of them
   ========================================================================== */
.why__halo { position: absolute; left: 50%; top: 52%; width: min(1300px, 140vw); aspect-ratio: 1; transform: translate(-50%, -40%); background: var(--halo); opacity: 0.7; }
.why__stage { position: relative; }
.why__art { position: relative; width: 100%; aspect-ratio: 1024 / 520; }
.why__house { position: absolute; left: 25.5%; top: 5%; width: 49%; height: auto; max-width: none; }
.why__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.why__marks .lead-line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 6 7; opacity: 0.75; }
.mk__ring { transform-box: fill-box; transform-origin: center; animation: mkring 2.2s ease-out infinite; }
.mk:nth-of-type(2n) .mk__ring { animation-delay: -0.8s; }
.reasons { margin-top: 1.6rem; }
.cross--why { left: 9%; bottom: calc(-1 * clamp(40px, 5vw, 80px)); width: clamp(110px, 13vw, 210px); }

@media (max-width: 999.98px) {
  .why__artwrap { display: flex; justify-content: center; }
  .why__art { flex: none; width: min(150%, 680px); }
  .why__marks .lead-line, .why__marks circle[r="5"] { display: none; }
  .why__marks text { font-size: 22px; }
}
@media (min-width: 1000px) {
  .reasons { position: absolute; inset: 0; margin: 0; display: block; }
  .reason { position: absolute; width: 25%; grid-template-columns: auto 1fr; grid-template-areas: "num icon" "h h" "p p"; gap: 0.2rem 0.9rem; align-items: center; }
  .reason__num { grid-area: num; grid-row: auto; font-size: 3.7rem; }
  .reason__icon { grid-area: icon; justify-self: start; margin: 0; }
  .reason h3 { grid-area: h; }
  .reason p { grid-area: p; }
  .reason--1 { right: 0; top: 0%; }
  .reason--2 { right: 0; top: 36%; }
  .reason--3 { right: 0; top: 70%; }
  .reason--4 { left: 0; top: 6%; }
  .reason--5 { left: 0; top: 38%; }
  .reason--6 { left: 0; top: 68%; }
}

/* ==========================================================================
   Reviews: dark mosaic + Storyset people on the sides, tilted cards
   ========================================================================== */
.reviews { background: #000 url("../assets/scenes/mosaic.svg") center top / 1200px auto repeat; }
.rev__ill { position: absolute; display: none; height: auto; max-width: none; width: clamp(240px, 21vw, 400px); }
.rev__ill--l { left: 1vw; top: 30%; }
.rev__ill--r { right: 1vw; top: 34%; }
@media (min-width: 1500px) { .rev__ill { display: block; } }
.rev__inline { display: block; width: min(64%, 270px); height: auto; margin: -0.4rem auto 1.4rem; max-width: none; }
@media (min-width: 1500px) { .rev__inline { display: none; } }
.rcard { transition: var(--ease), rotate 0.3s ease; }
.rcard:nth-child(1) { rotate: -2.4deg; }
.rcard:nth-child(2) { rotate: 1.5deg; margin-top: 14px; }
.rcard:nth-child(3) { rotate: 2deg; }
.rcard:nth-child(4) { rotate: -1.3deg; margin-top: 14px; }
.rcard:hover { rotate: 0deg; }
.rating .rating__n { font: 900 3.6rem / 1 var(--f-body); color: var(--amber); letter-spacing: -0.02em; }
.rating .rating__n small { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: 0; margin-inline-start: 0.12em; }
.cross--rev { right: 10%; bottom: calc(-1 * clamp(70px, 9vw, 140px)); width: clamp(60px, 7vw, 110px); }

/* ==========================================================================
   Service area: a framed photo of the coast with the Storyset map figure
   ========================================================================== */
.area__grid { position: relative; z-index: 2; display: grid; gap: 2.4rem; align-items: center; grid-template-columns: 1fr; }
.area__photo { position: relative; margin: 0 0 2.4rem; border: 3px solid #000; border-radius: 30px; box-shadow: var(--shadow-light); rotate: -1.2deg; background: #000; }
.area__photo > img:first-child { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 27px; }
.area__ill { position: absolute; right: -3%; bottom: -16%; width: min(56%, 300px); height: auto; max-width: none; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35)); }
.area__text { display: grid; gap: 1.1rem; justify-items: start; }
.area__text p { font-size: 1.1875rem; color: var(--ink-soft); max-width: 36rem; }
@media (min-width: 860px) { .area__grid { grid-template-columns: 1.15fr 1fr; gap: 3.4rem; } .area__photo { margin: 0; } }
.cross--area { left: 5%; bottom: calc(-1 * clamp(50px, 6vw, 100px)); width: clamp(150px, 18vw, 290px); }

/* ==========================================================================
   Footer: the city again, big, with the truck crossing it
   ========================================================================== */
.footscene { --rh: clamp(42px, 5vw, 70px); --tw: clamp(180px, 20vw, 380px); --drive: 22s; position: relative; z-index: 1; height: clamp(230px, 24vw, 400px); overflow: hidden; margin-top: -6px; pointer-events: none; }
.footscene .tiles-row--far { height: clamp(170px, 20vw, 330px); opacity: 0.55; }
.footscene .tiles-row--mid { height: clamp(110px, 13vw, 210px); }
.footscene .px--mid  { bottom: calc(var(--rh) * 0.5); }
.footscene .px--near { bottom: 0; }
.footscene__road { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; height: var(--rh); background: #0a0a0a; border-top: 5px solid var(--amber-dark); }
.footscene__road::before { content: ""; position: absolute; inset-inline: 0; top: 52%; height: 3px; opacity: 0.6; background: repeating-linear-gradient(90deg, #fff 0 30px, transparent 30px 68px); }
.footscene .truck { animation-delay: -9s, 0s; }
.footer__links small a { color: var(--amber-light); }

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 1199.98px) {
  .hero__tools .tool:nth-child(n+3) { display: none; }
  .hero__tools .tool { width: calc(var(--s) * 0.6); top: 6%; }
  .hero__worker { display: none; }
}
@media (min-width: 900px) and (max-width: 1199.98px) { .hero__worker { display: block; width: clamp(170px, 19vw, 260px); } }
@media (max-width: 899.98px) {
  .logo-tab { transition: var(--ease), transform 0.35s ease; }
  body.scrolled .logo-tab { transform: translateY(-125%); }
}
@media (max-width: 759.98px) {
  .step:nth-child(n) { rotate: 0deg; margin-top: 0; }
  .rcard:nth-child(n) { rotate: 0deg; margin-top: 0; }
  .rcard:nth-child(odd) { rotate: -1deg; }
  .rcard:nth-child(even) { rotate: 1deg; }
  .svc__stage { height: clamp(220px, 62vw, 330px); }
  .tiles { margin-top: -0.4rem; }
  .area__photo { rotate: 0deg; margin-bottom: 3.2rem; }
}
@media (max-width: 599.98px) {
  .hero { --tw: 230px; }
  .tiles-row { width: max(100%, 1100px); }
  .hero__mark { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .truck { animation: none; left: auto; right: 6%; transform: none; }
  .js .hand__txt { clip-path: none; animation: none; }
  .px { transform: none; }
  .hand-arrow { animation: none; }
}