/* Daily uses share the benefits' dotted surfaces, typography and icon halos. */
#quotidien .flip-grid{gap:22px;grid-template-columns:repeat(4,minmax(0,1fr))}
#quotidien .usage-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;isolation:isolate;overflow:hidden;min-width:0;height:auto;min-height:400px;margin:0;padding:28px 24px 48px;border:0;perspective:none;background:#11110f;background-image:radial-gradient(ellipse at 12% 18%,rgba(213,180,107,.06),transparent 65%);text-align:left;transition:background-color .3s,box-shadow .3s}
#quotidien .usage-card:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(227,211,171,.14) 1.35px,transparent 1.7px);background-size:7px 7px;mask-image:linear-gradient(110deg,#000,transparent 78%);-webkit-mask-image:linear-gradient(110deg,#000,transparent 78%)}
#quotidien .usage-card:first-child{background-color:#0b0a07;background-image:radial-gradient(ellipse at 0 0,rgba(213,180,107,.43),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(137,106,43,.25),transparent 70%)}
#quotidien .usage-card:first-child:before{opacity:.18}
#quotidien .usage-card.is-open{background-color:#19170f;box-shadow:inset 0 -2px #d5b46b}
#quotidien .usage-card:focus-visible{outline:2px solid #d5b46b;outline-offset:5px}
.usage-heading{display:block;position:relative;z-index:2;pointer-events:none}
#quotidien .usage-icon{position:relative;display:grid;width:76px;height:76px;margin:3px 0 27px}
#quotidien .usage-icon svg{width:50px;height:50px}
.usage-name{display:block;font-size:25px;line-height:1.2;font-weight:400;letter-spacing:-.025em;color:#f4f1e9}
.usage-detail{display:block;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s;pointer-events:none}
.usage-copy{display:block;margin-top:12px;max-width:27ch;color:#bcbab4;font-size:16px;line-height:1.4;overflow-wrap:break-word;transform:translateY(10px);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.usage-card.is-open .usage-detail{visibility:visible;opacity:1}
.usage-card.is-open .usage-copy{transform:translateY(0)}
.usage-visual{position:absolute;right:17px;top:28px;width:calc(100% - 117px);max-width:120px;height:90px;color:#d5b46b;opacity:.8}
.usage-visual svg{width:100%;height:100%;overflow:visible}
.usage-arrow{position:absolute;bottom:18px;right:20px;color:#77766d;font-size:18px;transition:color .3s,transform .3s}
.usage-card.is-open .usage-arrow{color:#d5b46b;transform:translate(2px,-2px)}
.usage-visual :is(.usage-draw,.usage-check){stroke-dasharray:130;stroke-dashoffset:0}
.usage-visual .usage-calendar rect,.usage-visual .usage-bars rect{fill:rgba(213,180,107,.25)}
.usage-card.is-open .usage-draw{animation:usage-line 2.8s ease-in-out infinite}
.usage-card.is-open .usage-check{animation:usage-tick 2.8s ease-in-out infinite}
.usage-card.is-open .usage-box{animation:usage-box 2.8s ease-in-out infinite}
.usage-card.is-open .usage-node{animation:usage-nodes 2.8s ease-in-out infinite}
.usage-card.is-open .usage-hub{animation:usage-hub 2.8s ease-in-out infinite;transform-origin:60px 42px}
.usage-card.is-open .usage-paper{animation:usage-paper 2.8s ease-in-out infinite}
.usage-card.is-open .usage-calendar rect{animation:usage-cell 2.4s ease-in-out infinite}
.usage-card.is-open .usage-calendar rect:nth-child(2){animation-delay:.25s}
.usage-card.is-open .usage-calendar rect:nth-child(3){animation-delay:.5s}
.usage-card.is-open .usage-bars rect{animation:usage-bars 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
.usage-card.is-open .usage-bars rect:nth-child(2){animation-delay:.18s}
.usage-card.is-open .usage-bars rect:nth-child(3){animation-delay:.36s}
.usage-card.is-open .usage-envelope{animation:usage-envelope 2.8s ease-in-out infinite}
.usage-card.is-open .usage-send{animation:usage-send 2.8s ease-in-out infinite}
.usage-card.is-open .usage-team-person{animation:usage-person 2.8s ease-in-out infinite}
.usage-card.is-open .usage-team-person:nth-of-type(2){animation-delay:.25s}
.usage-card.is-open .usage-team-person:nth-of-type(3){animation-delay:.5s}
@keyframes usage-line{0%,10%{stroke-dashoffset:130;opacity:.2}55%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.2}}
@keyframes usage-tick{0%,35%{stroke-dashoffset:130;opacity:0}65%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes usage-box{0%,100%{transform:translateY(-5px)}50%{transform:translateY(8px)}}
@keyframes usage-nodes{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes usage-hub{0%,100%{transform:scale(.9);fill:rgba(213,180,107,.06)}50%{transform:scale(1.12);fill:rgba(213,180,107,.3)}}
@keyframes usage-paper{0%,100%{transform:translateY(8px)}50%{transform:translateY(-5px)}}
@keyframes usage-cell{0%,100%{fill:rgba(213,180,107,.1)}45%,65%{fill:rgba(213,180,107,.65)}}
@keyframes usage-bars{0%,100%{transform:scaleY(.4)}55%{transform:scaleY(1)}}
@keyframes usage-envelope{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
@keyframes usage-send{0%,15%{transform:translate(-12px,8px);opacity:0}40%,65%{opacity:1}85%,100%{transform:translate(10px,-5px);opacity:0}}
@keyframes usage-person{0%,100%{transform:translateY(4px);opacity:.55}50%{transform:translateY(-4px);opacity:1}}
@media(min-width:1500px){#quotidien .usage-card{padding:34px 30px 48px;min-height:420px;height:auto}.usage-visual{top:34px;right:24px}.usage-name{font-size:26px}.usage-copy{font-size:18px}}
@media(max-width:1279px){#quotidien .flip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){#quotidien .flip-grid{grid-template-columns:1fr}#quotidien .usage-card{height:auto;min-height:360px}.usage-visual{right:28px;max-width:135px}.usage-copy{max-width:34ch}}
.motion-off #quotidien .usage-card *,.motion-off #quotidien .usage-card *:before,.motion-off #quotidien .usage-card *:after{animation:none!important;transition:none!important}
.motion-off #quotidien .usage-card{transition:none!important}
@media(prefers-reduced-motion:reduce){#quotidien .usage-card,#quotidien .usage-card *,#quotidien .usage-card *:before,#quotidien .usage-card *:after{animation:none!important;transition:none!important}}

/* Reuse the hero play icon and its orbit/pulse inside the presentation cover. */
.showreel-cover .showreel-play.hero-video-icon{position:absolute;transform:translate(-50%,-50%);padding:0;color:#f1d89e}
.showreel-cover:hover .showreel-play.hero-video-icon,.showreel-cover:focus-visible .showreel-play.hero-video-icon{background:#d5b46b25;color:#f1d89e;transform:translate(-50%,-50%) scale(1.07)}
.showreel-cover:focus-visible{outline:1px solid #d5b46b;outline-offset:8px}

/* Client names roll upward into gold on pointer or keyboard interaction. */
.case-tabs .case-tab-label{display:block;position:relative;overflow:hidden;line-height:1.5;letter-spacing:.025em}
.case-tabs .case-tab-text{display:block;transform:translateY(0);transition:transform .48s cubic-bezier(.22,.68,.25,1),color .25s ease}
.case-tabs .case-tab-text[aria-hidden="true"]{position:absolute;top:100%;left:0;color:#e1c47f}
.case-tabs button:hover .case-tab-text,.case-tabs button:focus-visible .case-tab-text{transform:translateY(-100%);color:#e1c47f}
.case-tabs button:focus-visible{outline:1px solid #d5b46b;outline-offset:-1px}
.motion-off .case-tabs .case-tab-text{transform:none!important;transition:none}
.motion-off .case-tabs .case-tab-text[aria-hidden="true"]{display:none}
@media(prefers-reduced-motion:reduce){.case-tabs .case-tab-text{transform:none!important;transition:none}.case-tabs .case-tab-text[aria-hidden="true"]{display:none}}

/* Six métiers: three columns on desktop, two on tablet, one on mobile. */
.portfolio .portfolio-grid {
  gap: 40px 24px;
}
.portfolio .portfolio-viewport {
  height: auto;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
}
@media (min-width: 1024px) {
  .portfolio .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio .portfolio-item > h3 { font-size: clamp(23px, 2vw, 32px); margin-top: 20px; }
}
/* Scale the interface illustrations with their card, including narrower columns. */
.portfolio .mock-screen { padding: 4.6cqw; }
.portfolio .mock-screen > header { height: 7.7cqw; font-size: 1.9cqw; padding-bottom: 3.2cqw; gap: 3.8cqw; }
.portfolio .mock-content { padding-top: 5.7cqw; gap: 5.3cqw; }
.portfolio .mock-content aside { font-size: 1.7cqw; gap: 3.8cqw; }
.portfolio .mock-main > small { font-size: 1.5cqw; }
.portfolio .mock-main h4 { font-size: 5.9cqw; margin-top: 2.5cqw; }
.portfolio .mock-stats { gap: 1.9cqw; margin-top: 4.8cqw; }
.portfolio .mock-stats > div { padding: 2.7cqw; }
.portfolio .mock-stats span { font-size: 1.5cqw; }
.portfolio .mock-stats b { font-size: 4.6cqw; }
.portfolio .mock-chart { height: 15cqw; margin-top: 4.6cqw; gap: 2.7cqw; }

/* Métier covers share the site's charcoal and champagne palette. */
.portfolio-item[data-carousel] .portfolio-slide:first-child {
  background: #100e08;
  isolation: isolate;
}
.portfolio-item[data-carousel] .portfolio-slide:first-child > img {
  filter: grayscale(.78) sepia(.6) saturate(.72) brightness(.67) contrast(1.13);
  transform: scale(1.025);
  transform-origin: 50% 50%;
  transition: filter .85s cubic-bezier(.22,1,.36,1);
}
.portfolio-item[data-carousel] .portfolio-slide:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(213,180,107,.16), transparent 48%, rgba(6,5,2,.56));
  box-shadow: inset 0 0 0 1px rgba(213,180,107,.2);
  transition: opacity .85s cubic-bezier(.22,1,.36,1);
}
.portfolio-item[data-carousel] .portfolio-slide:first-child::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -35% -70%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(244,216,154,.03) 46%, rgba(244,216,154,.19) 50%, rgba(244,216,154,.03) 54%, transparent 58%);
  opacity: 0;
  transform: translateX(-35%);
}
/* Reveal the original photograph smoothly; keep the camera drift without tinting it. */
.portfolio-item[data-carousel]:is(:hover,:focus-within) .portfolio-slide:first-child > img {
  filter: none;
}
.portfolio-item[data-carousel]:is(:hover,:focus-within) .portfolio-slide:first-child::before,
.portfolio-item[data-carousel]:is(:hover,:focus-within) .portfolio-slide:first-child::after {
  opacity: 0;
}
.portfolio-item[data-carousel]:is(:hover,:focus-within) .portfolio-slide:first-child.active > img {
  animation: gallery-cover-drift 9s ease-in-out infinite alternate;
}
@keyframes gallery-cover-drift {
  from { transform: scale(1.025) translateX(0); }
  to { transform: scale(1.09) translateX(-.7%); }
}
@keyframes gallery-cover-light {
  0%, 15% { opacity: 0; transform: translateX(-35%); }
  30% { opacity: .8; }
  64%, 100% { opacity: 0; transform: translateX(35%); }
}
body.motion-off .portfolio-item[data-carousel] .portfolio-slide:first-child > img,
body.motion-off .portfolio-item[data-carousel] .portfolio-slide:first-child::before,
body.motion-off .portfolio-item[data-carousel] .portfolio-slide:first-child::after { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .portfolio-item[data-carousel] .portfolio-slide:first-child > img,
  .portfolio-item[data-carousel] .portfolio-slide:first-child::before,
  .portfolio-item[data-carousel] .portfolio-slide:first-child::after { animation: none !important; transition: none !important; }
}

/* One accessible next button sits above each métier image; dots and links stay separate. */
.portfolio-item.gallery-click-ready .portfolio-viewport {
  --gallery-ink: #dfbf78;
  --gallery-cursor-fill: #100e09d9;
}
.portfolio-item.gallery-click-ready .portfolio-viewport.is-light-slide {
  --gallery-ink: #16140f;
  --gallery-cursor-fill: #f1ede2e8;
}
.portfolio-item .gallery-next {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gallery-ink);
  appearance: none;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.portfolio-item .gallery-next:focus-visible {
  outline: 2px solid var(--gallery-ink);
  outline-offset: -5px;
}
.portfolio-item .gallery-cursor {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 118px;
  height: 46px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--gallery-cursor-fill);
  color: var(--gallery-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .18s ease, scale .18s ease, color .2s ease, background-color .2s ease;
}
.portfolio-item .gallery-cursor-arrow {
  display: inline-block;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}
.portfolio-item .gallery-cursor::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid currentColor;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.portfolio-item .gallery-next:is(.cursor-active,:focus-visible) .gallery-cursor::before {
  animation: gallery-next-contour 2.8s ease-out infinite;
}
@keyframes gallery-next-contour {
  0% { opacity: .48; scale: .96; }
  80%, 100% { opacity: 0; scale: 1.09; }
}
.portfolio-item .gallery-next.is-clicking .gallery-cursor { scale: .93; }
.portfolio-item .gallery-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (hover: hover) and (pointer: fine) {
  .portfolio-item .gallery-next .gallery-cursor {
    opacity: 0;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    scale: .86;
  }
  .portfolio-item .gallery-next.cursor-active { cursor: none; }
  .portfolio-item .gallery-next.cursor-active .gallery-cursor {
    left: var(--gallery-pointer-x, 50%);
    top: var(--gallery-pointer-y, 50%);
    opacity: 1;
    scale: 1;
  }
  .portfolio-item .gallery-next:focus-visible .gallery-cursor {
    opacity: 1;
    scale: 1;
  }
  .portfolio-item .gallery-next.cursor-active .gallery-cursor-arrow,
  .portfolio-item .gallery-next:focus-visible .gallery-cursor-arrow {
    animation: gallery-next-arrow 1.9s ease-in-out infinite;
  }
  .portfolio-item .gallery-next.is-clicking .gallery-cursor { scale: .93; }
}
@keyframes gallery-next-arrow {
  0%, 48%, 100% { translate: 0 0; }
  63% { translate: 4px 0; }
  78% { translate: 0 0; }
}
.motion-off .portfolio-item .gallery-cursor,
.motion-off .portfolio-item .gallery-cursor::before,
.motion-off .portfolio-item .gallery-cursor-arrow { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .portfolio-item .gallery-cursor,
  .portfolio-item .gallery-cursor::before,
  .portfolio-item .gallery-cursor-arrow { animation: none !important; transition: none !important; }
}

/* Gold client identities above case descriptions; keep source luminance and alpha. */
.case-panel .case-text .case-client-logo{
  filter:grayscale(1) brightness(.62) sepia(1) saturate(1.6);
}

/* The rail keeps its original position, dimensions and left alignment. */
.side-nav.menu-motion-ready { --menu-motion-gold: #d5b46b; }
.side-nav.menu-motion-ready .menu-motion-link {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 10px;
  column-gap: 6px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  transition: color .25s ease, background-color .35s ease, border-color .35s ease;
}
.side-nav.menu-motion-ready .menu-motion-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 15%, #d5b46b14 49%, transparent 84%);
  opacity: 0;
  translate: -100% 0;
  pointer-events: none;
}
.side-nav.menu-motion-ready .menu-link-icon {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  color: var(--menu-motion-gold);
  opacity: 0;
  translate: -7px 0;
  scale: .74;
  rotate: -8deg;
  transition: opacity .25s ease, translate .45s cubic-bezier(.22,.61,.36,1), scale .45s cubic-bezier(.22,.61,.36,1), rotate .45s cubic-bezier(.22,.61,.36,1);
}
.side-nav.menu-motion-ready .menu-link-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.side-nav.menu-motion-ready .menu-link-label {
  position: relative;
  display: block;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  translate: -24px 0;
  white-space: nowrap;
  transition: translate .45s cubic-bezier(.22,.61,.36,1);
}
.side-nav.menu-motion-ready nav .menu-link-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--menu-motion-gold);
  opacity: .7;
  scale: 0 1;
  transform-origin: left center;
  transition: scale .45s cubic-bezier(.22,.61,.36,1) .06s;
}
.side-nav.menu-motion-ready .menu-link-arrow {
  display: block;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--menu-motion-gold);
  opacity: 0;
  translate: -6px 0;
  transition: opacity .3s ease .1s, translate .45s cubic-bezier(.22,.61,.36,1) .06s;
}
.side-nav.menu-motion-ready .menu-motion-link:is(:hover, :focus-visible) {
  color: var(--menu-motion-gold);
}
.side-nav.menu-motion-ready .menu-motion-link:is(:hover, :focus-visible)::before {
  animation: menu-motion-sweep .85s cubic-bezier(.22,.61,.36,1) both;
}
.side-nav.menu-motion-ready .menu-motion-link:is(:hover, :focus-visible) .menu-link-icon {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
}
.side-nav.menu-motion-ready .menu-motion-link:is(:hover, :focus-visible) .menu-link-icon :is(path, circle, rect) {
  stroke-dasharray: 1;
  animation: menu-motion-draw .65s ease both;
  animation-delay: calc(var(--menu-path-index, 0) * 45ms);
}
.side-nav.menu-motion-ready .menu-motion-link:is(:hover, :focus-visible) .menu-link-label {
  translate: 0 0;
  animation: menu-motion-text .5s ease both;
}
.side-nav.menu-motion-ready nav .menu-motion-link:is(:hover, :focus-visible) .menu-link-label::after { scale: 1 1; }
.side-nav.menu-motion-ready .menu-motion-link:is(:hover, :focus-visible) .menu-link-arrow {
  opacity: 1;
  translate: 0 0;
}
.side-nav.menu-motion-ready .menu-motion-link:focus-visible {
  outline: 1px solid var(--menu-motion-gold);
  outline-offset: -1px;
}

/* Two-line CTA labels fit the narrow rail while their icon stays in a reserved column. */
.side-nav.menu-motion-ready :is(.nav-cta, .nav-contact).menu-motion-link {
  grid-template-columns: 18px minmax(0, 1fr) 12px;
  padding-inline: 10px !important;
  column-gap: 6px;
  font-size: 11px !important;
  line-height: 1.25;
}
.side-nav.menu-motion-ready :is(.nav-cta, .nav-contact) .menu-link-label {
  white-space: normal;
}
.side-nav.menu-motion-ready :is(.nav-cta, .nav-contact) .menu-link-arrow {
  opacity: 1;
  translate: 0 0;
  color: inherit;
  font-size: 18px;
}
.side-nav.menu-motion-ready :is(.nav-cta, .nav-contact).menu-motion-link:is(:hover, :focus-visible) {
  background: #17130d;
  border-color: var(--menu-motion-gold);
  color: var(--menu-motion-gold);
  box-shadow: inset 0 0 0 1px var(--menu-motion-gold), inset 0 0 22px #d5b46b09;
}
.side-nav.menu-motion-ready :is(.nav-cta, .nav-contact).menu-motion-link:is(:hover, :focus-visible) .menu-link-arrow {
  animation: menu-motion-cta-arrow .65s cubic-bezier(.22,.61,.36,1) both;
}

/* The existing transparent logo turns warm gold and catches a restrained halo. */
.side-nav.menu-motion-ready .menu-motion-logo { position: relative; }
.side-nav.menu-motion-ready .menu-motion-logo img {
  transform-origin: left center;
  transition: filter .45s ease, scale .45s cubic-bezier(.22,.61,.36,1);
}
.side-nav.menu-motion-ready .menu-motion-logo:is(:hover, :focus-visible) img {
  filter: brightness(0) saturate(100%) invert(78%) sepia(45%) saturate(493%) hue-rotate(358deg) brightness(89%) contrast(87%) drop-shadow(0 0 8px #d5b46b38);
  scale: 1.035;
}
.side-nav.menu-motion-ready .menu-motion-logo:focus-visible { outline-color: var(--menu-motion-gold); }

@keyframes menu-motion-sweep {
  0% { translate: -100% 0; opacity: 0; }
  28% { opacity: 1; }
  100% { translate: 100% 0; opacity: 0; }
}
@keyframes menu-motion-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes menu-motion-text {
  from { opacity: .6; filter: blur(.65px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes menu-motion-cta-arrow {
  0% { translate: 0 0; opacity: 1; }
  35% { translate: 8px -2px; opacity: 0; }
  36% { translate: -6px 2px; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
.motion-off .side-nav.menu-motion-ready *,
.motion-off .side-nav.menu-motion-ready *::before,
.motion-off .side-nav.menu-motion-ready *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .side-nav.menu-motion-ready *,
  .side-nav.menu-motion-ready *::before,
  .side-nav.menu-motion-ready *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* One coordinated scene: the conversation, its real-time duration, and three useful previews. */
#diagnostic .diagnosis-copy .title>span,#diagnostic .lime-lead>span{display:block}
#diagnostic .diagnosis-copy .primary{overflow:hidden;isolation:isolate;transition:background .25s,box-shadow .3s,translate .3s}
#diagnostic .diagnosis-copy .primary:after{content:"";position:absolute;inset:-100% -60%;z-index:-1;background:linear-gradient(110deg,transparent 40%,#fff6 50%,transparent 60%);translate:-60% 0;pointer-events:none}
#diagnostic .diagnosis-copy .primary:hover,#diagnostic .diagnosis-copy .primary:focus-visible{translate:0 -3px;box-shadow:0 10px 32px #d5b46b26}
#diagnostic .diagnosis-copy .primary:focus-visible,#diagnostic .diagnosis-copy .text-link:focus-visible{outline:1px solid #e8cb8a;outline-offset:6px}
#diagnostic .diagnosis-copy .text-link{display:inline-block;transition:color .25s,translate .3s}
#diagnostic .diagnosis-copy .text-link:hover{color:#f1d99a;translate:4px 0}
#diagnostic .time-display{isolation:isolate;border:1px solid #d5b46b24;border-radius:13px;box-shadow:0 16px 55px #0005;perspective:900px}
#diagnostic .time-display:before{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#b58b3530,transparent 62%);opacity:.65}
#diagnostic .time-display:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:linear-gradient(90deg,#75572b,#e5c882,#75572b);transform-origin:left center;scale:var(--consultation-time-left,1) 1;box-shadow:0 0 12px #d5b46b44}
#diagnostic .time-display>span{color:#d8c79f;backface-visibility:hidden;transform-origin:center 50%;font-variant-numeric:tabular-nums}
#diagnostic .time-display>i{color:#d5b46b}
#diagnostic .report-slides{height:clamp(320px,31vw,390px);overflow:hidden;isolation:isolate}
#diagnostic .report-carousel .portfolio-slide{transition:none}
#diagnostic .report-carousel .portfolio-slide.active{z-index:2}
#diagnostic .report-carousel .portfolio-slide.consultation-leaving{opacity:1;visibility:visible;z-index:1;pointer-events:none}
#diagnostic .report-preview{padding:clamp(23px,3vw,34px);border:1px solid #fffb;transform:rotate(-1.8deg) scale(.94);box-shadow:0 18px 42px #0005;overflow:hidden}
#diagnostic .report-preview:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#8a713e,#d5b46b,#a28549);transform-origin:left center}
#diagnostic .report-preview h3{font-size:clamp(27px,3vw,39px);margin:23px 0;line-height:1.12}
#diagnostic .report-preview footer{right:20px;line-height:1.4}
#diagnostic .report-line{position:relative;padding:10px 22px 10px 0;gap:18px;font-size:clamp(10px,1.05vw,13px)}
#diagnostic .report-line:after{content:"✓";position:absolute;right:0;top:8px;color:#8c7138;font-size:16px;opacity:.65}
#diagnostic .report-line>span{display:grid;place-items:center;flex:none;width:23px;height:20px;color:#7d6537;background:#d5b46b20;border-radius:3px}
#diagnostic .report-2{background:#dfd6c3;transform:rotate(1.8deg) scale(.94)}
#diagnostic .priority-grid{display:grid;grid-template-columns:27px minmax(0,1fr);height:110px;gap:10px;margin-top:24px}
#diagnostic .priority-grid>span{align-self:center;color:#79643e}
#diagnostic .priority-grid>div{width:auto;padding:0;background-image:linear-gradient(#8a754321 1px,transparent 1px),linear-gradient(90deg,#8a754321 1px,transparent 1px);background-size:25% 50%;border-color:#887042}
#diagnostic .priority-grid .priority-study,#diagnostic .priority-grid i,#diagnostic .priority-grid em{position:absolute;display:block;padding:7px 10px;border-radius:3px;font-size:clamp(9px,1vw,12px);font-style:normal;white-space:nowrap;box-shadow:0 5px 12px #5d48291c}
#diagnostic .priority-grid .priority-study{left:9px;bottom:10px;background:#f3ecdd;color:#8b764e}
#diagnostic .priority-grid i{right:8px;top:8px;background:#5b4725;color:#fff1cf}
#diagnostic .priority-grid em{right:34%;top:auto;bottom:14px;background:#a38a57;color:#fff7df}
#diagnostic .priority-grid>small{bottom:-16px;color:#79643e}
#diagnostic .report-3{background:radial-gradient(ellipse at 80% 20%,#6f55232e,transparent 70%),#211b0f;color:#e8e0ce;border-color:#d5b46b38;transform:rotate(-1.2deg) scale(.94)}
#diagnostic .roadmap{position:relative;border-top:0;min-height:90px;margin-top:36px;gap:16px}
#diagnostic .roadmap:before,#diagnostic .roadmap:after{content:"";position:absolute;left:8px;right:20%;top:7px;height:2px;transform-origin:left center;background:#615134}
#diagnostic .roadmap:after{background:linear-gradient(90deg,#ac873f,#f0d599);box-shadow:0 0 12px #d5b46b44}
#diagnostic .roadmap>span{flex:1;position:relative;padding-top:33px;color:#b7a782;font-size:clamp(10px,1.15vw,13px)}
#diagnostic .roadmap i{width:16px;height:16px;top:0;border:4px solid #332713;background:#d5b46b;box-shadow:0 0 0 1px #a18247;z-index:1}
#diagnostic .consultation-controls{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:14px;gap:22px}
#diagnostic .consultation-controls .carousel-dots{margin:0;min-height:44px;gap:10px}
#diagnostic .consultation-controls .dot{width:25px;background:#75684c;transition:width .35s,background .25s;cursor:pointer}
#diagnostic .consultation-controls .dot.active{width:42px;background:#e1c47f}
#diagnostic .consultation-controls .dot:after{inset:-20px -2px}
#diagnostic .consultation-controls .dot:focus-visible{outline:1px solid #e5c882;outline-offset:7px}
#diagnostic .consultation-pause{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:85px;padding:0 5px;color:#ad9b74;font-size:10px;letter-spacing:.02em;background:transparent;border:0;cursor:pointer}
#diagnostic .consultation-pause>span:first-child{font-size:13px;min-width:13px}
#diagnostic .consultation-pause:hover{color:#edcf91}
#diagnostic .consultation-pause:focus-visible{outline:1px solid #d5b46b;outline-offset:2px}
#diagnostic .consultation-pause:disabled{opacity:.55;cursor:default}

#diagnostic.consultation-active .diagnosis-copy .title>span{animation:consultation-copy-enter 1s cubic-bezier(.18,.75,.25,1) both}
#diagnostic.consultation-active .diagnosis-copy .title>span:nth-child(2){animation-delay:.12s}
#diagnostic.consultation-active .diagnosis-copy .title>span:nth-child(3){animation-delay:.24s}
#diagnostic.consultation-active .lime-lead>span{animation:consultation-lead-enter .85s cubic-bezier(.18,.75,.25,1) .3s both}
#diagnostic.consultation-active .lime-lead>span:nth-child(2){animation-delay:.43s}
#diagnostic.consultation-active .lime-lead>span:nth-child(3){animation-delay:.56s}
#diagnostic.consultation-active .diagnosis-copy>p:not(.lime-lead){animation:consultation-copy-enter .9s ease-out .65s both}
#diagnostic.consultation-active .diagnosis-copy .primary{animation:consultation-button-enter .95s cubic-bezier(.18,.75,.25,1) .7s both,consultation-button-glow 5.8s ease-in-out 1.65s infinite}
#diagnostic.consultation-active .diagnosis-copy .primary:after{animation:consultation-button-shine 5.8s ease-in-out 1.65s infinite}
#diagnostic.consultation-active .diagnosis-copy .primary>span{animation:consultation-arrow 5.8s ease-in-out 1.65s infinite}
#diagnostic.consultation-active .diagnosis-copy .text-link{animation:consultation-copy-enter .9s ease-out .85s both}
#diagnostic.consultation-active .time-display>span{animation:consultation-clock-enter .95s cubic-bezier(.18,.75,.25,1) .15s both}
#diagnostic.consultation-active .time-display>span:nth-of-type(2){animation-delay:.25s}
#diagnostic.consultation-active .time-display>span:nth-of-type(3){animation-delay:.35s}
#diagnostic.consultation-active .time-display>span:nth-of-type(4){animation-delay:.45s}
#diagnostic.consultation-active .time-display:before{animation:consultation-clock-aura 5.8s ease-in-out infinite}
#diagnostic.consultation-active .time-display>i{animation:consultation-colon 2s ease-in-out infinite}
#diagnostic.consultation-active .time-label{animation:consultation-copy-enter .9s ease-out .6s both}
#diagnostic.consultation-active .portfolio-slide.active .report-preview{animation:consultation-paper-enter 1s cubic-bezier(.18,.75,.25,1) .2s both}
#diagnostic.consultation-active .portfolio-slide.active .report-preview:before{animation:consultation-rule 6s ease-in-out .35s infinite}
#diagnostic.consultation-active .portfolio-slide.active .report-preview h3{animation:consultation-report-title .8s ease-out .45s both}
#diagnostic.consultation-active .portfolio-slide.active .report-line{--consultation-line:.7s;animation:consultation-line-enter .7s ease-out var(--consultation-line) both}
#diagnostic.consultation-active .portfolio-slide.active .report-line:nth-of-type(2){--consultation-line:.95s}
#diagnostic.consultation-active .portfolio-slide.active .report-line:nth-of-type(3){--consultation-line:1.2s}
#diagnostic.consultation-active .portfolio-slide.active .report-line:after{animation:consultation-report-check 6s ease-in-out var(--consultation-line) infinite backwards}
#diagnostic.consultation-active .portfolio-slide.active .priority-study{animation:consultation-priority-study 6s ease-in-out .6s infinite backwards}
#diagnostic.consultation-active .portfolio-slide.active .priority-grid i{animation:consultation-priority-first 6s ease-in-out .9s infinite backwards}
#diagnostic.consultation-active .portfolio-slide.active .priority-grid em{animation:consultation-priority-next 6s ease-in-out 1.2s infinite backwards}
#diagnostic.consultation-active .portfolio-slide.active .roadmap:after{animation:consultation-route 6s ease-in-out .6s infinite backwards}
#diagnostic.consultation-active .portfolio-slide.active .roadmap>span{--consultation-stop:.65s;animation:consultation-milestone-label 6s ease-in-out var(--consultation-stop) infinite}
#diagnostic.consultation-active .portfolio-slide.active .roadmap>span:nth-child(2){--consultation-stop:1.6s}
#diagnostic.consultation-active .portfolio-slide.active .roadmap>span:nth-child(3){--consultation-stop:2.55s}
#diagnostic.consultation-active .portfolio-slide.active .roadmap i{animation:consultation-milestone 6s ease-in-out var(--consultation-stop) infinite}
@keyframes consultation-copy-enter{from{opacity:.3;translate:0 20px;filter:blur(2px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes consultation-lead-enter{from{opacity:.25;translate:18px 0}to{opacity:1;translate:0 0}}
@keyframes consultation-button-enter{from{opacity:.35;translate:0 18px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes consultation-button-glow{0%,65%,100%{box-shadow:0 0 0 #d5b46b00}30%{box-shadow:0 9px 35px #d5b46b25}}
@keyframes consultation-button-shine{0%,30%{translate:-60% 0}58%,100%{translate:60% 0}}
@keyframes consultation-arrow{0%,30%,65%,100%{translate:0 0}45%{translate:4px -4px}}
@keyframes consultation-clock-enter{from{opacity:.3;translate:0 20px;rotate:x -22deg}to{opacity:1;translate:0 0;rotate:x 0deg}}
@keyframes consultation-clock-aura{0%,100%{opacity:.35;scale:.9}50%{opacity:.85;scale:1.08}}
@keyframes consultation-colon{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes consultation-paper-enter{from{opacity:.25;translate:0 24px;rotate:-3deg;scale:.96}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes consultation-rule{0%{scale:.05 1;opacity:.6}25%,80%{scale:1 1;opacity:1}100%{scale:1 1;opacity:.6}}
@keyframes consultation-report-title{from{opacity:.3;translate:12px 0}to{opacity:1;translate:0 0}}
@keyframes consultation-line-enter{from{opacity:.3;translate:16px 0}to{opacity:1;translate:0 0}}
@keyframes consultation-report-check{0%{opacity:.15;scale:.6}12%,75%{opacity:1;scale:1}100%{opacity:.15;scale:.6}}
@keyframes consultation-priority-study{0%,100%{opacity:.65;translate:0 6px}18%,75%{opacity:1;translate:0 0}}
@keyframes consultation-priority-first{0%,100%{translate:-22px 16px;scale:.95;box-shadow:0 5px 12px #5d48291c}25%,70%{translate:0 0;scale:1.04;box-shadow:0 7px 20px #80601f55}}
@keyframes consultation-priority-next{0%,100%{translate:8px 4px;opacity:.65}25%,75%{translate:0 0;opacity:1}}
@keyframes consultation-route{0%{scale:.01 1;opacity:.5}50%,85%{scale:1 1;opacity:1}100%{scale:1 1;opacity:.3}}
@keyframes consultation-milestone{0%,60%,100%{scale:1;box-shadow:0 0 0 1px #a18247}12%,30%{scale:1.15;box-shadow:0 0 0 1px #e4c47d,0 0 0 7px #d5b46b22,0 0 18px #d5b46b44}}
@keyframes consultation-milestone-label{0%,60%,100%{color:#b7a782}12%,35%{color:#f1d99c}}
@media(max-width:600px){#diagnostic .report-slides{height:330px}#diagnostic .report-preview{padding:22px}#diagnostic .report-preview h3{font-size:29px;margin:22px 0}#diagnostic .report-line{font-size:10px;padding-top:10px;padding-bottom:10px}#diagnostic .priority-grid{height:100px}#diagnostic .priority-grid .priority-study,#diagnostic .priority-grid i,#diagnostic .priority-grid em{font-size:9px;padding:6px 8px}#diagnostic .priority-grid em{right:25%;bottom:12px}#diagnostic .report-preview footer{font-size:6px;left:22px;bottom:17px}}
.motion-off #diagnostic *,.motion-off #diagnostic *:before,.motion-off #diagnostic *:after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){#diagnostic *,#diagnostic *:before,#diagnostic *:after{animation:none!important;transition:none!important}}

/* The original articles remain the no-JavaScript fallback. No carousel layout
   properties are changed: the existing widths, snapping and arrows keep working. */
#principes .principle-card.principle-enhanced {
  position:relative;isolation:isolate;overflow:hidden;min-height:510px;
  background:#11110f;background-image:radial-gradient(ellipse at 85% 5%,#d5b46b0b,transparent 65%);
  border:1px solid #d5b46b18;
  transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease;
}
#principes .principle-enhanced::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,#e3d3ab1c 1.15px,transparent 1.5px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(125deg,#000,transparent 72%);mask-image:linear-gradient(125deg,#000,transparent 72%);
}
#principes .principle-enhanced::after {
  content:"";position:absolute;inset:-20% -60%;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 38%,#e2bd6d0d 46%,#f2d69518 50%,transparent 58%);
}
#principes .principle-enhanced.is-principle-open {
  background-color:#17160f;border-color:#d5b46b55;box-shadow:inset 0 0 34px #d5b46b06;
}
#principes .principle-enhanced .principle-index {position:relative;z-index:2;color:#c1a362;letter-spacing:.07em}
#principes .principle-enhanced h3 {
  position:relative;margin:86px 0 15px;font-size:28px;line-height:1.15;max-width:290px;
  transition:color .35s ease;color:#f2f0e9;
}
#principes .principle-enhanced>p {margin:0;font-size:14px;line-height:1.55;color:#aaa89f;transition:color .35s ease}
#principes .principle-enhanced.is-principle-open h3 {color:#fff0c9}
#principes .principle-enhanced.is-principle-open>p {color:#d0c9b8}
#principes .principle-scene {
  position:absolute;right:10px;top:15px;width:78%;max-width:290px;height:110px;
  color:#d5b46b;opacity:.65;pointer-events:none;transition:opacity .4s ease;
  background:radial-gradient(ellipse,#d5b46b0d,transparent 68%);
}
#principes .is-principle-open .principle-scene {opacity:1}
#principes .principle-scene svg {display:block;width:100%;height:100%;overflow:visible;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#principes .principle-scene .pm-panel-fill {fill:#16150e}
#principes .principle-scene .pm-gold-fill {fill:#d5b46b22}
#principes .principle-scene .pm-solid {fill:#e3c780;stroke:none}
#principes .principle-scene .pm-route {stroke:#d5b46b66}
#principes .principle-scene .pm-check {stroke:#eddaa7;stroke-width:2}
#principes .principle-scene .pm-time-ticks {stroke:#9a8756;stroke-width:1}
#principes .principle-scene .pm-time-tasks {stroke:#a28a51}
#principes .principle-scene .pm-progress-base {stroke:#d5b46b22;stroke-width:2}
#principes .principle-scene .pm-progress-route {stroke:#e7ca81;stroke-width:2}
#principes .principle-scene .pm-progress-node circle:not(.pm-solid) {fill:#17160f}
#principes .principle-scene .pm-progress-guide {stroke:#d5b46b33}
#principes .principle-scene .pm-adopt-feedback {fill:#d5b46b33}
#principes .principle-detail {
  min-height:82px;margin:16px 0 14px;opacity:0;translate:0 9px;clip-path:inset(100% 0 0 0);
  transition:opacity .35s ease,translate .55s cubic-bezier(.2,.7,.2,1),clip-path .55s cubic-bezier(.2,.7,.2,1);
}
#principes .is-principle-open .principle-detail {opacity:1;translate:0 0;clip-path:inset(0);transition-delay:.08s}
#principes .principle-more-label {display:block;font-size:8px;line-height:1.4;font-weight:500;letter-spacing:.14em;color:#a08a54;margin-bottom:7px}
#principes .principle-more-copy {display:block;font-size:13px;line-height:1.5;color:#e7d6ad;max-width:280px}
#principes .principle-enhanced footer {position:relative;margin-top:auto;min-height:47px;padding-top:10px;align-items:center;border-top-color:#d5b46b26;color:#d5b46b;font-size:12px}
#principes .principle-trigger {display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:36px;padding:5px 0 5px 12px;border:0;background:none;color:inherit;cursor:pointer}
#principes .principle-trigger-label {font-size:9px;font-weight:400;letter-spacing:.04em;line-height:1.3}
#principes .principle-trigger-arrow {font-size:22px;line-height:1;transition:rotate .4s ease}
#principes .is-principle-open .principle-trigger-arrow {rotate:45deg}
#principes .principle-trigger:focus-visible {outline:1px solid #d5b46b;outline-offset:5px;border-radius:2px}
#principes .principle-animating::after {animation:pm-card-light 1.25s ease-out both}
#principes .principle-animating .principle-scene>svg {animation:pm-scene-in .7s cubic-bezier(.18,.75,.2,1) both}
#principes .principle-animating .principle-more-label {animation:pm-copy-in .5s ease-out .12s both}
#principes .principle-animating .principle-more-copy {animation:pm-copy-in .6s ease-out .22s both}

/* Time: repetitive work passes through a clock and becomes a completed action. */
#principes .principle-animating .pm-time-hand {transform-origin:135px 56px;animation:pm-time-turn 5.8s cubic-bezier(.45,0,.2,1) infinite}
#principes .principle-animating .pm-time-tasks {animation:pm-time-tasks 5.8s cubic-bezier(.2,.7,.2,1) infinite}
#principes .principle-animating .pm-time-ring {animation:pm-time-ring 5.8s ease-out infinite}
#principes .principle-animating .pm-time-done {transform-origin:219px 56px;animation:pm-time-done 5.8s ease-out infinite}
#principes .principle-animating .pm-time-done .pm-check {stroke-dasharray:1;animation:pm-time-check 5.8s ease-out infinite}

/* Clarity: scattered notes converge into a readable, agreed message. */
#principes .principle-animating .pm-clarity-noise {animation:pm-clarity-gather 6.4s cubic-bezier(.2,.7,.2,1) infinite}
#principes .principle-animating .pm-clarity-route {stroke-dasharray:1;animation:pm-clarity-link 6.4s ease-out infinite}
#principes .principle-animating .pm-clarity-panel {animation:pm-clarity-panel 6.4s ease-out infinite}
#principes .principle-animating .pm-clear-line {stroke-dasharray:1;animation:pm-clarity-line 6.4s ease-out infinite}
#principes .principle-animating .pm-clear-line:nth-of-type(3) {animation-delay:.25s}
#principes .principle-animating .pm-clear-line:nth-of-type(4) {animation-delay:.5s}
#principes .principle-animating .pm-clear-check {stroke-dasharray:1;animation:pm-clarity-check 6.4s ease-out infinite}

/* Durability: stable foundations are joined by a new, compatible module. */
#principes .principle-animating .pm-durable-module {transform-box:fill-box;transform-origin:center bottom;animation:pm-durable-build 6.8s cubic-bezier(.2,.75,.2,1) infinite}
#principes .principle-animating .pm-durable-module:nth-of-type(2) {animation-delay:.2s}
#principes .principle-animating .pm-durable-module:nth-of-type(3) {animation-delay:.4s}
#principes .principle-animating .pm-durable-module:nth-of-type(4) {animation-delay:.85s}
#principes .principle-animating .pm-durable-orbit {stroke-dasharray:1;animation:pm-durable-evolve 6.8s ease-in-out infinite}

/* Progress: one path is drawn, with four deliberate milestones. */
#principes .principle-animating .pm-progress-route {stroke-dasharray:1;animation:pm-progress-path 6.2s cubic-bezier(.2,.7,.3,1) infinite}
#principes .principle-animating .pm-progress-node {transform-box:fill-box;transform-origin:center;animation:pm-progress-step 6.2s ease-out infinite}
#principes .principle-animating .pm-progress-node:nth-of-type(2) {animation-delay:.65s}
#principes .principle-animating .pm-progress-node:nth-of-type(3) {animation-delay:1.25s}
#principes .principle-animating .pm-progress-node:nth-of-type(4) {animation-delay:1.85s}

/* Adoption: people join around the tool, then contribute feedback in turn. */
#principes .principle-animating .pm-adopt-person {animation:pm-adopt-join 6.6s cubic-bezier(.2,.7,.2,1) infinite}
#principes .principle-animating .pm-adopt-person:nth-of-type(2) {animation-delay:.25s}
#principes .principle-animating .pm-adopt-person:nth-of-type(3) {animation-delay:.5s}
#principes .principle-animating .pm-adopt-links {stroke-dasharray:1;animation:pm-adopt-connect 6.6s ease-out infinite}
#principes .principle-animating .pm-adopt-tool {transform-origin:140px 87px;animation:pm-adopt-tool 6.6s ease-out infinite}
#principes .principle-animating .pm-adopt-feedback {transform-box:fill-box;transform-origin:center;animation:pm-adopt-feedback 6.6s ease-out infinite}
#principes .principle-animating .pm-adopt-feedback:nth-of-type(2) {animation-delay:.65s}
#principes .principle-animating .pm-adopt-feedback:nth-of-type(3) {animation-delay:1.3s}

/* Shared framework: boundaries close around the document; agreements resolve. */
#principes .principle-animating .pm-frame-corners {transform-origin:140px 56px;animation:pm-frame-align 6.4s cubic-bezier(.2,.7,.2,1) infinite}
#principes .principle-animating .pm-frame-paper {animation:pm-frame-paper 6.4s ease-out infinite}
#principes .principle-animating .pm-frame-row {stroke-dasharray:1;animation:pm-frame-agree 6.4s ease-out infinite}
#principes .principle-animating .pm-frame-row:nth-of-type(3) {animation-delay:.35s}
#principes .principle-animating .pm-frame-sign {stroke-dasharray:1;animation:pm-frame-sign 6.4s ease-out infinite}
#principes .principle-animating .pm-frame-seal {transform-origin:212px 79px;animation:pm-frame-seal 6.4s cubic-bezier(.2,.8,.2,1) infinite}

@keyframes pm-card-light {0%{opacity:0;translate:-24% 0}35%{opacity:1}100%{opacity:0;translate:24% 0}}
@keyframes pm-scene-in {from{opacity:.45;translate:10px 0;clip-path:inset(0 0 0 80%)}to{opacity:1;translate:0 0;clip-path:inset(0)}}
@keyframes pm-copy-in {from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes pm-time-turn {0%,12%{rotate:0deg}45%,82%{rotate:360deg}100%{rotate:360deg}}
@keyframes pm-time-tasks {0%,8%{translate:0 0;opacity:.5}25%{translate:18px 0;opacity:1}40%{translate:30px 0;opacity:0}48%{translate:-10px 0;opacity:0}62%,100%{translate:0 0;opacity:.5}}
@keyframes pm-time-ring {0%,30%,65%,100%{stroke:#d5b46b}42%,53%{stroke:#fff1bf}}
@keyframes pm-time-done {0%,33%{scale:.82;opacity:.25}46%{scale:1.1;opacity:1}55%,85%{scale:1;opacity:1}100%{scale:.82;opacity:.25}}
@keyframes pm-time-check {0%,37%{stroke-dashoffset:1}52%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes pm-clarity-gather {0%,10%{translate:0 0;opacity:.5}28%{translate:19px 0;opacity:1}42%{translate:29px 0;opacity:0}55%{translate:0 0;opacity:0}76%,100%{translate:0 0;opacity:.5}}
@keyframes pm-clarity-link {0%,13%{stroke-dashoffset:1;opacity:.2}32%,65%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.2}}
@keyframes pm-clarity-panel {0%,12%{translate:6px 0;opacity:.5}34%,87%{translate:0 0;opacity:1}100%{translate:6px 0;opacity:.5}}
@keyframes pm-clarity-line {0%,24%{stroke-dashoffset:1}45%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes pm-clarity-check {0%,47%{stroke-dashoffset:1}62%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes pm-durable-build {0%,8%{translate:0 10px;opacity:.3;scale:.9}24%{translate:0 -2px;opacity:1;scale:1.02}31%,87%{translate:0 0;opacity:1;scale:1}100%{translate:0 10px;opacity:.3;scale:.9}}
@keyframes pm-durable-evolve {0%,29%{stroke-dashoffset:1;opacity:.3}59%,86%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.3}}
@keyframes pm-progress-path {0%,8%{stroke-dashoffset:1}53%,87%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes pm-progress-step {0%,7%{scale:.85;opacity:.45}15%{scale:1.2;opacity:1}25%,80%{scale:1;opacity:1}100%{scale:.85;opacity:.45}}
@keyframes pm-adopt-join {0%,7%{translate:0 8px;opacity:.35}24%,86%{translate:0 0;opacity:1}100%{translate:0 8px;opacity:.35}}
@keyframes pm-adopt-connect {0%,19%{stroke-dashoffset:1;opacity:.3}45%,86%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:1;opacity:.3}}
@keyframes pm-adopt-tool {0%,34%{scale:.86;opacity:.5}47%{scale:1.13;opacity:1}56%,86%{scale:1;opacity:1}100%{scale:.86;opacity:.5}}
@keyframes pm-adopt-feedback {0%,41%,74%,100%{scale:.65;opacity:.25}51%,61%{scale:1.3;opacity:1}}
@keyframes pm-frame-align {0%,8%{scale:1.13;opacity:.35}29%,87%{scale:1;opacity:1}100%{scale:1.13;opacity:.35}}
@keyframes pm-frame-paper {0%,8%{translate:0 5px;opacity:.5}27%,87%{translate:0 0;opacity:1}100%{translate:0 5px;opacity:.5}}
@keyframes pm-frame-agree {0%,22%{stroke-dashoffset:1}42%,87%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes pm-frame-sign {0%,43%{stroke-dashoffset:1}63%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes pm-frame-seal {0%,54%{scale:.7;opacity:.25;rotate:-15deg}67%{scale:1.12;opacity:1;rotate:2deg}75%,88%{scale:1;opacity:1;rotate:0deg}100%{scale:.7;opacity:.25;rotate:-15deg}}

@media(min-width:1440px){#principes .principle-card.principle-enhanced{padding:30px;min-height:520px}#principes .principle-enhanced h3{font-size:30px}}
@media(max-width:767px){#principes .principle-card.principle-enhanced{min-height:500px;padding:25px}#principes .principle-enhanced h3{font-size:27px;margin-top:82px}#principes .principle-scene{right:5px;top:11px;width:76%}#principes .principle-detail{min-height:78px;margin-top:14px}}
.motion-off #principes .principle-enhanced,
.motion-off #principes .principle-enhanced *,
.motion-off #principes .principle-enhanced::after {animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){#principes .principle-enhanced,#principes .principle-enhanced *,#principes .principle-enhanced::after{animation:none!important;transition:none!important}}

/* One glow follows the selected offer without changing the table's scroll width. */
.comparison-motion-wrap { position: relative; isolation: isolate; }
.comparison.comparison-motion-ready { position: relative; z-index: 1; }
.comparison-column-glow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 0;
  height: 0;
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, #d5b46b0b 0%, #d5b46b04 42%, #d5b46b15 100%);
  border-inline: 1px solid #d5b46b55;
  box-shadow: inset 0 0 26px #d5b46b08;
  transition: transform .46s cubic-bezier(.22,.61,.36,1), width .46s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}
.comparison-column-glow.is-visible { opacity: 1; }
.comparison-column-glow::before {
  content: "";
  position: absolute;
  top: -23%;
  left: 0;
  right: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, #f0d3901f 58%, #e9c77b38 87%, transparent);
  opacity: 0;
}
.comparison-column-glow.is-sweeping::before { animation: comparison-gold-sweep 1.45s cubic-bezier(.3,.1,.4,1) both; }

/* This note area is reserved at rest, so a hover never changes row heights. */
.comparison.comparison-motion-ready thead th.comparison-offer-head {
  position: relative;
  vertical-align: top;
  height: 170px;
  padding-top: 30px;
  padding-bottom: 62px;
}
.comparison.comparison-motion-ready .comparison-head-toggle {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.comparison.comparison-motion-ready .comparison-head-toggle:focus-visible {
  outline: 1px solid #d5b46b;
  outline-offset: 7px;
}
.comparison.comparison-motion-ready .comparison-offer-icon {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: #d5b46b;
  overflow: visible;
  transform-origin: center;
  transition: filter .35s ease;
}
.comparison.comparison-motion-ready thead th > .comparison-offer-note {
  position: absolute;
  z-index: 3;
  left: 12px;
  right: 12px;
  bottom: 14px;
  display: block;
  margin: 0;
  padding: 0;
  color: #e6ce94;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .01em;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  translate: 0 7px;
  transition: opacity .32s ease, translate .45s cubic-bezier(.22,.61,.36,1), visibility .32s;
}
.comparison.comparison-motion-ready thead th.is-comparison-active > .comparison-offer-note {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: .12s;
}
.comparison.comparison-motion-ready .comparison-motion-cell {
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.comparison.comparison-motion-ready .comparison-motion-cell.is-comparison-active {
  background-color: #d5b46b0c;
  box-shadow: inset 1px 0 #d5b46b2b, inset -1px 0 #d5b46b2b;
}
.comparison.comparison-motion-ready thead .comparison-motion-cell.is-comparison-active {
  color: #ead39b !important;
}
.comparison.comparison-motion-ready td > span.comparison-cell-content { display: block; }
.comparison.comparison-motion-ready .is-comparison-active > .comparison-cell-content {
  animation: comparison-content-arrive .55s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--comparison-row-order, 0) * 65ms);
}
.comparison.comparison-motion-ready .is-comparison-active .comparison-offer-icon {
  filter: drop-shadow(0 0 7px #d5b46b3a);
}
.comparison.comparison-motion-ready .is-comparison-active .comparison-offer-icon :is(path, circle) {
  stroke-dasharray: 1;
  animation: comparison-icon-draw .85s ease both;
}
.comparison.comparison-motion-ready .is-comparison-active [data-offer="impact"] .comparison-offer-icon {
  animation: comparison-impact-lock .85s cubic-bezier(.22,.61,.36,1) both;
}
.comparison.comparison-motion-ready .is-comparison-active [data-offer="impact"] circle:nth-of-type(2) {
  transform-origin: center;
  animation: comparison-target-center .8s cubic-bezier(.22,.61,.36,1) both;
}
.comparison.comparison-motion-ready .is-comparison-active [data-offer="scale"] .comparison-offer-icon {
  transform-origin: center bottom;
  animation: comparison-scale-grow .8s cubic-bezier(.22,.61,.36,1) both;
}
.comparison.comparison-motion-ready .is-comparison-active [data-offer="vision"] .comparison-offer-icon circle {
  transform-origin: center;
  animation: comparison-vision-focus .95s ease both;
}

@keyframes comparison-gold-sweep {
  0% { translate: 0 0; opacity: 0; }
  10% { opacity: 1; }
  87% { opacity: .7; }
  100% { translate: 0 560%; opacity: 0; }
}
@keyframes comparison-content-arrive {
  from { translate: 0 6px; opacity: .7; filter: blur(.5px); }
  to { translate: 0 0; opacity: 1; filter: blur(0); }
}
@keyframes comparison-icon-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes comparison-impact-lock {
  0% { scale: .78; rotate: -24deg; }
  60% { scale: 1.08; rotate: 4deg; }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes comparison-target-center {
  0%, 20% { scale: .3; opacity: .4; }
  75% { scale: 1.2; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}
@keyframes comparison-scale-grow {
  0% { scale: 1 .35; translate: 0 4px; }
  65% { scale: 1 1.08; translate: 0 0; }
  100% { scale: 1 1; translate: 0 0; }
}
@keyframes comparison-vision-focus {
  0% { scale: .4 1; translate: -3px 0; }
  40% { scale: 1 1; translate: 3px 0; }
  72% { translate: -1px 0; }
  100% { scale: 1 1; translate: 0 0; }
}
@media (max-width: 1279px) {
  .comparison.comparison-motion-ready .comparison-head-toggle { gap: 8px; }
  .comparison.comparison-motion-ready .comparison-offer-icon { width: 28px; height: 28px; flex-basis: 28px; }
}
.motion-off .comparison-motion-ready *,
.motion-off .comparison-column-glow,
.motion-off .comparison-column-glow::before {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .comparison-motion-ready *,
  .comparison-column-glow,
  .comparison-column-glow::before {
    animation: none !important;
    transition: none !important;
  }
}

/* A small breathing space at the edge, while the rail stays fixed on the right. */
.side-nav { right: .25cm; }
@media (max-width: 1279px) {
  .side-nav:not(.open) { transform: translateX(calc(100% + .25cm)); }
}
.footer .logo img {
  filter: brightness(0) saturate(100%) invert(77%) sepia(28%) saturate(665%) hue-rotate(3deg) brightness(92%) contrast(89%);
  object-fit: contain;
}

/* Case photographs: the same champagne treatment and camera movement as the covers. */
.case-panel figure { position: relative; overflow: hidden; isolation: isolate; background: #100e08; }
.case-panel figure > img {
  filter: grayscale(.78) sepia(.6) saturate(.72) brightness(.67) contrast(1.13);
  transform: scale(1.025);
  transition: filter .85s cubic-bezier(.22,1,.36,1);
}
.case-panel figure::before,
.case-panel figure::after { content: ""; position: absolute; pointer-events: none; }
.case-panel figure::before {
  inset: 0; z-index: 1;
  background: linear-gradient(155deg,rgba(213,180,107,.16),transparent 48%,rgba(6,5,2,.56));
  box-shadow: inset 0 0 0 1px rgba(213,180,107,.2);
  transition: opacity .85s ease;
}
.case-panel figure::after {
  z-index: 2; inset: -35% -70%; opacity: 0;
  background: linear-gradient(115deg,transparent 42%,rgba(244,216,154,.03) 46%,rgba(244,216,154,.19) 50%,rgba(244,216,154,.03) 54%,transparent 58%);
}
.case-panel figure:is(:hover,:focus-visible) > img {
  filter: none;
  animation: gallery-cover-drift 9s ease-in-out infinite alternate;
}
.case-panel figure:is(:hover,:focus-visible)::before { opacity: 0; }
.case-panel figure:is(:hover,:focus-visible)::after { animation: gallery-cover-light 6s ease-in-out infinite; }
.case-panel figure:focus-visible { outline: 1px solid #d5b46b; outline-offset: 4px; }
.motion-off .case-panel figure > img,
.motion-off .case-panel figure::before,
.motion-off .case-panel figure::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .case-panel figure > img,.case-panel figure::before,.case-panel figure::after { animation: none !important; transition: none !important; }
}

/* FAQ only: native details stay usable before enhancement or without JavaScript. */
:is(.faq-list,.page-faq)>details{position:relative;isolation:isolate;transition:border-color .35s,background-color .35s}
:is(.faq-list,.page-faq)>details:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,#d5b46b0d,transparent 72%);opacity:0;transition:opacity .45s}
:is(.faq-list,.page-faq)>details:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(90deg,#d5b46b,#e4c88988,transparent);transform-origin:left center;scale:0 1;transition:scale .65s cubic-bezier(.2,.65,.25,1)}
:is(.faq-list,.page-faq)>details:is(:hover,:focus-within,[open]):before{opacity:1}
:is(.faq-list,.page-faq)>details:is(:hover,:focus-within,[open]):after{scale:1 1}
:is(.faq-list,.page-faq)>details:is(:hover,:focus-within,[open]){border-color:#a38b5566;background-color:#d5b46b03}
:is(.faq-list,.page-faq)>details>summary>span:first-child:not(.faq-question-text):not(.faq-topic-icon),:is(.faq-list,.page-faq) .faq-question-number{color:#d5b46b}
:is(.faq-list,.page-faq)>.faq-motion-item>summary{display:grid;grid-template-columns:auto minmax(0,1fr) 34px 36px;align-items:center;gap:clamp(12px,2vw,28px);list-style:none;cursor:pointer;line-height:1.35;transition:color .3s}
:is(.faq-list,.page-faq)>.faq-motion-item>summary::-webkit-details-marker{display:none}
:is(.faq-list,.page-faq)>.faq-motion-item>summary::marker{content:""}
:is(.faq-list,.page-faq)>.faq-motion-item>summary:focus-visible{outline:1px solid #e1c47f;outline-offset:7px;border-radius:2px}
:is(.faq-list,.page-faq)>.faq-motion-item>summary>.faq-question-number{width:2.25ch;color:#d5b46b;font-size:clamp(27px,3vw,40px);line-height:1;font-weight:600;font-variant-numeric:tabular-nums;transition:color .3s,text-shadow .4s}
:is(.faq-list,.page-faq)>.faq-motion-item>summary>.faq-question-text{min-width:0;font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit;transition:translate .4s,color .35s}
:is(.faq-list,.page-faq)>.faq-motion-item>summary>.faq-topic-icon{display:grid;place-items:center;width:34px;height:36px;margin:0;color:#e1c47f;font-size:inherit;opacity:0;translate:-7px 3px;scale:.8;transition:opacity .3s,translate .45s cubic-bezier(.2,.65,.25,1),scale .45s cubic-bezier(.2,.65,.25,1)}
:is(.faq-list,.page-faq) .faq-topic-icon svg{display:block;width:31px;height:31px;filter:drop-shadow(0 0 7px #d5b46b20)}
:is(.faq-list,.page-faq) .faq-topic-icon path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .8s cubic-bezier(.2,.65,.25,1)}
:is(.faq-list,.page-faq) .faq-topic-icon path:nth-child(2){transition-delay:.07s}
:is(.faq-list,.page-faq)>.faq-motion-item>summary>.faq-toggle{display:grid;place-items:center;width:36px;height:36px;margin:0;flex:none;border:1px solid #a38e5a66;border-radius:50%;color:#a38e5a;font-size:23px;font-weight:200;line-height:1;transform:none;rotate:0deg;transition:rotate .45s cubic-bezier(.2,.65,.25,1),color .3s,border-color .3s,box-shadow .4s}
:is(.faq-list,.page-faq)>.faq-motion-item:is(:hover,:focus-within,[data-faq-state="open"])>summary>.faq-topic-icon{opacity:1;translate:0 0;scale:1}
:is(.faq-list,.page-faq)>.faq-motion-item:is(:hover,:focus-within,[data-faq-state="open"]) .faq-topic-icon path{stroke-dashoffset:0}
:is(.faq-list,.page-faq)>.faq-motion-item:is(:hover,:focus-within)>summary>.faq-question-number{color:#edcf8a;text-shadow:0 0 22px #d5b46b35}
:is(.faq-list,.page-faq)>.faq-motion-item:is(:hover,:focus-within)>summary>.faq-question-text{translate:3px 0;color:#e4d8bb}
:is(.faq-list,.page-faq)>.faq-motion-item[data-faq-state="open"]>summary>.faq-question-text{color:#e4c889}
:is(.faq-list,.page-faq)>.faq-motion-item:is(:hover,:focus-within)>summary>.faq-toggle{color:#e1c47f;border-color:#d5b46b;box-shadow:0 0 20px #d5b46b15}
:is(.faq-list,.page-faq)>.faq-motion-item[data-faq-state="open"]>summary>.faq-toggle{rotate:45deg;color:#e1c47f;border-color:#d5b46b;box-shadow:0 0 20px #d5b46b15}
:is(.faq-list,.page-faq) .faq-answer{overflow:hidden}
:is(.faq-list,.page-faq) .faq-answer-inner{display:flow-root;padding:2px clamp(8px,1vw,20px) 5px clamp(45px,6vw,94px)}
:is(.faq-list,.page-faq) .faq-answer-inner p{margin:20px 0 0;max-width:800px;color:#bcb5a7;line-height:1.75}
:is(.faq-list,.page-faq) .faq-answer-inner a{color:#d5b46b;text-underline-offset:4px}
:is(.faq-list,.page-faq) .faq-answer-inner a:focus-visible{outline:1px solid #e1c47f;outline-offset:4px}
@media(max-width:600px){:is(.faq-list,.page-faq)>.faq-motion-item>summary{grid-template-columns:32px minmax(0,1fr) 25px 29px;gap:9px;font-size:17px}:is(.faq-list,.page-faq)>.faq-motion-item>summary>.faq-question-number{width:32px;font-size:27px}:is(.faq-list,.page-faq)>.faq-motion-item>summary>.faq-topic-icon{width:25px;height:29px}:is(.faq-list,.page-faq) .faq-topic-icon svg{width:25px;height:25px}:is(.faq-list,.page-faq)>.faq-motion-item>summary>.faq-toggle{width:29px;height:29px;font-size:21px}:is(.faq-list,.page-faq) .faq-answer-inner{padding-left:41px;padding-right:5px}:is(.faq-list,.page-faq) .faq-answer-inner p{font-size:13px;margin-top:17px}}
.motion-off :is(.faq-list,.page-faq)>details,.motion-off :is(.faq-list,.page-faq)>details:before,.motion-off :is(.faq-list,.page-faq)>details:after,.motion-off :is(.faq-list,.page-faq) .faq-motion-item *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){:is(.faq-list,.page-faq)>details,:is(.faq-list,.page-faq)>details:before,:is(.faq-list,.page-faq)>details:after,:is(.faq-list,.page-faq) .faq-motion-item *{animation:none!important;transition:none!important}}

/* Gold wordmark and promise with a synchronized white light. */
.hero .hero-brand h1 {
  background-color: #d5b46b;
  background-image: none;
  animation: none;
}
body.home-hero-motion .hero {
  --hero-white-light: linear-gradient(110deg, #d5b46b 35%, #d5b46b 42%, #f3e0b7 47%, #fff 51%, #f3e0b7 55%, #d5b46b 63%, #d5b46b 100%);
  --hero-gold-timing: 8.5s cubic-bezier(.4,0,.2,1) infinite;
}
body.home-hero-motion .hero .hero-promise,
body.home-hero-motion .hero .hero-promise span {
  color: #d5b46b;
  -webkit-text-fill-color: #d5b46b;
  background: none;
  animation: none;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  body.home-hero-motion .hero .hero-brand h1,
  body.home-hero-motion .hero .hero-promise {
    background-size: 300% 100%;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    animation: hero-promise-gold-light var(--hero-gold-timing);
  }
  body.home-hero-motion .hero .hero-brand h1 {
    background-image: var(--hero-white-light);
  }
  body.home-hero-motion .hero .hero-promise {
    background-image: var(--hero-white-light);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  body.home-hero-motion .hero .hero-promise span {
    color: inherit;
    -webkit-text-fill-color: inherit;
  }
  body.home-hero-motion.hero-nav-visible .hero .hero-brand h1,
  body.home-hero-motion.hero-nav-visible .hero .hero-promise {
    animation-play-state: paused;
  }
}
@keyframes hero-promise-gold-light {
  0%, 16% { background-position: 100% 50%; }
  76%, 100% { background-position: 0% 50%; }
}

/* Keep the existing right-edge margin and drawer transform intact. */
body.home-hero-motion .side-nav,
body.home-hero-motion .site-header .menu-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 24px 0;
  transition: opacity .5s ease, translate .7s cubic-bezier(.22,.61,.36,1), visibility .5s, transform .4s;
}
body.home-hero-motion.hero-nav-visible .side-nav,
body.home-hero-motion.hero-nav-visible .site-header .menu-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
}
body.home-hero-motion.motion-off .side-nav,
body.home-hero-motion.motion-off .site-header .menu-button { transition: none !important; }
body.home-hero-motion.motion-off .hero .hero-brand h1 {
  background: #d5b46b;
  animation: none !important;
}
body.home-hero-motion.motion-off .hero .hero-promise,
body.home-hero-motion.motion-off .hero .hero-promise span {
  background: none;
  color: #d5b46b;
  -webkit-text-fill-color: #d5b46b;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body.home-hero-motion .side-nav,
  body.home-hero-motion .site-header .menu-button { transition: none !important; }
  body.home-hero-motion .hero .hero-brand h1 {
    background: #d5b46b;
    animation: none !important;
  }
  body.home-hero-motion .hero .hero-promise,
  body.home-hero-motion .hero .hero-promise span {
    background: none;
    color: #d5b46b;
    -webkit-text-fill-color: #d5b46b;
    animation: none !important;
  }
}