:root{--navy:#18324f;--navy-deep:#102438;--teal:#49b9ad;--teal-dark:#278e85;--ice:#edf5f4;--mist:#f4f7f7;--white:#fff;--ink:#203247;--muted:#647487;--line:#dbe4e5;--max:1220px;--radius:3px;--shadow:0 24px 70px rgba(15,40,61,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;font-size:16px;line-height:1.7}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(var(--max),calc(100% - 48px));margin:auto}.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid rgba(24,50,79,.08)}.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:46px;height:46px;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800;letter-spacing:-.04em}.brand-copy{display:flex;flex-direction:column;line-height:1.15}.brand-copy strong{font-size:16px}.brand-copy small{margin-top:5px;color:var(--muted);font-size:11px;letter-spacing:.04em}.main-nav{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:700}.main-nav a{transition:.2s}.main-nav a:hover{color:var(--teal-dark)}.nav-cta{border-bottom:2px solid var(--teal);padding-bottom:5px}.menu-toggle{display:none;background:none;border:0;color:var(--navy);font-weight:800}.hero{position:relative;overflow:hidden;padding:106px 0 96px;background:linear-gradient(120deg,#fff 0%,#fff 58%,var(--ice) 58%,var(--ice) 100%)}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:66px;align-items:center}.eyebrow{display:block;margin-bottom:19px;color:var(--teal-dark);font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.eyebrow.light{color:#83d9d0}h1,h2,h3{margin:0;color:var(--navy);line-height:1.12;letter-spacing:-.035em}h1{font-size:clamp(48px,6.2vw,78px);font-weight:700}h1 span{color:var(--teal-dark)}h2{font-size:clamp(34px,4vw,52px);font-weight:650}h3{font-size:25px;font-weight:650}.hero-copy>p{max-width:660px;margin:28px 0 0;color:var(--muted);font-size:18px}.hero-actions{display:flex;align-items:center;gap:27px;margin-top:36px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 23px;border:0;cursor:pointer;font-weight:800;font-size:14px;transition:.22s}.button-primary{background:var(--teal);color:var(--navy-deep)}.button-primary:hover{background:#69cbc2;transform:translateY(-2px)}.text-link{font-weight:800;color:var(--navy)}.text-link span{margin-left:8px;color:var(--teal-dark)}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:55px;padding-top:25px;border-top:1px solid var(--line)}.hero-proof strong,.hero-proof span{display:block}.hero-proof strong{font-size:14px;color:var(--navy)}.hero-proof span{margin-top:4px;color:var(--muted);font-size:12px}.hero-visual{position:relative;min-height:535px}.browser-window{position:absolute;left:8%;right:0;top:42px;background:#fff;border:1px solid #d5e2e2;box-shadow:var(--shadow);z-index:2}.browser-bar{height:42px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#f1f5f5;border-bottom:1px solid #dfe8e8}.browser-bar i{width:8px;height:8px;border-radius:50%;background:#aabbbb}.browser-bar span{height:18px;flex:1;margin-left:9px;border:1px solid #d9e3e3;background:#fff}.browser-content{padding:26px}.mock-nav{display:flex;align-items:center;justify-content:space-between}.mock-nav>b{width:90px;height:12px;background:var(--navy)}.mock-nav div{display:flex;gap:8px}.mock-nav i{width:26px;height:6px;background:#d2dede}.mock-hero{display:grid;grid-template-columns:1fr .8fr;gap:26px;padding:40px 0 30px}.mock-copy b,.mock-copy span{display:block}.mock-copy b{height:18px;margin-bottom:9px;background:var(--navy)}.mock-copy b:nth-child(2){width:75%}.mock-copy span{height:7px;margin-top:8px;background:#dce6e6}.mock-copy button{width:86px;height:28px;margin-top:19px;border:0;background:var(--teal)}.mock-image{position:relative;min-height:175px;background:var(--navy)}.mock-image:before{content:'';position:absolute;inset:25px 23px;background:var(--teal)}.mock-image span{position:absolute;width:70px;height:70px;right:5px;bottom:-18px;border-radius:50%;background:#d9efec}.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mock-cards i{height:75px;border:1px solid #dfe7e7;background:#f5f8f8}.hero-shape{position:absolute;z-index:1}.shape-a{width:255px;height:255px;right:-80px;top:-18px;border-radius:50%;background:var(--teal)}.shape-b{width:180px;height:180px;left:0;bottom:-6px;border:33px solid var(--navy);border-radius:50%}.section{padding:112px 0}.section-dark{background:var(--navy-deep);color:#fff}.section-soft{background:var(--mist)}.statement{padding:82px 0}.statement-grid{display:grid;grid-template-columns:110px 1fr;gap:45px}.section-index{color:#83d9d0;font-size:13px;font-weight:800}.statement-intro{margin:0 0 12px;color:#83d9d0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.statement h2{max-width:960px;color:#fff;font-size:clamp(34px,5vw,62px);font-weight:550}.section-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end;margin-bottom:65px}.section-heading h2{max-width:760px}.section-heading>p{margin:0;color:var(--muted)}.service-row{display:grid;grid-template-columns:70px 1.08fr .92fr;gap:42px;align-items:center;padding:65px 0;border-top:1px solid var(--line)}.service-row:last-child{border-bottom:1px solid var(--line)}.service-number{align-self:start;color:var(--teal-dark);font-size:13px;font-weight:800}.service-label{display:block;margin-bottom:11px;color:var(--teal-dark);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.service-copy p{max-width:620px;color:var(--muted)}.service-copy ul{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;padding:0;margin:24px 0 0;list-style:none;font-size:14px;font-weight:700}.service-copy li:before{content:'—';margin-right:10px;color:var(--teal-dark)}.service-art{position:relative;min-height:295px;background:var(--ice);overflow:hidden}.screen-card{position:absolute;left:16%;right:8%;top:42px;height:210px;background:#fff;border:1px solid #ccdcdc;box-shadow:0 18px 45px rgba(23,58,76,.13);padding:28px}.screen-card span{display:block;width:42%;height:13px;background:var(--navy);margin-bottom:24px}.screen-card b{display:block;height:8px;background:#dce6e6;margin:8px 0}.screen-card b:nth-of-type(2){width:70%}.screen-card i{display:block;width:85px;height:30px;background:var(--teal);margin-top:26px}.art-websites:after{content:'';position:absolute;width:125px;height:125px;border-radius:50%;background:var(--teal);right:-28px;bottom:-30px}.art-analysis{display:flex;align-items:end;justify-content:center;gap:13px;padding:45px}.chart-grid{height:180px;width:75%;display:flex;align-items:end;gap:12px}.chart-grid i{flex:1;background:var(--navy)}.chart-grid i:nth-child(1){height:37%}.chart-grid i:nth-child(2){height:56%}.chart-grid i:nth-child(3){height:45%}.chart-grid i:nth-child(4){height:77%;background:var(--teal)}.chart-grid i:nth-child(5){height:100%}.score{position:absolute;right:27px;top:25px;display:grid;place-items:center;width:69px;height:69px;border-radius:50%;background:#fff;color:var(--navy);font-weight:800}.art-hosting{display:grid;place-items:center}.server{width:63%;display:grid;gap:12px}.server i{height:48px;background:var(--navy);border-left:10px solid var(--teal)}.domain-pill{position:absolute;right:20px;bottom:24px;padding:13px 18px;background:#fff;color:var(--navy);font-weight:800;font-size:14px}.values-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.value-card{min-height:265px;padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.value-card>span{color:var(--teal-dark);font-size:12px;font-weight:800}.value-card h3{margin-top:75px}.value-card p{color:var(--muted);font-size:14px}.process-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.process-intro h2{color:#fff}.process-intro p{color:#b9c9d6;max-width:430px}.process-step{display:grid;grid-template-columns:65px 1fr;gap:22px;padding:25px 0;border-top:1px solid rgba(255,255,255,.14)}.process-step:last-child{border-bottom:1px solid rgba(255,255,255,.14)}.process-step>span{color:#83d9d0;font-size:12px;font-weight:800}.process-step h3{color:#fff}.process-step p{margin:6px 0 0;color:#b9c9d6}.showcase-grid{display:grid;grid-template-columns:1.4fr .6fr;grid-template-rows:1fr 1fr;gap:18px}.showcase-main,.showcase-side{position:relative;min-height:265px;padding:34px;overflow:hidden}.showcase-main{grid-row:span 2;min-height:548px;background:var(--navy)}.showcase-main span,.showcase-side span{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.showcase-main span{color:#83d9d0}.showcase-main h3{max-width:650px;margin-top:245px;color:#fff;font-size:clamp(30px,4vw,50px)}.large-arrow{position:absolute;right:35px;top:27px;color:#83d9d0;font-size:50px}.showcase-side.one{background:var(--ice)}.showcase-side.two{background:var(--teal)}.phone{position:absolute;width:130px;height:200px;right:32px;bottom:-38px;padding:25px 17px;border:6px solid var(--navy);border-radius:22px;background:#fff}.phone i{display:block;height:52px;background:var(--teal);margin-bottom:17px}.phone b{display:block;height:7px;background:#d9e4e4;margin:8px 0}.speed-ring{position:absolute;right:30px;bottom:24px;width:125px;height:125px;display:grid;place-items:center;border:16px solid var(--navy);border-top-color:#fff;border-radius:50%;font-size:30px;font-weight:800;color:var(--navy)}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}.contact-copy p{color:var(--muted);max-width:560px}.contact-details{display:grid;gap:7px;margin-top:35px;font-weight:800}.contact-details a:hover{color:var(--teal-dark)}.contact-form{padding:38px;background:#fff;border:1px solid var(--line)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-form label{display:block;margin-bottom:19px;color:var(--navy);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin-top:7px;padding:13px 0;border:0;border-bottom:1px solid #bccaca;background:transparent;outline:none;color:var(--ink);text-transform:none}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--teal-dark)}.contact-form textarea{min-height:105px;resize:vertical}.form-note{margin:15px 0 0;color:var(--muted);font-size:11px}.site-footer{padding:65px 0 25px;background:#0b1b2b;color:#c0ced9}.footer-grid{display:grid;grid-template-columns:1.5fr .65fr .65fr;gap:60px}.footer-brand .brand-copy strong{color:#fff}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:8px;font-size:13px}.footer-grid strong{margin-bottom:8px;color:#fff}.footer-grid a:hover{color:#83d9d0}.footer-bottom{display:flex;justify-content:space-between;margin-top:45px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:11px}.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:980px){.main-nav{display:none;position:absolute;left:0;right:0;top:82px;padding:25px 24px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}.main-nav.open{display:flex}.menu-toggle{display:block}.hero{background:linear-gradient(180deg,#fff 0%,#fff 50%,var(--ice) 50%,var(--ice) 100%)}.hero-grid,.section-heading,.process-grid,.contact-grid{grid-template-columns:1fr}.hero-visual{min-height:480px}.service-row{grid-template-columns:50px 1fr}.service-art{grid-column:2}.values-grid{grid-template-columns:1fr 1fr}.showcase-grid{grid-template-columns:1fr 1fr}.showcase-main{grid-column:span 2;grid-row:auto;min-height:450px}.process-grid{gap:50px}.section-heading{gap:20px}.contact-grid{gap:50px}}
@media(max-width:650px){.container{width:min(var(--max),calc(100% - 30px))}.nav-wrap{height:72px}.main-nav{top:72px}.hero{padding:72px 0 62px}.hero-grid{gap:34px}.hero-proof{grid-template-columns:1fr;gap:12px}.hero-visual{min-height:340px}.browser-window{left:0;top:20px}.shape-a{width:150px;height:150px}.shape-b{width:110px;height:110px;border-width:22px}.mock-hero{gap:12px;padding:25px 0}.mock-image{min-height:120px}.statement-grid{grid-template-columns:1fr;gap:18px}.section{padding:78px 0}.service-row{grid-template-columns:1fr;gap:18px;padding:48px 0}.service-art{grid-column:auto}.service-copy ul{grid-template-columns:1fr}.values-grid{grid-template-columns:1fr}.value-card{min-height:205px}.value-card h3{margin-top:40px}.showcase-grid{grid-template-columns:1fr}.showcase-main{grid-column:auto;min-height:410px}.showcase-main h3{margin-top:170px}.form-row,.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}.hero-actions{align-items:flex-start;flex-direction:column}.contact-form{padding:25px}}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-status{min-height:24px;margin:16px 0 0;font-size:13px;font-weight:700;text-transform:none;letter-spacing:0}.form-status.success{color:#187557}.form-status.error{color:#b42318}.contact-form button:disabled{cursor:wait;opacity:.7}

/* ================================
   FOTO'S SWAANS ADVIES
================================ */

.section-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero */
.hero-visual {
  overflow: hidden;
  border-radius: 0;
}

.hero-photo {
  width: 100%;
  height: 100%;
  min-height: 435px;
  object-fit: cover;
}

/* Diensten */
.service-art {
  overflow: hidden;
  min-height: 320px;
}

.service-photo {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}


/* =================================
   SHOWCASE / VOORBEELDEN
   1 groot links, 2 klein rechts
================================= */

.showcase-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  min-height: 560px;
}

/* Grote afbeelding links */
.showcase-large {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 560px;
}

/* Kleine afbeeldingen rechts */
.showcase-image:not(.showcase-large) {
  min-height: 0;
}

/* Alle afbeeldingen correct laten vullen */
.showcase-image {
  position: relative;
  overflow: hidden;
}

.showcase-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optioneel subtiel effect */
.showcase-image img {
  transition: transform 0.4s ease;
}

.showcase-image:hover img {
  transform: scale(1.02);
}

/* Mobiel: alles onder elkaar */
@media (max-width: 768px) {
  .showcase-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
    gap: 16px;
  }

  .showcase-large,
  .showcase-image:not(.showcase-large) {
    grid-column: auto;
    grid-row: auto;
    min-height: 260px;
  }
}