/* Final polish for the live homepage. Loaded after the main styles. */

.hero-photo{
  content:url("https://images.pexels.com/photos/8783843/pexels-photo-8783843.jpeg?auto=compress&cs=tinysrgb&w=1800");
}

.hub-demo{
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.hub-demo-browser{
  width:100%;
  background:#fff;
  box-shadow:none !important;
  overflow:visible !important;
}

.hub-demo-topbar{
  border-top-left-radius:inherit;
  border-top-right-radius:inherit;
}

.hero--photo h1{
  max-width:20ch;
  font-size:clamp(2.15rem,4.2vw,3.55rem);
  line-height:1.04;
}

.hero-photo-card{
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

.request-modal{
  place-items:start center !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(.85rem,3vw,var(--s-5)) !important;
}

.request-dialog{
  max-height:calc(100dvh - clamp(1.7rem,6vw,5rem)) !important;
  overflow-y:auto !important;
}

@media (min-width:1100px){
  .nav-links{
    gap:.45rem;
  }

  .nav-links a,
  .header-cta{
    width:176px;
    min-height:46px;
    padding:.62rem .7rem !important;
    justify-content:center;
    text-align:center;
    font-size:var(--fs-14);
    line-height:1.05;
    white-space:nowrap;
  }

  .header-cta svg{
    width:15px;
    height:15px;
  }
}

html{
  background:#fff;
}

body{
  background:
    radial-gradient(980px 620px at 12% 10%,rgba(168,213,162,.20),rgba(168,213,162,0) 68%),
    radial-gradient(860px 560px at 92% 31%,rgba(220,239,210,.32),rgba(220,239,210,0) 70%),
    radial-gradient(900px 620px at 18% 73%,rgba(247,251,244,.84),rgba(247,251,244,0) 72%),
    linear-gradient(180deg,#fff 0%,#fbfdf9 22%,#f8fcf5 47%,#fff 72%,#f7fbf4 100%) !important;
  background-attachment:scroll;
}

main,
main > section,
.hero,
.hero--photo,
.section,
.home-cards,
.work-overview,
.missie,
.missie--wide{
  background:transparent !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

main > section::before,
main > section::after,
.section::before,
.section::after,
.home-cards::before,
.home-cards::after,
.work-overview::before,
.work-overview::after,
.missie::before,
.missie::after{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.hub-demo-card--roof{
  background:
    linear-gradient(180deg,rgba(18,34,23,.06),rgba(18,34,23,.74)),
    url("https://images.unsplash.com/photo-1753702449465-6100831e4b6f?auto=format&fit=crop&w=900&q=70") center 42%/cover !important;
}

.hub-demo-card--report{
  background:
    linear-gradient(180deg,rgba(18,34,23,.08),rgba(18,34,23,.78)),
    url("https://images.unsplash.com/photo-1524247108137-732e0f642303?auto=format&fit=crop&w=900&q=70") center 54%/cover !important;
}

@media (min-width:1100px){
  :root{
    --page-max:min(1560px,calc(100vw - 3rem));
  }

  .site-header > .container,
  .hero--photo .container,
  .work-overview > .container,
  .home-card-grid--single,
  .missie--wide > .container{
    width:var(--page-max);
    max-width:var(--page-max);
    margin-inline:auto;
    padding-inline:0;
  }
}

.work-copy h2{
  font-size:clamp(var(--fs-30),3.15vw,var(--fs-44));
  line-height:1.05;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:auto;
}

.missie-card h2,
.event-card-content h2{
  font-size:clamp(var(--fs-30),3.15vw,var(--fs-44)) !important;
  line-height:1.05 !important;
}

.work-topic-list{
  display:grid;
  gap:.75rem;
  margin-top:var(--s-6);
}

.work-topic-list article{
  padding:1rem 1.1rem;
  border:1px solid var(--color-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 34px -30px rgba(26,77,46,.45);
}

.work-topic-list h3{
  color:var(--nacht);
  font-size:var(--fs-18);
  line-height:1.12;
}

.work-topic-list ul{
  display:grid;
  gap:.35rem;
  margin:.7rem 0 0;
  padding:0;
  list-style:none;
}

.work-topic-list li{
  position:relative;
  padding-left:1.15rem;
  color:var(--color-fg-muted);
  font-size:clamp(var(--fs-15),1.1vw,var(--fs-16));
  line-height:1.42;
}

.work-topic-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.52em;
  width:.44rem;
  height:.44rem;
  border-radius:50%;
  background:var(--grasgroen);
}

.event-card-content p,
.work-copy p,
.work-copy .lede,
.missie-lead,
.mission-principles p,
.home-card p,
.home-card small,
.work-topic-list li,
.work-summary-list span{
  font-size:clamp(var(--fs-16),1.2vw,var(--fs-17));
  line-height:1.58;
}

.home-card,
.work-copy,
.missie-card,
.mission-principles div,
.hub-demo-browser{
  overflow-wrap:anywhere;
}

.mission-principles div{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "number title"
    "number copy";
  column-gap:.9rem;
  align-items:start;
  text-align:left;
}

.mission-principles div::after{
  display:none !important;
}

.mission-principles div > span{
  grid-area:number;
  margin:0 !important;
  align-self:start;
}

.mission-principles strong{
  grid-area:title;
  display:flex;
  align-items:center;
  align-self:start;
  min-height:38px;
  font-size:clamp(var(--fs-22),2vw,var(--fs-26)) !important;
  line-height:1.05;
  text-align:left;
}

.mission-principles p{
  grid-column:1 / -1;
  margin-top:var(--s-4) !important;
  text-align:left;
}

@media (max-width:767px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .section,
  .home-cards,
  .work-overview,
  .missie--wide,
  .hero--photo{
    padding-block:clamp(2rem,8vw,3rem);
  }

  .container,
  .site-header .container,
  .hero--photo .container,
  .work-overview > .container,
  .home-card-grid--single,
  .missie--wide > .container{
    width:100%;
    max-width:100%;
    padding-inline:1rem;
  }

  .hero-photo-card{
    min-height:min(680px,calc(100svh - var(--nav-h) - 1.5rem));
    border-radius:18px;
  }

  .hero-photo-content{
    align-items:flex-end;
    padding:1.35rem;
  }

  .hero-one-liner{
    max-width:100%;
    min-height:0;
    white-space:normal;
    font-size:var(--fs-13);
    line-height:1.15;
  }

  .hero--photo h1,
  .event-card-content h2,
  .work-copy h2,
  .missie-card h2{
    max-width:100%;
    font-size:clamp(1.75rem,8.4vw,2.55rem);
    line-height:1.04;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:auto;
  }

  .hero--photo .sub{
    max-width:100%;
    font-size:clamp(var(--fs-16),5vw,var(--fs-19));
    line-height:1.35;
  }

  .home-card--event-wide,
  .work-grid,
  .mission-grid{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .event-card-content,
  .work-copy,
  .missie-card,
  .mission-principles div{
    padding:1.25rem;
  }

  .event-card-media{
    min-height:230px;
  }

  .event-photo-badge{
    max-width:calc(100% - 1.6rem);
    font-size:var(--fs-12);
  }

  .hub-demo{
    min-height:0;
  }

  .hub-demo-browser{
    border-radius:18px;
    animation:none;
  }

  .hub-demo-brandbar{
    padding:.8rem .85rem .55rem;
  }

  .hub-demo-brand{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:.25rem;
    font-size:clamp(var(--fs-14),4.2vw,var(--fs-16));
    line-height:1.2;
  }

  .hub-demo-brand b{
    min-width:8.8rem;
    height:1.25em;
  }

  .hub-demo-nav{
    margin:.35rem .75rem .75rem;
    overflow:hidden;
  }

  .hub-demo-grid{
    padding:0 .75rem .75rem;
    gap:.65rem;
  }

  .hub-demo-card{
    min-height:0;
    padding:.85rem;
  }

  .hub-demo-card strong{
    font-size:var(--fs-16);
    line-height:1.18;
  }

  .hub-demo-card small{
    font-size:var(--fs-13);
    line-height:1.35;
  }

  .mission-principles{
    grid-template-columns:1fr;
  }

  .mission-principles div{
    grid-template-columns:auto minmax(0,1fr);
  }

  .mission-principles strong{
    font-size:clamp(var(--fs-22),7vw,var(--fs-26));
  }

  .mission-principles p{
    grid-column:1 / -1;
  }

  .btn,
  .header-cta,
  .event-card-content .btn,
  .work-primary-cta{
    max-width:100%;
    white-space:normal;
  }
}

@media (max-width:430px){
  .hero--photo h1,
  .event-card-content h2,
  .work-copy h2,
  .missie-card h2{
    font-size:clamp(1.55rem,8vw,2.05rem);
    line-height:1.06;
  }

  .site-header .container,
  .container,
  .hero--photo .container,
  .work-overview > .container,
  .home-card-grid--single,
  .missie--wide > .container{
    padding-inline:.85rem;
  }

  .hero-photo-content,
  .event-card-content,
  .work-copy,
  .missie-card,
  .mission-principles div{
    padding:1rem;
  }

  .hero-one-liner{
    font-size:var(--fs-12);
  }

  .hero--photo .sub,
  .event-card-content p,
  .work-copy p,
  .work-copy .lede,
  .missie-lead,
  .mission-principles p,
  .work-topic-list li,
  .work-summary-list span{
    font-size:var(--fs-15);
    line-height:1.5;
  }
}