/* Laudo MIX: motion layer. Everything is scoped under .motion, which site.js adds only when reduced motion is off. */

/* Header: compacts and turns solid on scroll; reading progress bar. */
.site-header{transition:background .35s ease,box-shadow .35s ease,border-color .35s ease,margin-bottom .35s ease}
.header-inner{transition:min-height .35s ease}
.site-header.is-scrolled{background:#121414;border-bottom-color:#e1b7652e;box-shadow:0 10px 30px #0006}
@media(min-width:961px){.site-header.is-scrolled{margin-bottom:18px}.site-header.is-scrolled .header-inner{min-height:70px}}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--gold-muted),var(--gold));transform:scaleX(var(--progress,0));transform-origin:left;pointer-events:none}

/* Hero: title enters word by word, gold words get one light sweep. */
.hero h1,.hero-description{text-wrap:balance}
.motion .hero h1:not(.is-split){opacity:0;animation:title-fallback 0s 2s forwards}
.motion .hero h1.is-split{animation:none}
@keyframes title-fallback{to{opacity:1}}
.motion .hero h1 .w{display:inline-block;animation:word-in .75s cubic-bezier(.2,.65,.25,1) both;animation-delay:calc(var(--i) * 60ms + 120ms)}
.motion .hero h1 em .w{background:linear-gradient(110deg,var(--gold) 0 38%,#f8e7bd 50%,var(--gold) 62% 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:word-in .75s cubic-bezier(.2,.65,.25,1) both,word-shine 1.5s ease-in-out both;animation-delay:calc(var(--i) * 60ms + 120ms),calc(var(--i) * 90ms + 900ms)}
@keyframes word-in{from{opacity:0;transform:translateY(.42em)}to{opacity:1;transform:none}}
@keyframes word-shine{from{background-position:100% 0}to{background-position:0 0}}

/* Hero: depth that follows the pointer (desktop) or the scroll (touch). */
.motion .portrait-frame,.motion .hero-atmosphere,.motion .technical-note{will-change:translate}

/* Hero: scroll cue (desktop only). */
.scroll-cue{display:none}
@media(min-width:961px){
  .hero-layout{position:relative}
  .scroll-cue{position:absolute;left:0;bottom:26px;z-index:3;display:flex;align-items:center;gap:12px;color:#8f9893;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;transition:color .25s ease}
  .scroll-cue:hover{color:var(--gold)}
  .scroll-cue i{position:relative;width:1px;height:34px;background:#ffffff1f;overflow:hidden}
  .scroll-cue i:after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(--gold)}
  .motion .scroll-cue{animation:hero-enter .8s .6s ease both}
  .motion .scroll-cue i:after{animation:cue-drop 2.2s 1.4s cubic-bezier(.6,0,.3,1) infinite}
}
@keyframes cue-drop{0%{transform:translateY(-14px)}60%,100%{transform:translateY(34px)}}

/* Main call-to-action buttons: a light sweep every few seconds. */
.motion .button-shine{position:relative;overflow:hidden;isolation:isolate}
.motion .button-shine:after{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:40%;background:linear-gradient(105deg,transparent,#ffffff3d,transparent);transform:translateX(-120%) skewX(-18deg);animation:button-shine 7s 2.6s ease-in-out infinite;pointer-events:none}
@keyframes button-shine{0%{transform:translateX(-120%) skewX(-18deg)}16%,100%{transform:translateX(300%) skewX(-18deg)}}

/* Services: touch feedback. */
@media(hover:none){
  .service-card,.complementary-services article,.audience-grid article{transition:border-color .25s ease,background .25s ease}
  .service-card:active,.complementary-services article:active{border-color:#65573a}
  .audience-grid article:active{background:#252e27;border-color:#70613d}
}

/* Services: swipeable carousel on phones. */
.carousel-dots{display:none}
:root{--gutter:20px}
@media(max-width:480px){:root{--gutter:18px}}
@media(max-width:740px){
  .js .services-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 6px;scroll-padding-inline:var(--gutter);align-items:flex-start}
  .js .services-grid::-webkit-scrollbar{display:none}
  .js .services-grid>.service-card{flex:0 0 min(86%,420px);scroll-snap-align:start}
  .js .services-grid>.service-card.reveal-pending{opacity:1;transform:none}
  .js .service-card .service-image img{transition:transform .6s ease}
  .js .service-card.is-current .service-image img{transform:scale(1.04)}
  .js .service-card .service-body>p[data-service-description]{min-height:0}
  .carousel-dots{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:14px}
  .carousel-dots button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
  .carousel-dots button:before{content:"";width:7px;height:7px;border-radius:4px;background:#4a514e;transition:width .3s ease,background .3s ease}
  .carousel-dots button[aria-current=true]:before{width:22px;background:var(--gold)}
}

/* Expanding panels: icon flips immediately while the panel animates closed. */
.service-detail.is-closing summary:after,.faq-list details.is-closing summary:after{content:"+"}
.faq-list details.is-closing summary{color:inherit}

/* How it works: a gold line draws across each step as the visitor scrolls. */
.motion .process-grid li:before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gold-muted);transform:scaleX(var(--line,0));transform-origin:left;pointer-events:none}
.motion .process-grid .step-number{opacity:.4;transition:opacity .5s ease,transform .5s ease;transform:translateY(4px)}
.motion .process-grid li.is-reached .step-number{opacity:1;transform:none}

/* WhatsApp: one gentle nudge a few seconds after arrival. */
.floating-contact.is-nudging{animation:nudge 1s ease both}
.floating-contact.is-nudging:after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid #527a5c;animation:ring 1.4s ease-out both;pointer-events:none}
.floating-contact.show-label>span{display:block;opacity:1}
@keyframes nudge{0%,100%{transform:none}25%{transform:translateY(-8px)}45%{transform:translateY(0)}62%{transform:translateY(-4px)}80%{transform:translateY(0)}}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}

/* Google reviews. */
.reviews-section{background:var(--ink);border-top:1px solid #343c36}
.reviews-score{display:flex;align-items:center;gap:16px;padding-bottom:4px}
.reviews-score strong{font-size:3.4rem;line-height:1;letter-spacing:-.05em;color:var(--text);font-weight:700}
.reviews-score div{display:flex;flex-direction:column;gap:6px}
.reviews-score div>span:last-child{font-size:.875rem;color:var(--muted)}
.review-stars{color:var(--gold);letter-spacing:.14em;font-size:1rem;line-height:1}
.reviews-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px) / 3);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 0 6px}
.reviews-track::-webkit-scrollbar{display:none}
.reviews-track:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.review-card{margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:20px;padding:30px 28px 26px;background:#1b1f1f;border:1px solid #303635;border-radius:7px;position:relative;transition:border-color .3s ease}
.review-card:before{content:"\201C";position:absolute;right:24px;top:6px;font-family:Georgia,serif;font-size:4.6rem;line-height:1;color:var(--gold);opacity:.18;pointer-events:none}
.review-card blockquote{margin:0;flex:1}
.review-card blockquote p{font-size:1rem;line-height:1.72;color:#d2d6d3}
.review-card figcaption{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid #343b37}
.review-card figcaption strong{display:block;font-size:.9375rem;line-height:1.35;color:var(--text)}
.review-card figcaption small{display:block;font-size:.75rem;color:#8f9893;margin-top:2px}
.review-avatar{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#292820;border:1px solid #79633e;color:var(--gold);font-weight:700;font-size:.9375rem}
@media(hover:hover) and (pointer:fine){.review-card:hover{border-color:#65573a}}
.reviews-footer{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:20px;margin-top:26px}
.reviews-link{color:var(--gold);font-size:.875rem;border-bottom:1px solid #5c5339;padding:8px 0 3px}
.reviews-link:after{content:" \2197"}
.reviews-controls{display:flex;gap:10px}
.reviews-controls button{width:46px;height:46px;border-radius:50%;border:1px solid #79633e;background:transparent;color:var(--text);font-size:1.05rem;cursor:pointer;transition:background .25s ease,border-color .25s ease,opacity .25s ease}
.reviews-controls button:hover{background:#292820;border-color:var(--gold)}
.reviews-controls button:disabled{opacity:.35;cursor:default;background:transparent;border-color:#79633e}
@media(max-width:960px){.reviews-track{grid-auto-columns:calc((100% - 18px) / 2)}.reviews-score strong{font-size:2.8rem}}
@media(max-width:740px){
  .reviews-score{justify-content:center;margin-top:20px}
  .reviews-track{grid-auto-columns:min(84%,400px);gap:14px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .review-card{padding:26px 22px 22px}
  .reviews-footer{flex-direction:column;gap:14px;margin-top:20px}
}
@media print{.reviews-track{grid-auto-flow:row;grid-template-columns:1fr 1fr;overflow:visible}.reviews-controls{display:none}}

/* Reviews as a continuous loop (motion on). Cards are duplicated by site.js; the rail slides half its width. */
.reviews-toggle{background:none;border:1px solid #79633e;border-radius:22px;color:var(--text);font-size:.8125rem;padding:10px 20px;min-height:44px;cursor:pointer;transition:background .25s ease,border-color .25s ease}
.reviews-toggle:hover{background:#292820;border-color:var(--gold)}
.is-marquee .reviews-controls{display:none}
.is-marquee .reviews-footer{flex-direction:row;justify-content:flex-start;gap:28px}
.is-marquee .reviews-track{display:block;overflow:hidden;padding:4px 0 6px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.reviews-rail{display:flex;width:max-content;animation:reviews-loop var(--marquee-duration,90s) linear infinite}
.reviews-rail .review-card{flex:0 0 var(--review-width,370px);margin-right:18px}
.is-marquee .reviews-track:hover .reviews-rail,.is-marquee .reviews-track:focus-within .reviews-rail,.is-held .reviews-rail,.is-stopped .reviews-rail{animation-play-state:paused}
@keyframes reviews-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:960px){.reviews-rail{--review-width:330px}}
@media(max-width:740px){
  .is-marquee .reviews-track{margin-inline:calc(var(--gutter) * -1);padding-inline:0;mask-image:none;-webkit-mask-image:none}
  .reviews-rail{--review-width:290px}
  .reviews-rail .review-card{margin-right:14px}
  .is-marquee .reviews-footer{flex-direction:column;gap:14px}
}

/* Softer change between dark and light sections. */
.light-section{box-shadow:inset 0 26px 32px -30px #0006,inset 0 -26px 32px -30px #0006}

@media(prefers-reduced-motion:reduce){
  .site-header,.header-inner,.scroll-progress{transition:none}
  .scroll-cue i:after,.button-shine:after,.floating-contact.is-nudging,.floating-contact.is-nudging:after{animation:none!important}
}
@media print{.scroll-progress,.scroll-cue,.carousel-dots{display:none!important}}

/* WhatsApp widget: official brand green with a pulsing ring (transform and opacity only, so the pulse never repaints the page). */
.floating-contact{background:#25d366;border-color:#25d366;color:#fff;box-shadow:0 5px 20px #25d36655}
.floating-contact:before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;animation:wa-pulse 2s ease-out infinite;pointer-events:none}
.floating-contact:hover{background:#1ebe5b;border-color:#1ebe5b}
.floating-contact>span{background:#25d366;color:#08311a;font-weight:700}
.floating-contact.is-nudging:after{border-color:#25d366}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.floating-contact:before{animation:none;opacity:0}}