/* Eén fotografische homepageheader, zonder losse tekstkaarten. */
#main .home-photo-hero{position:relative;isolation:isolate;overflow:hidden;margin:20px 0 26px;padding:clamp(25px,3.2vw,44px);border-radius:22px;background:#172f3a;color:#fff;}
.home-photo-hero::before{content:'';position:absolute;inset:0;z-index:-2;background:url('/assets/images/homepage-ok-hero-20261024.jpg?v=1') center 65% / cover no-repeat;pointer-events:none;}
.home-photo-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,29,39,.94) 0%,rgba(10,29,39,.89) 37%,rgba(10,29,39,.53) 65%,rgba(10,29,39,.12) 100%);pointer-events:none;}
.home-photo-hero .home-photo-content{max-width:660px;}
.home-photo-hero .home-photo-eyebrow,.home-photo-hero .home-photo-kicker{margin:0 0 10px;color:#d4ebe4;font-size:.65rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;}
.home-photo-hero h1{margin:0 0 12px;color:#fff;font-size:clamp(2.1rem,3.8vw,3.25rem);line-height:1.06;letter-spacing:-.04em;}
.home-photo-hero h1 em{font-style:normal;color:#c4e6de;}
.home-photo-hero .home-photo-intro{margin:0 0 20px;color:#edf4f2;font-size:.93rem;}
.home-photo-hero .home-photo-kicker{margin-bottom:5px;}
.home-photo-hero h2{margin:0 0 7px;color:#fff;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.2;}
.home-photo-hero p,.home-photo-hero li{font-size:.88rem;line-height:1.5;color:#f2f6f5;}
.home-photo-hero ul{display:grid;gap:5px;margin:12px 0 18px;padding-left:18px;}
.home-photo-hero li::marker{color:#c4e6de;}
.home-photo-hero .home-photo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;}
.home-photo-hero .home-photo-actions .btn{background:#c4e6de;color:#102f38;padding:11px 19px;min-height:44px;}
.home-photo-hero .home-photo-actions .btn:hover{background:#e0f3ed;}
.home-photo-hero .home-photo-login{color:#fff;text-decoration:underline;text-underline-offset:4px;font-size:.85rem;font-weight:650;}
.home-photo-hero .home-photo-secondary{display:flex;flex-wrap:wrap;gap:18px;margin-top:15px;}
.home-photo-hero .home-photo-secondary a{color:#e1ece9;font-size:.78rem;text-decoration:underline;text-underline-offset:4px;}
.home-photo-hero a:focus-visible{outline:3px solid #fff;outline-offset:4px;}
@media(max-width:760px){#main .home-photo-hero{padding:25px 22px;margin-top:16px;border-radius:18px;}.home-photo-hero::before{background-position:60% center;}.home-photo-hero::after{background:rgba(10,29,39,.83);}.home-photo-hero .home-photo-content{max-width:100%;}}
/* Accounttekst naar rechts op desktop, één doorlopende foto behouden. */
@media (min-width: 901px) {
 .home-photo-hero .home-photo-content {
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(28px,4vw,64px);
  align-items:start;
 }
 .home-photo-content > .home-photo-eyebrow {grid-column:1;grid-row:1;}
 .home-photo-content > h1 {grid-column:1;grid-row:2 / 5;}
 .home-photo-content > .home-photo-intro {grid-column:1;grid-row:5;}
 .home-photo-content > .home-photo-secondary {grid-column:1;grid-row:6;align-self:start;margin-top:0;}
 .home-photo-content > .home-photo-kicker {grid-column:2;grid-row:1;}
 .home-photo-content > h2 {grid-column:2;grid-row:2;}
 .home-photo-content > p:not([class]) {grid-column:2;grid-row:3;}
 .home-photo-content > ul {grid-column:2;grid-row:4 / 6;}
 .home-photo-content > .home-photo-actions {grid-column:2;grid-row:6;}
 .home-photo-hero::after {
  background:linear-gradient(90deg,rgba(10,29,39,.9) 0%,rgba(10,29,39,.76) 42%,rgba(10,29,39,.82) 100%);
 }
}
/* Aanvulling: helderdere foto en zachtere accounttypografie. */
.home-photo-hero::after{
 background:linear-gradient(90deg,rgba(10,29,39,.85) 0%,rgba(10,29,39,.64) 48%,rgba(10,29,39,.67) 100%);
}
.home-photo-hero .home-photo-content > .home-photo-kicker{color:#c3d6d2;letter-spacing:.09em;font-weight:650;}
.home-photo-hero .home-photo-content > h2{color:#e1eae7;font-weight:650;line-height:1.3;letter-spacing:-.02em;}
.home-photo-hero .home-photo-content > p:not([class]),
.home-photo-hero .home-photo-content > ul{color:#d5e0dc;font-weight:400;line-height:1.65;}
.home-photo-hero .home-photo-content > ul li{color:#d5e0dc;font-weight:400;line-height:1.65;}
.home-photo-hero .home-photo-content > ul{gap:6px;}
.home-photo-hero .home-photo-content > ul li::marker{color:#adc7bf;}
.home-photo-hero .home-photo-login{color:#d5e0dc;font-weight:500;}
@media(min-width:901px){
 .home-photo-hero::after{background:linear-gradient(90deg,rgba(10,29,39,.85) 0%,rgba(10,29,39,.62) 43%,rgba(10,29,39,.67) 100%);}
}
@media(max-width:760px){
 .home-photo-hero::after{background:rgba(10,29,39,.74);}
}
/* Laatste verfijning: iets meer foto, rustigere accounttekst. */
#main .home-photo-hero::after{background:linear-gradient(90deg,rgba(10,29,39,.81) 0%,rgba(10,29,39,.56) 43%,rgba(10,29,39,.63) 100%);}
#main .home-photo-hero .home-photo-content > .home-photo-kicker{color:#bacbc6;letter-spacing:.065em;font-weight:600;}
#main .home-photo-hero .home-photo-content > h2{color:#d2dcd7;font-weight:550;line-height:1.38;letter-spacing:-.015em;}
#main .home-photo-hero .home-photo-content > p:not([class]),
#main .home-photo-hero .home-photo-content > ul,
#main .home-photo-hero .home-photo-content > ul li{color:#cbd6d0;font-weight:400;line-height:1.72;letter-spacing:.005em;}
#main .home-photo-hero .home-photo-content > ul{gap:7px;}
#main .home-photo-hero .home-photo-content > ul li::marker{color:#adc2b9;}
#main .home-photo-hero .home-photo-login{color:#cbd6d0;font-weight:500;}
@media(max-width:760px){#main .home-photo-hero::after{background:rgba(10,29,39,.71);}}
/* Duidelijk helderder beeld; uitsluitend foto en accounttypografie. */
#main .home-photo-hero::after{background:linear-gradient(90deg,rgba(10,29,39,.73) 0%,rgba(10,29,39,.38) 43%,rgba(10,29,39,.47) 100%);}
#main .home-photo-hero .home-photo-content > .home-photo-kicker{color:#b6c6bd;font-weight:500;letter-spacing:.045em;}
#main .home-photo-hero .home-photo-content > h2{color:#c3d0c6;font-weight:450;line-height:1.42;letter-spacing:-.01em;text-shadow:0 1px 3px rgba(5,20,27,.55);}
#main .home-photo-hero .home-photo-content > p:not([class]),
#main .home-photo-hero .home-photo-content > ul,
#main .home-photo-hero .home-photo-content > ul li{color:#c1cec5;font-weight:400;line-height:1.75;letter-spacing:.005em;text-shadow:0 1px 3px rgba(5,20,27,.65);}
#main .home-photo-hero .home-photo-content > ul{gap:7px;}
#main .home-photo-hero .home-photo-content > ul li::marker{color:#a4b8aa;}
#main .home-photo-hero .home-photo-login{color:#c1cec5;font-weight:400;}
@media(max-width:760px){#main .home-photo-hero::after{background:rgba(10,29,39,.64);}}
/* Accountinhoud bovenaan en verder naar rechts in de fotobanner. */
@media(min-width:901px){
 #main .home-photo-hero .home-photo-content{
  max-width:none;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.84fr);
  column-gap:clamp(48px,7vw,120px);align-items:start;
 }
 #main .home-photo-hero .home-photo-content > .home-photo-kicker{grid-column:2;grid-row:1;align-self:start;}
 #main .home-photo-hero .home-photo-content > h2{grid-column:2;grid-row:2;align-self:start;}
 #main .home-photo-hero .home-photo-content > p:not([class]){grid-column:2;grid-row:3;align-self:start;}
 #main .home-photo-hero .home-photo-content > ul{grid-column:2;grid-row:4 / 6;align-self:start;}
 #main .home-photo-hero .home-photo-content > .home-photo-actions{grid-column:2;grid-row:6;align-self:start;}
}
#main .home-photo-hero .home-photo-kicker{color:#b6c6bd;font-size:.6rem;font-weight:500;letter-spacing:.065em;margin-bottom:6px;}
#main .home-photo-hero .home-photo-content > h2{font-size:clamp(1.05rem,1.45vw,1.3rem);font-weight:450;line-height:1.4;color:#c3d0c6;margin-bottom:7px;}
#main .home-photo-hero .home-photo-content > p:not([class]),
#main .home-photo-hero .home-photo-content > ul,
#main .home-photo-hero .home-photo-content > ul li{font-size:.82rem;font-weight:400;line-height:1.7;color:#c1cec5;}
#main .home-photo-hero .home-photo-content > ul{margin-top:10px;margin-bottom:15px;gap:5px;}
#main .home-photo-hero .home-photo-actions .btn{font-size:.77rem;padding:9px 15px;min-height:40px;box-shadow:none;}
#main .home-photo-hero .home-photo-login{font-size:.78rem;font-weight:400;}
/* Een doorlopend, transparant wit vlak achter de accountinhoud. */
@media(min-width:901px){
 #main .home-photo-hero .home-photo-content{position:relative;isolation:isolate;}
 #main .home-photo-hero .home-photo-content::before{
  content:'';grid-column:2;grid-row:1 / 7;
  align-self:stretch;justify-self:stretch;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.55);border-radius:16px;
  pointer-events:none;z-index:-1;
 }
 #main .home-photo-hero .home-photo-content > .home-photo-kicker,
 #main .home-photo-hero .home-photo-content > h2,
 #main .home-photo-hero .home-photo-content > p:not([class]),
 #main .home-photo-hero .home-photo-content > ul,
 #main .home-photo-hero .home-photo-content > .home-photo-actions{
  margin-left:20px;margin-right:20px;
 }
 #main .home-photo-hero .home-photo-content > .home-photo-kicker{margin-top:18px;}
 #main .home-photo-hero .home-photo-content > .home-photo-actions{margin-bottom:18px;}
 #main .home-photo-hero .home-photo-content > .home-photo-kicker{color:#356a66;text-shadow:none;}
 #main .home-photo-hero .home-photo-content > h2{color:#213e46;text-shadow:none;}
 #main .home-photo-hero .home-photo-content > p:not([class]),
 #main .home-photo-hero .home-photo-content > ul,
 #main .home-photo-hero .home-photo-content > ul li{color:#435c5d;text-shadow:none;}
 #main .home-photo-hero .home-photo-content > ul li::marker{color:#006d71;}
 #main .home-photo-hero .home-photo-login{color:#00646a;text-shadow:none;}
 #main .home-photo-hero .home-photo-actions .btn{background:#006d71;color:#fff;}
 #main .home-photo-hero .home-photo-actions .btn:hover{background:#00575b;}
}
/* Zeer lichte witte sluier achter de accounttekst. */
@media(min-width:901px){
 #main .home-photo-hero .home-photo-content::before{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.14);
 }
 #main .home-photo-hero .home-photo-content > .home-photo-kicker{color:#c9dad3;}
 #main .home-photo-hero .home-photo-content > h2{color:#e0e8e2;text-shadow:0 1px 3px rgba(5,20,27,.4);}
 #main .home-photo-hero .home-photo-content > p:not([class]),
 #main .home-photo-hero .home-photo-content > ul,
 #main .home-photo-hero .home-photo-content > ul li{color:#d9e3dc;text-shadow:0 1px 3px rgba(5,20,27,.45);}
 #main .home-photo-hero .home-photo-content > ul li::marker{color:#c9dad3;}
 #main .home-photo-hero .home-photo-login{color:#d9e3dc;}
}
/* Onderkant van de foto zichtbaar houden */
@media (min-width: 768px) {
    #main .home-photo-hero::before {
        background-position: center bottom !important;
    }
}