.motion-review-nav{display:flex;justify-content:center;align-items:center;gap:26px;padding:13px 20px;background:#edf5f5;border-block:1px solid #dce8e8;font-size:12px;position:relative;z-index:3}.motion-review-nav>span{font-size:10px;letter-spacing:.13em;color:#63717b}.motion-review-nav a{text-decoration:none;padding:4px 0}.motion-review-nav a[aria-current]{border-bottom:2px solid #168fa6;font-weight:600}
.home-motion #main{position:relative;isolation:isolate}.quiet-line{position:absolute;top:0;left:5px;width:42px;height:100%;pointer-events:none;z-index:2;overflow:visible;opacity:.72}.quiet-line path{transition:stroke-dashoffset .08s linear}
.hand-note{font:500 32px/1.2 Caveat,'Segoe Print',cursive;color:#187f94;letter-spacing:0;text-align:center;margin:-12px auto 30px}.home-motion #events .hand-note{color:#107c94;transform:rotate(-2deg)}.home-motion #experiences .hand-note{color:#577b18;transform:rotate(1deg)}.home-motion #transformation .hand-note{color:#187f94;transform:rotate(-1deg)}
.home-motion .hero-collage{background:#fbfcfa}.home-motion .hero-colour{opacity:.33}.home-motion .hero-event{z-index:1}.home-motion .hero-print{will-change:transform;animation:print-arrival 850ms ease-out both}.home-motion .print-corporate{transform:translate(calc(-48px * (1 - var(--hero-progress,0))),calc(24px * (1 - var(--hero-progress,0)))) rotate(calc(-13deg + 4deg * var(--hero-progress,0)))}.home-motion .print-wedding{animation-delay:120ms;transform:translate(calc(48px * (1 - var(--hero-progress,0))),calc(-24px * (1 - var(--hero-progress,0)))) rotate(calc(12deg - 4deg * var(--hero-progress,0)))}
@keyframes print-arrival{from{opacity:0}to{opacity:1}}
.home-motion #transformation figcaption a{color:inherit;text-underline-offset:5px;font-size:13px}
.digital-intro{max-width:850px;margin:auto;padding:56px 24px 34px;text-align:center}.digital-intro .eyebrow{font-size:11px;letter-spacing:.12em}.digital-intro h1{font-size:clamp(43px,5vw,68px);line-height:1.06;font-weight:500;letter-spacing:-.035em;margin:16px 0 23px}.digital-intro h1 em{font-weight:500;color:#148299}.digital-intro>p:not(.eyebrow):not(.hand-note){max-width:590px;margin:0 auto;font-size:17px;line-height:1.7;color:#54616e}.digital-intro .hand-note{margin:22px auto 0;transform:rotate(-2deg)}
.digital-lab{max-width:1020px;width:calc(100% - 64px);margin:0 auto 70px}.digital-lab .cmp{margin:0}.scene-after{position:absolute;inset:0}.scene-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.scene-guests{pointer-events:none}.digital-lab .cmp-stage{background:#e3e7ea}.digital-lab .cmp-stage img{object-fit:cover}.digital-lab .cmp figcaption{text-transform:none;letter-spacing:0;font-size:12px;color:#586975;margin:14px 0 20px}.digital-lab .lbl{background:#ffffffed;color:#172a39;border:1px solid #dce7e7;font-size:11px}.digital-lab .cmp-stage input{cursor:ew-resize}
.scene-options{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.scene-options button{font:inherit;text-align:left;background:#fff;border:1px solid #d7e1e1;border-radius:6px;padding:8px;cursor:pointer;transition:border-color .15s,background .15s}.scene-options button[aria-pressed=true]{border:2px solid #168fa6;padding:7px;background:#f0f9f9}.scene-options img{height:92px;width:100%;object-fit:cover;border-radius:3px}.scene-options span{display:block;font-size:14px;font-weight:600;margin:10px 7px 4px}.scene-options small{display:block;font-size:11px;color:#5e6d75;margin:0 7px 7px}.scene-status{text-align:center;font-size:12px;color:#12677b;margin:18px 0 8px}.demo-note{font-size:11px;text-align:center;color:#68747a;line-height:1.6;margin:0 auto;max-width:660px}
.digital-story{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding:75px max(32px,calc((100vw - 1160px)/2));background:#f5f8f5}.digital-story h2,.digital-related h2{font:500 clamp(34px,4vw,49px)/1.13 'Playfair Display',Georgia,serif;color:#14213d;margin:14px 0 24px;letter-spacing:-.025em}.digital-story p{font-size:16px;line-height:1.8;color:#53636d;max-width:470px}.digital-story .eyebrow{font-size:11px}.digital-story .btn{margin-top:16px}.digital-how h3{font:500 27px 'Playfair Display',Georgia,serif;color:#14213d;margin:0 0 22px}.digital-how p{padding:15px 0;border-top:1px solid #d5dedb;margin:0;font-size:14px}.digital-how strong{display:block;color:#127c91;margin-bottom:7px;font-size:12px}.digital-how .digital-distinction{font-size:12px}.digital-related{padding:65px 24px 85px;text-align:center}.digital-related .hand-note{margin:0 auto 25px;color:#648918}.digital-related>div{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;font-size:14px}.digital-related a{text-underline-offset:5px}
@media(max-width:760px){.quiet-line{display:none}.motion-review-nav{flex-wrap:wrap;gap:10px 22px;padding:11px 14px}.motion-review-nav>span{width:100%;text-align:center}.hand-note{font-size:27px;margin:-8px auto 26px}.home-motion .print-corporate{transform:translate(calc(-16px * (1 - var(--hero-progress,0))),calc(10px * (1 - var(--hero-progress,0)))) rotate(calc(-11deg + 2deg * var(--hero-progress,0)))}.home-motion .print-wedding{transform:translate(calc(16px * (1 - var(--hero-progress,0))),calc(-10px * (1 - var(--hero-progress,0)))) rotate(calc(10deg - 2deg * var(--hero-progress,0)))}.digital-intro{padding:36px 20px 25px}.digital-intro h1{font-size:46px}.digital-intro>p:not(.eyebrow):not(.hand-note){font-size:15px}.digital-lab{width:calc(100% - 32px);margin-bottom:45px}.scene-options{gap:8px}.scene-options img{height:62px}.scene-options span{font-size:11px;line-height:1.5;margin-inline:3px}.scene-options small{display:none}.digital-story{grid-template-columns:1fr;gap:40px;padding:45px 24px}.digital-related{padding:45px 20px}.digital-related>div{gap:20px;font-size:13px}.digital-lab .lbl{top:8px;padding:3px 7px;font-size:9px}.digital-intro .hand-note{font-size:28px}}
@media(prefers-reduced-motion:reduce){.motion-review *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.home-motion .print-corporate{transform:rotate(-9deg)}.home-motion .print-wedding{transform:rotate(8deg)}.quiet-line path{stroke-dashoffset:0!important}}
.home-motion .print-corporate{left:11%}.home-motion .print-wedding{right:11%}.quiet-line{left:0;width:28px}

.home-motion .hero-print{transform-origin:center}

.home-motion #main{overflow:hidden}.home-motion .hero{padding-right:24px}.home-motion .hero-collage{overflow:visible}.home-motion .colour-cyan{inset:2% 0 4% 32%}.home-motion .colour-lime{inset:16% 18% 8% 0}@media(max-width:760px){.home-motion .hero{padding-inline:12px}}
/* October13 preview corrections: visible connector, equal links, full media canvases. */
.home-motion .quiet-line{opacity:.95;width:28px;display:block}.home-motion .quiet-line path{stroke-width:4.5px}
.home-motion #transformation figcaption{margin-top:17px;text-transform:none;letter-spacing:0}
.home-motion #transformation figcaption a.transformation-link{font-family:Inter,system-ui,sans-serif;font-size:16px;font-weight:600;line-height:1.4;text-transform:none;letter-spacing:0;color:#087f95;display:inline-flex;align-items:center;gap:16px;padding:10px 18px;border:1px solid #087f95;border-radius:6px;text-decoration:none;background:#fff}
.home-motion #transformation figcaption a.transformation-link:hover{background:#087f95;color:#fff}.transformation-link span{font-size:20px}
.home-motion .keepsake-secondary .keepsake-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#f2eee3;border-radius:8px;width:100%}
.home-motion .keepsake-secondary .keepsake-media img,.home-motion .keepsake-secondary .keepsake-media video{display:block;position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;background:#f2eee3}
.home-motion .keepsake-secondary .keepsake-media video{opacity:0;transition:opacity .2s}.home-motion .keepsake-media.loop-playing video{opacity:1}
@media(max-width:760px){.home-motion .quiet-line{display:block;width:20px;opacity:.9}.home-motion #transformation figcaption a.transformation-link{font-size:14px;padding:10px 15px;gap:12px}}
.home-motion #transformation figcaption a.transformation-link{padding:6px 16px;border-width:1px;font-size:15px;line-height:1.3;gap:12px}.home-motion .transformation-link span{font-size:17px}@media(max-width:760px){.home-motion #transformation figcaption a.transformation-link{padding:6px 14px;font-size:14px}}
.home-motion .quiet-line{left:0;width:100%;opacity:.9}.home-motion .quiet-line path{stroke-width:1.8px}@media(max-width:760px){.home-motion .quiet-line{width:100%}.home-motion .quiet-line path{stroke-width:1.5px}}

/* Let the connecting line descend beside the handwritten introduction. */
.home-motion #events .hand-note{margin-bottom:105px}@media(max-width:760px){.home-motion #events .hand-note{margin-bottom:95px}}

/* The thread runs downward behind the event photos. */
.home-motion .quiet-line{z-index:-1}.home-motion #events .hand-note{margin-bottom:30px}@media(max-width:760px){.home-motion #events .hand-note{margin-bottom:26px}}
.home-motion .quiet-line{z-index:0}.home-motion #main section .grid4,.home-motion #main section .grid3,.home-motion #main section .cmp,.home-motion #main section h2,.home-motion #main section .hand-note{position:relative;z-index:1}
.home-motion .quiet-line path{stroke-width:2.5px}.home-motion .quiet-line{opacity:.95}
.home-motion .keepsake-feature,.home-motion .keepsake-media{position:relative;z-index:1}

/* Approved trial: trading card sample at 80% of its former dimensions. */
.home-motion .keepsake-feature{width:80%;justify-self:center}.home-motion .keepsake-feature img{max-height:496px}@media(max-width:1000px){.home-motion .keepsake-feature img{max-height:360px}}
.home-motion .hero-print{aspect-ratio:624/1844;height:auto;object-fit:cover}.home-motion .print-corporate{object-position:left center}.home-motion .print-wedding{object-position:center}
.home-motion .hero-collage .hero-print{height:70%;width:auto;max-width:none;aspect-ratio:624/1844;object-fit:cover}.home-motion .hero-event{object-fit:cover}
/* Exact source-photo crop; approved title is composited only below the photos. */
.home-motion .hero-collage .hero-print{border:0;overflow:hidden}
.home-motion .hero-print>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill}
.home-motion .hero-print>img.navy-crop{left:-3%;width:206.6667%}
.home-motion .hero-print>img.approved-title{clip-path:inset(86% 0 0 0)}
/* GIF Booth: show the complete source template rather than cropping it. */
.home-motion #experiences a[href="gif-booth.html"]{background:#14213d}
.home-motion #experiences a[href="gif-booth.html"] img,.home-motion #experiences a[href="gif-booth.html"] video{object-fit:contain;transform:none}
.home-motion #experiences a[href="gif-booth.html"]:hover img,.home-motion #experiences a[href="gif-booth.html"]:hover video{transform:none}
/* Show the catalog range in both discovery cards. */
.home-motion .backdrop-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;padding:18px;background:#e3e7ea;box-sizing:border-box}
.home-motion .backdrop-mosaic>div{min-height:0;overflow:hidden;border-radius:8px;background:#e3e7ea}
.home-motion .backdrop-mosaic img{width:100%;height:100%;object-fit:contain}
.home-motion .template-array{position:relative;background:radial-gradient(ellipse at center,#fff 0,#eef5f5 75%);overflow:hidden}
.home-motion .template-array .layout-sample{position:absolute;object-fit:contain;width:auto;box-shadow:0 9px 20px #14213d30;background:white;height:77%;top:9%;border-radius:2px}
.home-motion .template-array .sample-0{left:13%;transform:rotate(-14deg);z-index:1}
.home-motion .template-array .sample-1{left:31%;transform:rotate(-4deg);z-index:3}
.home-motion .template-array .sample-2{left:48%;transform:rotate(9deg);z-index:2}
.home-motion .template-array .sample-3{width:38%;height:auto;left:61%;top:15%;transform:rotate(11deg);z-index:1}
.home-motion .template-array .sample-4{width:42%;height:auto;left:54%;top:52%;transform:rotate(-7deg);z-index:4}
@media(max-width:560px){.home-motion .backdrop-mosaic{padding:12px;gap:6px}}
.home-motion .template-array .sample-3{width:35%;height:35%;left:62%;top:13%;object-fit:contain}.home-motion .template-array .sample-4{width:40%;height:35%;left:57%;top:56%;object-fit:contain}
.home-motion .template-array .navy-layout-crop{aspect-ratio:600/1844;overflow:hidden}
.home-motion .template-array .navy-layout-crop img{position:absolute;height:100%;width:206.6667%;max-width:none;left:-3.3333%;top:0;object-fit:fill}
.home-motion .template-array .sample-3{width:40%;height:39%;left:58%;top:9%;background:transparent;box-shadow:none}
.home-motion .template-array .sample-4{width:29%;height:56%;left:66%;top:40%;background:transparent;box-shadow:none}
/* Three light pen strokes, with varied placement beside section titles. */
.home-motion #events>.h2,.home-motion #experiences>.h2,.home-motion #transformation>.h2,.home-motion #client-proof>.h2,.home-motion #design-options>.h2{position:relative;width:fit-content;max-width:calc(100% - 86px)}
.home-motion .h2.accent:before{position:absolute;display:block;content:'';width:33px;height:43px;left:-46px;top:50%;margin:0;transform:translateY(-50%) rotate(-8deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 46'%3E%3Cpath d='M27 13 L13 3 M25 23 L5 23 M27 33 L13 43' fill='none' stroke='%2379cfdf' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.home-motion #events>.h2:before{top:35%;transform:translateY(-50%) rotate(9deg)}
.home-motion #experiences>.h2:before{left:auto;right:-46px;top:28%;transform:translateY(-50%) scaleX(-1) rotate(-12deg)}
.home-motion #transformation>.h2:before{left:-48px;top:67%;transform:translateY(-50%) rotate(-14deg)}
.home-motion #client-proof>.h2:before{left:auto;right:-48px;top:67%;transform:translateY(-50%) scaleX(-1) rotate(12deg)}
.home-motion #design-options>.h2:before{left:-43px;top:22%;transform:translateY(-50%) rotate(17deg)}
@media(max-width:560px){.home-motion .h2.accent:before{width:27px;height:35px}.home-motion #events>.h2,.home-motion #experiences>.h2,.home-motion #transformation>.h2,.home-motion #client-proof>.h2,.home-motion #design-options>.h2{max-width:calc(100% - 72px)}}
