/* Motion remains calm and supports reduced-motion settings. */
.hero-cta,.contact-button,.project{transition:transform .5s var(--ease-calm),filter .5s var(--ease-calm)}
@media(hover:hover){.hero-cta:hover,.contact-button:hover{transform:translateY(-3px)}.project:has(a):hover{transform:translateY(-4px)}.project--marine:hover .marine-penguin{transform:translateY(-5px)}}
.marine-penguin{transition:transform .7s var(--ease-calm)}
@keyframes about-values-marquee{to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){.about-values-track{animation:none;transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(prefers-reduced-motion:no-preference){.project.can-reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-calm),transform .8s var(--ease-calm)}.project.can-reveal.is-visible{opacity:1;transform:translateY(0)}}

/* Restore the original menu choreography: the story panel fills the hero. */
@media (min-width: 761px) {
  .hero-art, .hero-story { min-width: 0; }
  .hero {
    transition: grid-template-columns 960ms var(--ease-calm), padding-left 960ms var(--ease-calm);
  }
  .hero-art {
    transition: opacity 620ms ease, transform 960ms var(--ease-calm);
  }
  body.nav-open .hero {
    grid-template-columns: 0 minmax(0, 1fr);
    padding-left: min(320px, 85vw);
  }
  body.nav-open .hero-art {
    opacity: 0;
    transform: translateX(-90px) scale(1.015);
  }
  .hero-copy {
    transition: transform 960ms var(--ease-calm);
  }
  body.nav-open .hero-copy { transform: translateX(clamp(0px, 4vw, 48px)); }
  body.nav-open::before { background: rgba(27, 20, 18, .035); }
}
.site-navigation a {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity 520ms ease, transform 620ms var(--ease-calm), color 250ms ease;
}
.site-navigation.is-open a { opacity: 1; transform: translateX(0); }
.site-navigation.is-open a:nth-of-type(1) { transition-delay: 240ms; }
.site-navigation.is-open a:nth-of-type(2) { transition-delay: 295ms; }
.site-navigation.is-open a:nth-of-type(3) { transition-delay: 350ms; }
.site-navigation.is-open a:nth-of-type(4) { transition-delay: 405ms; }
.site-navigation.is-open a:nth-of-type(5) { transition-delay: 460ms; }
.site-navigation.is-open a:nth-of-type(6) { transition-delay: 515ms; }

/* A measured, one-time rise gives every section the same rhythm on both layouts. */
@media (prefers-reduced-motion: no-preference) {
  .can-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1150ms cubic-bezier(.25,.55,.25,1),
                transform 1350ms cubic-bezier(.25,.55,.25,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .project.can-reveal {
    transform: translateY(32px);
    transition: opacity 1150ms cubic-bezier(.25,.55,.25,1),
                transform 1350ms cubic-bezier(.25,.55,.25,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .can-reveal.is-visible { opacity: 1; transform: translateY(0); }
  .project.can-reveal.is-visible { opacity: 1; transform: translateY(0); }
  .project.can-reveal.is-visible:has(a):hover { transform: translateY(-4px); }
  .projects-grid img { transition: opacity 650ms ease; }
  .projects-grid img.image-loading { opacity: 0; }
  /* The panels enter over a dark stage, followed by the logo and copy. */
  html.hero-intro .hero { background: var(--ink); overflow: hidden; isolation: isolate; }
  html.hero-intro .hero-art {
    animation: hero-panel-from-left 1600ms cubic-bezier(.32,.65,.25,1) both;
  }
  html.hero-intro .hero-story {
    animation: hero-panel-from-right 1600ms cubic-bezier(.32,.65,.25,1) both;
  }
  @keyframes hero-panel-from-left {
    from { transform: translateX(-102%); }
    to { transform: translateX(0); }
  }
  @keyframes hero-panel-from-right {
    from { transform: translateX(102%); }
    to { transform: translateX(0); }
  }
  @media (max-width: 760px) {
    html.hero-intro .hero-art { animation-name: hero-panel-from-top; }
    html.hero-intro .hero-story { animation-name: hero-panel-from-bottom; }
  }
  @keyframes hero-panel-from-top {
    from { transform: translateY(-102%); }
    to { transform: translateY(0); }
  }
  @keyframes hero-panel-from-bottom {
    from { transform: translateY(102%); }
    to { transform: translateY(0); }
  }
}

/* Small responses to interaction; all colour changes use the shared palette. */
.hero-cta,
.contact-button,
.testimonial-controls button {
  transition: background-color .35s ease, color .35s ease,
              transform .35s var(--ease-calm), box-shadow .35s ease;
}
.project-heading, .project .external-icon {
  transition: color .35s ease, filter .35s ease;
}
.service-card {
  transition: flex-grow .9s var(--ease-calm), background-color .65s var(--ease-calm),
              color .65s var(--ease-calm), border-color .35s ease,
              box-shadow .35s ease, transform .35s var(--ease-calm);
}
.testimonial-controls button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  line-height: 1;
}
@media (hover: hover) {
  .hero-cta:hover {
    background: var(--orange-hover);
    box-shadow: 0 8px 20px var(--card-shadow);
  }
  .project--cutting:has(a):hover .project-heading,
  .project--dxl:has(a):hover .external-icon { color: var(--orange-deep); }
  .project--marine:hover .project-heading,
  .project--fijnbos:hover .project-heading { color: var(--brown); }
  .service-card:not(.is-active):hover {
    transform: translateY(-3px);
    border-color: var(--peach-border);
    box-shadow: 0 10px 26px var(--card-shadow);
  }
  .testimonial-controls button:hover { background: var(--pink-soft); }
  .contact-button--primary:hover { background: var(--orange-deep); box-shadow: 0 7px 18px var(--card-shadow); }
  .contact-button--secondary:hover { background: var(--orange-hover); box-shadow: 0 7px 18px var(--card-shadow); }
  .site-navigation a:hover { transform: translateX(4px); }
}
.hero-cta:active, .contact-button:active, .testimonial-controls button:active,
.service-card:active { transform: scale(.97); }
.project a:active { filter: brightness(.94); }
.project a:focus-visible { outline-offset: -5px; }
.service-card:focus-visible, .testimonial-controls button:focus-visible,
.contact-button:focus-visible, .hero-cta:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Sidebar link and action states. */
.site-navigation .nav-action,
.site-navigation .nav-links a,
.site-navigation .menu-close {
  transition: background-color .35s ease, color .35s ease,
              transform .35s var(--ease-calm), box-shadow .35s ease;
}
@media (hover: hover) {
  .site-navigation .nav-links a:hover { background: var(--orange-hover); color: var(--orange); }
  .site-navigation .nav-action--phone:hover { background: var(--orange-deep); color: var(--cream); }
  .site-navigation .nav-action--whatsapp:hover { background: var(--orange-hover); }
  .site-navigation .nav-action:hover { transform: translateY(-2px); box-shadow: 0 8px 18px var(--card-shadow); }
  .site-navigation .menu-close:hover { background: var(--orange-hover); }
}
.site-navigation .nav-action:active,
.site-navigation .nav-links a:active,
.site-navigation .menu-close:active { transform: scale(.97); }
.site-navigation a:focus-visible,
.site-navigation button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.nav-social-icon{transition:transform .35s var(--ease-calm),background-color .35s ease,color .35s ease,border-color .35s ease}
@media(hover:hover){.site-navigation .nav-social-icon:hover{transform:translateY(-3px);background:var(--orange-hover);color:var(--orange-deep);border-color:var(--peach-border)}}
.site-navigation .nav-social-icon:active{transform:scale(.94)}
.project--marine:focus-within .project-heading,.project--fijnbos:focus-within .project-heading{color:var(--brown)}