/*
Theme Name: Supriadi Premium Editable
Theme URI: https://supriadi.nl
Author: SUPRIADI
Description: Premium personal brand website for SUPRIADI — Business is personal.
Version: 2.8.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: supriadi
*/
:root{--navy:#0d2027;--navy2:#142d35;--gold:#c9aa7a;--cream:#f5f1e9;--ink:#17272c;--muted:#68716f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.7}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}h1,h2,h3,p{margin-top:0}h1,h2,h3,.brand,.quote{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.1}h1{font-size:clamp(3.7rem,8vw,8.5rem);letter-spacing:-.055em}h2{font-size:clamp(2.3rem,4.5vw,4.8rem);letter-spacing:-.045em}h3{font-size:clamp(1.5rem,2.2vw,2.1rem)}.container{max-width:1300px;margin:auto;padding:0 6%}.eyebrow{color:var(--gold);text-transform:uppercase;font-size:.69rem;letter-spacing:.22em;font-weight:700}.site-header{position:absolute;top:0;left:0;right:0;z-index:10;color:white}.nav{display:flex;align-items:center;justify-content:space-between;min-height:94px;gap:2rem}.brand{font-size:1.75rem;letter-spacing:-.045em}.nav-links{display:flex;gap:2rem;align-items:center;font-size:.83rem}.nav-links a:hover,.footer-links a:hover{color:var(--gold)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1.6rem;background:var(--gold);color:#11242a;font-weight:700;font-size:.83rem;border:1px solid var(--gold);transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px);background:#e0c396}.btn-outline{background:transparent;color:white;border-color:#899a9d}.btn-outline:hover{color:#11242a}.hero{background:var(--navy);color:white;min-height:780px;position:relative;overflow:hidden;display:flex;align-items:center}.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#07181f 0%,#07181ff2 35%,#07181f8c 65%,#07181f15 100%);z-index:1}.hero-photo{position:absolute;right:0;top:0;height:100%;width:58%;object-fit:cover;object-position:center 22%;filter:brightness(.78)}.hero-inner{position:relative;z-index:2;padding-top:150px;padding-bottom:90px}.hero-copy{max-width:740px}.hero h1{margin:24px 0 28px}.hero h1 em{color:var(--gold);font-style:normal}.hero .lead{font-size:1.08rem;max-width:480px;color:#d9e1e0;line-height:1.85}.hero-actions{margin-top:35px}.hero-stats{display:flex;gap:4rem;margin-top:88px}.hero-stats strong{display:block;color:var(--gold);font:normal 2.5rem Georgia,serif}.hero-stats span{font-size:.77rem;color:#d3dcdb}.section{padding:125px 0}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.story-img{width:100%;height:630px;object-fit:cover;object-position:center}.story-copy p{max-width:550px;color:#596361}.story-copy h2{margin:24px 0 30px}.text-link{display:inline-block;border-bottom:1px solid var(--gold);padding-bottom:8px;margin-top:15px;font-size:.87rem;font-weight:bold}.dark{background:var(--navy);color:#fff}.services-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:9%;align-items:end;margin-bottom:65px}.services-intro p{color:#c8d4d2;max-width:430px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.service{border-left:1px solid #60757b;padding:8px 22px 12px 28px}.service .number{color:var(--gold);font-family:Georgia,serif;font-size:1.35rem}.service h3{margin:22px 0}.service p{color:#c8d4d2;font-size:.93rem}.vision-grid{display:grid;grid-template-columns:1fr 1fr}.vision-photo{min-height:610px;background-size:cover;background-position:center;position:relative;display:flex;align-items:end;padding:9%;color:white}.vision-photo:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#071b20cc,transparent 70%)}.vision-photo blockquote{position:relative;font:normal clamp(1.8rem,3vw,3.3rem)/1.2 Georgia,serif;max-width:520px;margin:0}.vision-content{padding:12%;display:flex;flex-direction:column;justify-content:center}.vision-content p{color:#596361;max-width:530px}.gallery{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;margin-top:50px}.gallery img{width:100%;height:390px;object-fit:cover}.gallery img:first-child{object-position:center}.cta{position:relative;background:var(--navy);color:white;overflow:hidden}.cta::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#091b20 0%,#091b20ef 48%,#091b20aa 100%);z-index:1}.cta-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.cta-content{position:relative;z-index:2;padding-top:130px;padding-bottom:140px}.cta p{color:#d0d9d8;max-width:510px}.cta h2{margin:20px 0 25px}.cta-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:35px}.footer{background:#09191e;color:#d5dfde;padding:45px 0}.footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:center}.footer small{color:#8b9a9a}.footer-links{display:flex;gap:25px;font-size:.8rem}.mobile-toggle{display:none;background:none;color:white;border:1px solid #ffffff77;padding:8px 11px;cursor:pointer}.page-main{padding:160px 0 100px;min-height:60vh}.page-main h1{font-size:clamp(3rem,6vw,6rem)}.page-main .entry-content{max-width:850px}.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);overflow:hidden;width:1px;height:1px}.screen-reader-text:focus{position:static;clip:auto;width:auto;height:auto}@media(max-width:850px){.nav{min-height:75px}.mobile-toggle{display:block}.nav-links{display:none;position:absolute;top:75px;left:0;right:0;background:#0b1d23;padding:25px 6%;flex-direction:column;align-items:flex-start}.nav-links.open{display:flex}.nav .desktop-cta{display:none}.hero{min-height:760px;align-items:end}.hero-photo{width:100%;height:100%;object-position:center top;opacity:.55}.hero::before{background:linear-gradient(0deg,#07181f 5%,#07181fd9 50%,#07181f55 100%)}.hero-inner{padding-top:190px;padding-bottom:60px}.hero h1{font-size:clamp(3.7rem,14vw,6rem)}.hero-stats{gap:25px;margin-top:55px}.hero-stats strong{font-size:1.9rem}.story-grid,.services-intro,.vision-grid{grid-template-columns:1fr}.section{padding:80px 0}.story-img{height:470px}.story-grid{gap:45px}.service-grid{grid-template-columns:1fr;gap:35px}.vision-photo{min-height:430px}.vision-content{padding:75px 6%}.gallery{grid-template-columns:1fr}.gallery img{height:300px}.footer-inner{align-items:flex-start;flex-direction:column}.cta-content{padding-top:95px;padding-bottom:95px}}@media(max-width:480px){.hero-stats{gap:18px;flex-wrap:wrap}.hero-stats strong{font-size:1.65rem}.hero-stats span{font-size:.68rem}.brand{font-size:1.5rem}.hero .lead{font-size:.98rem}}

/* Gutenberg editable homepage */
.sp-editable .wp-block-group{box-sizing:border-box}.sp-editable .sp-container{max-width:1300px;margin:auto;padding-left:6%;padding-right:6%}.sp-editable .sp-hero{min-height:780px;display:flex;align-items:center;background:#07181f;color:white;position:relative;overflow:hidden;padding-top:125px;padding-bottom:90px}.sp-editable .sp-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07181f 0%,#07181ff2 35%,#07181f8c 65%,#07181f15 100%);z-index:1}.sp-editable .sp-hero>.wp-block-cover__image-background{object-position:center 22%;filter:brightness(.78)}.sp-editable .sp-hero .wp-block-cover__inner-container{position:relative;z-index:2;width:100%}.sp-editable .sp-hero .sp-container{width:100%}.sp-editable .sp-hero h1{font-size:clamp(3.7rem,8vw,8.5rem);line-height:1.1;max-width:740px;margin:24px 0 28px}.sp-editable .sp-hero h1 mark{color:var(--gold);background:none}.sp-editable .sp-hero .sp-lead{max-width:510px;color:#d9e1e0;font-size:1.08rem;line-height:1.85}.sp-editable .sp-eyebrow{color:var(--gold);text-transform:uppercase;font-size:.7rem;letter-spacing:.22em;font-weight:700}.sp-editable .wp-block-buttons{margin-top:32px}.sp-editable .wp-block-button__link{border-radius:0;background:var(--gold);color:#11242a;font-weight:700;font-size:.84rem;padding:1rem 1.6rem}.sp-editable .sp-section{padding:125px 0}.sp-editable .sp-dark{background:var(--navy);color:#fff}.sp-editable .sp-dark p{color:#c8d4d2}.sp-editable .sp-story .wp-block-columns,.sp-editable .sp-vision .wp-block-columns{gap:8%;align-items:center}.sp-editable .sp-story .wp-block-image img{height:630px;width:100%;object-fit:cover}.sp-editable h2{font-size:clamp(2.3rem,4.5vw,4.8rem);margin:20px 0 30px}.sp-editable h3{font-size:clamp(1.5rem,2.2vw,2.1rem)}.sp-editable .sp-service{border-left:1px solid #60757b;padding:8px 22px 12px 28px}.sp-editable .sp-services-grid{gap:35px}.sp-editable .sp-vision{background:var(--cream)}.sp-editable .sp-vision .wp-block-cover{min-height:610px}.sp-editable .sp-vision .wp-block-cover p{font:normal clamp(1.8rem,3vw,3.3rem)/1.2 Georgia,serif}.sp-editable .sp-gallery img{height:390px;object-fit:cover;width:100%}.sp-editable .sp-contact{padding:130px 0;background:var(--navy);color:white}.sp-editable .sp-contact p{max-width:510px;color:#d0d9d8}.sp-editable .sp-contact .wp-block-cover__inner-container{width:100%}.sp-editable .sp-contact .wp-block-cover__image-background{filter:brightness(.35)}.sp-editable .sp-contact .wp-block-buttons{gap:15px}.sp-editable .sp-contact .is-style-outline .wp-block-button__link{color:white;border-color:#899a9d;background:transparent}.sp-editable .sp-contact .sp-container{width:100%}.sp-editable .sp-hero .wp-block-cover__background,.sp-editable .sp-contact .wp-block-cover__background{display:none}.sp-editable .sp-gallery{gap:24px}.sp-editable .sp-hero .sp-container>*{max-width:740px}.sp-editable .sp-hero .sp-container>.sp-lead{max-width:510px}.sp-editable .sp-hero .wp-block-buttons{max-width:none}@media(max-width:850px){.sp-editable .sp-hero{min-height:760px;align-items:end}.sp-editable .sp-hero:before{background:linear-gradient(0deg,#07181f 5%,#07181fda 55%,#07181f55 100%)}.sp-editable .sp-hero>.wp-block-cover__image-background{object-position:center top;opacity:.65}.sp-editable .sp-section{padding:80px 0}.sp-editable .sp-story .wp-block-image img{height:470px}.sp-editable .sp-vision .wp-block-cover{min-height:430px}.sp-editable .sp-gallery img{height:300px}.sp-editable .sp-contact{padding:95px 0}}

/* v2.1: original split portrait composition, while keeping Gutenberg image editable */
.sp-editable .sp-hero>.wp-block-cover__image-background{left:auto!important;right:0!important;width:58%!important;height:100%!important;object-fit:cover;object-position:center 22%;filter:brightness(.91)}
.sp-editable .sp-hero:before{background:linear-gradient(90deg,#07181f 0%,#07181ff2 35%,#07181f9c 65%,#07181f38 100%)}
/* WordPress toolbar should not cover the transparent header when logged in */
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
@media(max-width:850px){.sp-editable .sp-hero>.wp-block-cover__image-background{width:100%!important;object-position:center top;opacity:.65}.sp-editable .sp-hero:before{background:linear-gradient(0deg,#07181f 5%,#07181fda 55%,#07181f55 100%)}}

/* v2.2 – mobile portrait contrast, consistent gutters, navigation anchors */
.sp-editable .sp-vision>.wp-block-columns{margin-bottom:0;gap:0}
.sp-editable .sp-vision>.wp-block-columns>.wp-block-column{min-width:0}
.sp-editable .sp-vision>.wp-block-columns>.wp-block-column:nth-child(2){padding:clamp(36px,6vw,100px)}
.sp-editable .sp-vision h2{overflow-wrap:normal}
#home,#verhaal,#expertise,#visie,#contact{scroll-margin-top:24px}
@media(max-width:850px){
 .sp-editable .sp-hero>.wp-block-cover__image-background{filter:brightness(1.12)!important;opacity:.94!important;object-position:center 12%!important}
 .sp-editable .sp-hero:before{background:linear-gradient(0deg,rgba(5,21,27,.94) 0%,rgba(5,21,27,.75) 34%,rgba(5,21,27,.34) 68%,rgba(5,21,27,.16) 100%)!important}
 .sp-editable .sp-vision>.wp-block-columns{display:flex;flex-direction:column;gap:0!important}
 .sp-editable .sp-vision>.wp-block-columns>.wp-block-column{width:100%;flex-basis:auto!important;margin:0!important}
 .sp-editable .sp-vision>.wp-block-columns>.wp-block-column:nth-child(2){padding:60px 6%!important}
 .sp-editable .sp-vision>.wp-block-columns>.wp-block-column:nth-child(2)>.wp-block-group{width:100%;max-width:100%}
 .sp-editable .sp-vision h2{font-size:clamp(2.2rem,8.5vw,3.5rem);line-height:1.13}
 .sp-editable .sp-vision p{overflow-wrap:break-word}
 .sp-editable .sp-vision .wp-block-cover{min-height:430px}
}
@media(max-width:480px){
 .sp-editable .sp-hero>.wp-block-cover__image-background{object-position:center 8%!important}
 .sp-editable .sp-vision>.wp-block-columns>.wp-block-column:nth-child(2){padding:52px 24px 64px!important}
 .sp-editable .sp-vision h2{font-size:clamp(2.15rem,9vw,2.8rem)}
 .sp-editable .sp-vision .sp-eyebrow{margin-bottom:14px}
}

/* v2.4: align Vision content with the standard sp-container gutter.
   Apply padding to the actual Gutenberg inner group to avoid theme/column
   layout rules stripping the column's own padding on small screens. */
@media (max-width:850px){
  .sp-editable .sp-vision > .wp-block-columns > .wp-block-column:last-child {padding:0!important;}
  .sp-editable .sp-vision > .wp-block-columns > .wp-block-column:last-child > .wp-block-group {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    padding:60px 6%!important;
    margin:0!important;
  }
}
@media (max-width:480px){
  .sp-editable .sp-vision > .wp-block-columns > .wp-block-column:last-child > .wp-block-group {
    padding:52px 6% 64px!important;
  }
}

/* v2.5: Explicit mobile gutter on actual vision text elements.
   Avoid reliance on WordPress columns or group padding, which can be overridden
   by Gutenberg's generated layout styles. */
@media (max-width:850px) {
  body .sp-editable section.sp-vision .wp-block-columns > .wp-block-column:last-child {padding:0!important;}
  body .sp-editable section.sp-vision .wp-block-columns > .wp-block-column:last-child > .wp-block-group {padding:52px 0 64px!important;margin:0!important;width:100%!important;}
  body .sp-editable section.sp-vision .wp-block-columns > .wp-block-column:last-child > .wp-block-group > :is(p,h1,h2,h3,h4,h5,h6) {
    box-sizing:border-box!important;
    padding-left:6%!important;
    padding-right:6%!important;
    width:100%!important;
  }
}

/* v2.6 — same outlined LinkedIn action as the contact section */
.site-header .desktop-cta.btn-outline{background:transparent!important;color:#fff!important;border:1px solid #899a9d!important;box-shadow:none!important}
.site-header .desktop-cta.btn-outline:hover{border-color:var(--gold)!important;color:var(--gold)!important}
/* Fix Gutenberg vision column at the container level, rather than the text nodes. */
@media(max-width:850px){
 body .sp-editable .sp-vision > .wp-block-columns > .wp-block-column:last-child,
 body .sp-editable .sp-vision .wp-block-column:has(.sp-eyebrow),
 body .sp-editable .vision-content {box-sizing:border-box!important;padding:52px 6% 64px!important;margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important}
 body .sp-editable .sp-vision .wp-block-column:has(.sp-eyebrow) > .wp-block-group {padding:0!important;margin:0!important;width:100%!important}
 body .sp-editable .sp-vision .wp-block-column:has(.sp-eyebrow) > .wp-block-group > :is(p,h1,h2,h3,h4,h5,h6){padding-left:0!important;padding-right:0!important}
}

@media(max-width:850px){body .sp-editable .sp-vision .sp-vision-text-column{padding:52px 6% 64px!important;box-sizing:border-box!important}}

/* v2.7: Fix the *rendered text elements* in the Gutenberg vision block.
   Using viewport gutters avoids dependence on WordPress column/group padding. */
@media (max-width:850px) {
  body .sp-editable section.sp-vision .wp-block-columns .wp-block-column:last-child .wp-block-group > p,
  body .sp-editable section.sp-vision .wp-block-columns .wp-block-column:last-child .wp-block-group > h2,
  body .sp-editable section.sp-vision .wp-block-columns .wp-block-column:last-child .wp-block-group > h1,
  body .sp-editable section.sp-vision .wp-block-columns .wp-block-column:last-child .wp-block-group > h3 {
    box-sizing:border-box!important;
    margin-left:6vw!important;
    margin-right:6vw!important;
    padding-left:0!important;
    padding-right:0!important;
    width:calc(100% - 12vw)!important;
    max-width:calc(100% - 12vw)!important;
  }
  /* Position the quote lower in the golf image, below the flag/hole. */
  body .sp-editable section.sp-vision .sp-vision-photo .wp-block-cover__inner-container {
    transform:translateY(105px);
  }
}

/* v2.8: Match the Vision text gutter to the adjacent standard .sp-container.
   Target the exact Gutenberg markup, avoiding the old column-specific selectors. */
@media (max-width:850px) {
  body .sp-editable .sp-vision > .wp-block-columns {display:block!important; margin:0!important;}
  body .sp-editable .sp-vision > .wp-block-columns > .wp-block-column:nth-child(2) {display:block!important;width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;margin:0!important;padding:0!important;}
  body .sp-editable .sp-vision > .wp-block-columns > .wp-block-column:nth-child(2) > .wp-block-group {display:block!important;box-sizing:border-box!important;width:100%!important;max-width:none!important;margin:0!important;padding:70px 6% 80px!important;}
  body .sp-editable .sp-vision > .wp-block-columns > .wp-block-column:nth-child(2) > .wp-block-group > :is(p,h1,h2,h3) {width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;}
}
/* The golf quote sits lower on the desktop image, beneath the flag/hole. */
@media (min-width:851px) {
  body .sp-editable .sp-vision .sp-vision-photo {display:flex!important;align-items:flex-end!important;}
  body .sp-editable .sp-vision .sp-vision-photo > .wp-block-cover__inner-container {align-self:flex-end!important;transform:none!important;padding-bottom:6%!important;}
}
/* Brighten desktop portrait only. Mobile's approved appearance stays unchanged. */
@media (min-width:851px) {
  body .sp-editable .sp-hero > .wp-block-cover__image-background {filter:brightness(1.15)!important;opacity:1!important;}
  body .sp-editable .sp-hero:before {background:linear-gradient(90deg,rgba(7,24,31,.98) 0%,rgba(7,24,31,.88) 32%,rgba(7,24,31,.35) 67%,rgba(7,24,31,.12) 100%)!important;}
}