/* All responsive layout changes in one place. Figma mobile reference: 390px. */
@media(max-width:1100px) and (min-width:761px){
  .hero-copy{padding-left:7%;padding-right:5%}.hero-eyebrow{font-size:18px}.hero h1{font-size:clamp(42px,5vw,65px)}
  .projects-grid{grid-template-rows:16.5vw 8vw 22vw}.project h3{font-size:clamp(17px,2.1vw,27px)}.project-tags li{font-size:clamp(12px,1.6vw,18px)}.project--soon{font-size:clamp(18px,2.2vw,28px);padding-inline:22px}
  .service-list{gap:14px}.service-card{padding:20px}.service-dot{left:22px}.service-copy{left:22px}.service-name{font-size:22px}.service-card.is-active .service-name{font-size:34px}.service-description{font-size:18px}
  .about-copy{padding-left:var(--page-gutter)}.about-copy p{font-size:18px}.about-values{flex-wrap:wrap}.contact h2{font-size:49px}.contact p{font-size:21px}
}
@media(max-width:760px){
 :root{--page-gutter:24px;--heading-size:36px;--radius-card:17px}
 .menu-toggle{position:fixed;left:25px;top:25px;z-index:1001}
 .section-pad{padding-block:34px}.page-container{width:calc(100% - 48px)}
 .hero{display:flex;flex-direction:column}.hero-art{height:315px;flex:none}.hero-pattern--desktop,.hero-logo--desktop{display:none}.hero-pattern--mobile{display:block;width:100%;height:100%;object-fit:cover}.hero-logo--mobile{display:block;position:absolute;top:21px;right:17px;width:217px;height:auto}.hero-story{height:291px;display:block}.hero-badge{width:52px;height:52px;top:22px;right:24px}.hero-copy{padding:38px 24px 0}.hero-eyebrow{font-size:12px;line-height:1.35}.hero h1{font-size:46px;line-height:1.04;margin:24px 0 24px}.hero-cta{width:181px;height:49px;padding-inline:16px;border-radius:9px}
 .projects{padding-top:34px;padding-bottom:21px}.projects .section-title{font-size:31px;margin-bottom:20px}.projects-grid{display:flex;flex-direction:column;gap:8px}.project h3{font-size:24px}.project-tags{gap:8px}.project-tags li{font-size:16px;padding:4px 8px}.external-icon{width:26px;height:26px}.project--cutting{height:278px}.project--cutting .project-image{left:16px;top:16px;width:calc(100% - 32px);height:156px;border-radius:12px}.project--cutting .project-heading{left:16px;right:16px;bottom:67px}.project--cutting .project-tags{left:16px;bottom:22px}.project--marine{height:240px;padding:20px 18px}.project--marine .project-heading{align-items:center}.project--marine .project-heading h3{line-height:1.06}.project--marine .external-icon{display:none}.project--marine .project-tags{margin-top:11px}.project--marine .project-tags li{font-size:15px}.marine-app{display:none}.marine-penguin{top:122px;left:18px;width:calc(100% - 36px);height:117px;object-fit:cover;object-position:center top}.project--soon{display:none}.project--fijnbos{height:305px}.project--fijnbos .project-laptop{left:4%;top:16px;width:92%;height:200px}.project--fijnbos .project-info{left:18px;top:228px}.project--fijnbos .project-tags{margin-top:8px}.project--fijnbos .external-icon{display:none}.project--dxl{height:272px}.project--dxl .project-laptop{left:11%;top:28px;width:78%;height:180px}.project--dxl .project-tags{left:0;bottom:22px}
 .services{padding-block:35px 20px}.services .section-title{margin-bottom:7px}.services-intro{font-size:16px;line-height:1.32;margin:0 0 35px}.service-list{display:flex;flex-direction:column;gap:16px}.service-card,.service-card.is-active{flex:none;width:100%;height:116px;border-radius:17px;padding:0}.service-card.is-active{height:216px}.service-dot{width:69px;height:69px;left:19px;top:24px}.service-copy{top:36px;left:110px;right:20px}.service-name{font-size:23px;line-height:1.05}.service-name br{display:none}.service-card.is-active .service-copy{top:31px;left:22px;right:22px}.service-card.is-active .service-name{font-size:35px}.service-card.is-active .service-name br{display:block}.service-description{font-size:18px}.service-card.is-active .service-description{margin-top:30px;max-height:105px}
 .about{display:flex;flex-direction:column-reverse}.about-visual{height:412px;padding:28px 17px}.about-visual img{width:356px;max-height:356px;object-fit:contain}.about-copy{padding:20px 24px 32px;min-height:506px}.about .section-title{font-size:31px;margin-bottom:35px}.about-copy p{font-size:17px;line-height:1.35;margin:0 0 15px}.about-copy p:first-of-type{font-size:19px;margin-bottom:17px}.about-values{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px 7px;margin-top:19px;white-space:nowrap}.about-values li{font-size:10.5px;gap:5px}.about-values i{font-size:17px}
 .testimonials{min-height:460px;padding:38px 0 24px}.testimonials .section-title{font-size:31px;margin-bottom:32px}.testimonial{display:block}.testimonial-photo{width:72px;height:72px;border-width:3px}.quote-mark{position:absolute;top:0;left:91px;font-size:62px}.testimonial-copy{padding-top:30px}.testimonial blockquote{font-size:21px;line-height:1.31}.testimonial-copy p{margin-top:18px;font-size:13px}.testimonial-controls{bottom:-27px;right:0}
 .contact,.contact-inner{min-height:427px}.contact-inner{padding-top:42px}.contact-copy{max-width:100%}.contact h2{font-size:39px;line-height:1.07;max-width:305px}.contact p{max-width:342px;margin-top:16px;font-size:18px;line-height:1.3}.contact-badge{position:absolute;right:0;top:42px;width:70px;height:70px}.contact-actions{display:flex;flex-direction:column;gap:12px;margin-top:42px}.contact-button{width:100%;height:56px}
 .footer .page-container{min-height:102px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.footer small{font-size:12px}
}
@media(max-width:375px){.hero h1{font-size:42px}.about-values li{font-size:9px}.testimonial blockquote{font-size:19px}.contact h2{font-size:35px}.project h3{font-size:21px}.service-card.is-active .service-name{font-size:32px}}

/* Keep the light wordmark over orange without altering the original art. */
@media (max-width: 760px) {
  .hero-pattern--mobile { object-position: right center; }
  .hero-logo--mobile { right: 17px; width: min(56vw, 217px); }
}

@media (max-width: 760px) {
  .hero h1 { font-size: 42px; }
  .hero-eyebrow { letter-spacing: .055em; }
  .hero-cta { width: 190px; }
  .project h3 { font-size: 21px; }
  .service-card.is-active .service-name { font-size: 32px; }
  .about-visual { height: 320px; }
  .about-visual img { width: min(70%, 250px); max-height: 250px; }
  .about-values svg { width: 17px; height: 17px; }
  .testimonial blockquote { font-size: 18px; }
  .contact h2 { font-size: 35px; }
}
@media (max-width: 375px) {
  .hero h1 { font-size: 39px; }
  .project h3 { font-size: 20px; }
  .service-card.is-active .service-name { font-size: 30px; }
  .contact h2 { font-size: 33px; }
}

@media (max-width: 760px) {
  /* Continue the existing orange artwork behind the full light wordmark. */
  .hero-art::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 72%;
    height: 120px;
    background: var(--orange-pattern);
    border-radius: 0 0 0 55% / 0 0 0 42%;
    pointer-events: none;
  }
  .hero-logo--mobile { z-index: 2; }
  .about-visual { height: auto; min-height: 0; padding: 14px; }
  .about-visual img { width: 100%; max-width: none; max-height: none; height: auto; }
  .testimonials { min-height: 0; padding-block: 38px 30px; }
  .testimonials .section-title { margin-bottom: 26px; }
  .testimonial { padding-bottom: 64px; }
  .testimonial-controls { left: 50%; right: auto; bottom: 0; }
  .contact, .contact-inner { min-height: 0; }
  .contact-inner { padding-top: 38px; padding-bottom: 38px; }
  .contact-copy { max-width: 100%; }
  .contact h2 { max-width: calc(100% - 84px); }
  .contact-badge { top: 38px; }
  .contact-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
  }
  .contact-button {
    min-width: 0;
    height: 54px;
    padding-inline: 11px;
    font-size: clamp(10px, 2.7vw, 13px);
  }
  .contact-button i { font-size: 16px; }
}
@media (max-width: 359px) {
  .contact-actions { grid-template-columns: 1fr; }
  .contact-button { font-size: 13px; }
}

@media (max-width: 760px) {
  .site-navigation { padding: 22px 24px 30px; }
  .site-navigation .nav-brand { width: min(217px, 75%); margin: 46px auto 40px; }
  .site-navigation .menu-close { right: 16px; top: 16px; }
  .nav-links { gap: 4px; }
  .site-navigation .nav-links a { min-height: 45px; font-size: 17px; }
  .nav-socials { margin-top: 24px; gap: 12px; }
}
@media (max-height: 760px) {
  .site-navigation .nav-brand { margin-top: 40px; margin-bottom: 38px; }
  .nav-links { gap: 3px; }
  .site-navigation .nav-links a { min-height: 43px; }
  .nav-spacer { min-height: 16px; }
  .nav-socials { margin-top: 22px; }
}

/* An open desktop menu owns a real column throughout the page. */
@media (min-width: 761px) {
  body.nav-open { overflow: auto; }
  body.nav-open::before { display: none; }
  main > section:not(#hero), .footer {
    transition: margin-left 960ms var(--ease-calm), width 960ms var(--ease-calm);
  }
  body.nav-open main > section:not(#hero),
  body.nav-open .footer {
    margin-left: var(--nav-sidebar-width);
    width: calc(100% - var(--nav-sidebar-width));
  }
  body.nav-open .about-copy {
    padding-left: max(var(--page-gutter), calc((100vw - var(--nav-sidebar-width) - var(--page-width))/2));
  }
}
/* A narrower desktop still gets a usable layout beside the open menu. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.nav-open .projects-grid { display: flex; flex-direction: column; gap: 12px; }
  body.nav-open .project { flex: none; }
  body.nav-open .project--cutting { height: 300px; }
  body.nav-open .project--marine { height: 220px; }
  body.nav-open .project--soon { min-height: 90px; }
  body.nav-open .project--fijnbos,
  body.nav-open .project--dxl { height: 260px; }
  body.nav-open .service-list { flex-direction: column; }
  body.nav-open .service-card { flex: none; width: 100%; height: 110px; }
  body.nav-open .service-card.is-active { height: 210px; }
  body.nav-open .service-dot { top: 22px; width: 66px; height: 66px; }
  body.nav-open .service-copy { left: 105px; top: 32px; }
  body.nav-open .service-card.is-active .service-copy { left: 22px; top: 27px; }
  body.nav-open .service-card.is-active .service-description { margin-top: 20px; }
  body.nav-open .about { display: flex; flex-direction: column-reverse; }
  body.nav-open .about-copy { padding: 34px var(--page-gutter); }
  body.nav-open .about-visual { padding: 16px; }
  body.nav-open .testimonial { display: block; }
  body.nav-open .testimonial-photo { width: 90px; height: 90px; }
  body.nav-open .quote-mark { position: absolute; left: 105px; top: 0; }
  body.nav-open .testimonial-copy { padding-top: 25px; }
  body.nav-open .contact-inner { min-height: 0; padding-bottom: 40px; }
  body.nav-open .contact-copy { max-width: 100%; }
  body.nav-open .contact h2 { max-width: calc(100% - 105px); font-size: 38px; }
  body.nav-open .contact-badge { width: 90px; height: 90px; }
  body.nav-open .contact-actions { flex-wrap: wrap; gap: 12px; margin-top: 25px; }
}
@media(max-width:760px){
  .project--marine{padding:0}
  .project--marine>a{padding:20px 18px}
  .project--fijnbos>a{flex-direction:column;gap:5px;padding:16px 18px 20px}
  .project--fijnbos .project-laptop{position:static;width:100%;height:185px}
  .project--fijnbos .project-info{position:static;width:100%}
  .footer .page-container{display:flex}
  .footer .page-container small:last-child{text-align:center}
}
@media(min-width:761px) and (max-width:1100px){
  body.nav-open .project--fijnbos>a{flex-direction:column;gap:0;padding:10px 18px}
  body.nav-open .project--fijnbos .project-laptop{width:100%;height:175px}
  body.nav-open .project--fijnbos .project-info{width:100%}
  .footer .page-container{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
  .footer .page-container small:last-child{text-align:center}
}

/* 2026-10 portfolio and responsive refinements */
@media (min-width:761px) and (max-width:1100px){
 .service-card.is-active .service-copy{height:calc(100% - 95px)}
}
@media (max-width:760px){
 .hero{min-height:100vh;min-height:100dvh}.hero-story{height:auto;min-height:320px;padding-bottom:25px}
 .hero-copy{padding-bottom:12px}.hero-description{max-width:38ch}
 .projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .project--cutting,.project--marine,.project--fijnbos,.project--dxl{grid-column:1/-1;grid-row:auto}
 .service-card.is-active{min-height:240px;height:auto}
 .service-card.is-active .service-copy{height:calc(100% - 55px)}
 .service-card.is-active .service-description{margin-top:18px}
 .service-card.is-active .service-price{margin-top:auto;padding-top:9px}
 .about-visual{padding:24px 14px;min-height:260px}
 .about-visual img{width:min(75%,350px);max-height:none;height:auto}
 .about-values{display:flex;flex-wrap:wrap;white-space:normal;gap:10px 12px}
 .about-values li{font-size:clamp(9px,2.5vw,12px)}
 .contact-button span{white-space:normal}
}
@media (max-width:380px){.projects-grid{gap:7px}.project--connected,.project--branding{min-height:160px}.service-card.is-active{min-height:260px}}


/* Mobile hero: equal-height panels with the story centered in the lower half. */
@media (max-width: 760px) {
  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .hero-art,
  .hero-story {
    flex: 0 0 50%;
    height: 50%;
    min-height: 0;
  }
  .hero-logo--mobile {
    top: clamp(14px, 4vh, 28px);
    right: clamp(14px, 4vw, 22px);
    width: clamp(44px, 15vw, 66px);
    height: auto;
    z-index: 2;
  }
  .hero-badge { display: none; }
  .hero-copy {
    height: 100%;
    padding: clamp(14px, 4vh, 30px) clamp(16px, 6vw, 28px);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
  }
  .hero-eyebrow {
    max-width: 80%;
    font-size: clamp(9px, 2.9vw, 13px);
    line-height: 1.3;
    letter-spacing: .045em;
  }
  .hero h1 {
    margin: 0;
    font-size: clamp(30px, 8.4vw, 42px);
    line-height: 1.02;
  }
  .hero-description {
    max-width: 39ch;
    color: var(--white);
    font-size: clamp(12px, 3.6vw, 15px);
    line-height: 1.25;
  }
  .hero-cta {
    width: clamp(168px, 48vw, 190px);
    height: 46px;
    flex: none;
  }
}


/* Portfolio tile composition, including narrow screens */
@media(max-width:1100px){
 .project--connected .project-mini-copy{top:43%;left:56%;right:9%}
 .project--connected>a>img{bottom:-2%;height:122%}
 .project--connected h3,.project--branding h3{font-size:clamp(11px,1.5vw,17px)}
 .project-mini-tag{font-size:clamp(8px,1vw,11px);padding:3px 6px}
}
@media(max-width:760px){
 .project--connected,.project--branding{grid-column:auto;grid-row:3;height:116px;min-height:116px}
 .project--connected>a,.project--branding>a{display:block;padding:0}
 .project--connected>a>img{left:-2%;bottom:-2%;width:58%;height:122%;max-height:none;object-fit:cover;object-position:center}
 .project--connected .project-mini-copy{left:55%;right:8%;top:41%}
 .project--branding>a>img{right:5%;width:38%;height:75%;max-height:none}
 .project--branding .project-mini-copy{left:5%;width:51%;top:47%}
 .project--connected h3,.project--branding h3{font-size:clamp(10px,2.5vw,15px);margin-bottom:5px}
 .project-mini-tag{font-size:clamp(8px,1.8vw,10px);padding:3px 6px;white-space:nowrap}
 .project--connected .external-icon,.project--branding .external-icon{width:18px;height:18px;top:6px;right:6px}
}
@media(max-width:380px){
 .project--connected,.project--branding{height:110px;min-height:110px}
 .project--connected .project-mini-copy{top:39%;right:6%}
 .project--connected h3,.project--branding h3{font-size:10px}
 .project-mini-tag{font-size:8px;padding:3px 5px}
}

/* Keep the compact bento tiles readable when the portfolio stacks on mobile. */
@media (max-width: 760px) {
  .projects-grid { display: flex; flex-direction: column; gap: 10px; }
  .project--connected,
  .project--branding {
    flex: none;
    width: 100%;
    height: 150px;
    min-height: 150px;
  }
  .project--connected .project-mini-copy { left: 54%; right: 9%; top: 50%; }
  .project--branding .project-mini-copy { left: 6%; width: 48%; top: 50%; }
  .project--connected h3,
  .project--branding h3 {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.12;
    margin-bottom: 7px;
  }
  .project--connected .project-mini-tag,
  .project--branding .project-mini-tag {
    font-size: clamp(9px, 2.8vw, 11px);
    padding: 4px 7px;
  }
  .project--connected > a > img { left: -2%; width: 54%; height: 122%; }
  .project--branding > a > img { right: 6%; width: 37%; height: 76%; }
}

@media (max-width: 760px) {
  html.mobile-project-toggle-ready .projects-grid { gap: 18px; }
  .project--cutting { order: 1; }
  .project--fijnbos { order: 2; }
  .project--dxl { order: 3; }
  .project--marine { order: 4; }
  .project--connected { order: 5; }
  .project--branding { order: 6; }
  .projects-grid .project {
    transition: height 520ms var(--ease-calm), min-height 520ms var(--ease-calm),
                margin 520ms var(--ease-calm), opacity 360ms ease,
                transform 520ms var(--ease-calm);
  }
  .projects-grid .project.is-mobile-collapsed {
    height: 0 !important;
    min-height: 0 !important;
    margin-block: -9px;
    border-width: 0;
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
  }
  .projects-toggle {
    display: none;
    min-width: 152px;
    min-height: 46px;
    margin: 24px auto 0;
    padding: 10px 22px;
    border: 1px solid var(--orange);
    border-radius: 999px;
    background: transparent;
    color: var(--orange);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 250ms ease, color 250ms ease, transform 250ms ease;
  }
  html.mobile-project-toggle-ready .projects-toggle { display: block; }
  .projects-toggle:hover { background: var(--orange); color: var(--white); }
  .projects-toggle:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .projects-grid .project { transition-duration: .01ms !important; }
  .projects-toggle { transition-duration: .01ms !important; }
}

@media (max-width: 760px) {
  .services-intro { display: none; }
  .service-card:not(.is-active) .service-name br { display: block; }
  .about-visual { padding-inline: 24px; }
  .about-visual img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
  }
  .contact h2 { max-width: 100%; }
  .contact-inner { padding: 46px 24px 52px; }
  .contact-logo { width: min(200px, 58vw); margin-bottom: 20px; }
  .contact h2 { font-size: clamp(30px, 8vw, 38px); line-height: 1.08; }
  .contact p { margin-top: 14px; font-size: 17px; line-height: 1.35; }
  .contact-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 340px);
    gap: 11px;
    margin-top: 26px;
  }
  .contact-button { width: 100%; height: 54px; font-size: 13px; }
}
@media (max-width: 760px) {
  .testimonials:not(.reviews-hidden) { padding: 38px 0 60px; }
  .testimonials:not(.reviews-hidden) .section-title { max-width: 300px; margin: 0 auto 22px; font-size: 25px; }
  .testimonials:not(.reviews-hidden) .testimonial { grid-template-columns: minmax(0, 1fr) 34%; }
  .testimonials:not(.reviews-hidden) .testimonial-photo { min-height: 250px; }
  .testimonials:not(.reviews-hidden) .testimonial-copy { padding: 18px 14px; }
  .testimonials:not(.reviews-hidden) .testimonial blockquote { font-size: 14px; line-height: 1.35; }
  .testimonials:not(.reviews-hidden) .testimonial-copy p { font-size: 9px; line-height: 1.3; }
}