/*
 * Stuif Landing - stylesheet for the "Stuif Landing" page template.
 * Upload alongside stuif-landing-template.php in your (child) theme folder.
 */

/* ── Brand tokens (lifted from the flyer) ───────────────────────────── */
  :root{
    --navy:        #12253D;
    --navy-700:    #1a3354;
    --forest:      #1f3a26;
    --forest-600:  #264a30;
    --forest-800:  #15291a;
    --forest-900:  #0f2418;
    --mustard:     #FFBD59;
    --mustard-600: #f0a83a;
    --cream:       #f5f1e6;
    --paper:       #f6f4ec;
    --sage-50:     #eef2e4;
    --sage-100:    #dfe8d4;
    --sage-200:    #c7d4b6;
    --sage-300:    #9eb185;
    --ink-on-dark: #e6efdb;

    --serif: "Bricolage Grotesque", ui-serif, Georgia, serif;
    --sans:  "Figtree", ui-sans-serif, system-ui, sans-serif;
    --mono:  "JetBrains Mono", ui-monospace, monospace;

    --maxw: 1240px;
    --gutter: clamp(20px, 4vw, 56px);
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;
  }

  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: var(--sans);
    color: var(--navy);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 17px;
    line-height: 1.55;
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{font-family: var(--serif); font-weight: 700; letter-spacing: -0.01em; margin:0; color:var(--navy)}
  h1{font-size: clamp(36px, 5.2vw, 72px); line-height: 1.04; letter-spacing:-.025em; font-weight:800}
  h2{font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; font-weight:800}
  h3{font-size: clamp(20px, 1.5vw, 24px); line-height: 1.2; font-weight:700}
  p{margin:0 0 1em 0}
  .container{max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position:relative}
  .eyebrow{
    font-family: var(--sans);
    font-size: 12px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--mustard-600);
  }
  .eyebrow.on-dark{color: var(--mustard)}
  .rule{display:inline-block; width:64px; height:2px; background:var(--mustard); vertical-align:middle; margin-left:14px; transform:translateY(-3px)}

  /* ── KADENCE-ISH HEADER ─────────────────────────────────────────────── */
  .topbar{
    background: var(--forest);
    color: var(--ink-on-dark);
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .topbar .row{
    display:flex; justify-content:space-between; align-items:center;
    height: 38px;
  }
  .topbar a{display:inline-flex; align-items:center; gap:8px; opacity:.85}
  .topbar a:hover{opacity:1; color:var(--mustard)}
  .topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--mustard);display:inline-block}

  header.site, .site{
    background: #fff;
    position: sticky; top:0; z-index: 50;
    border-bottom: 1px solid #eee5d2;
    backdrop-filter: blur(6px);
  }
  header.site .row, .site .row{
    display:flex; align-items:center; justify-content:space-between;
    height: 88px;
  }
  .lockup{display:flex; align-items:center; gap:14px}
  .lockup .mark{
    width:54px; height:54px; border-radius: 50%;
    background: var(--forest);
    display:grid; place-items:center;
    box-shadow: 0 6px 16px -8px rgba(31,58,38,.55), inset 0 0 0 4px #fff, inset 0 0 0 5px var(--forest);
  }
  .lockup .mark svg{width:30px;height:30px}
  .lockup .word{display:flex; flex-direction:column; line-height:1}
  .lockup .word b{
    font-family: var(--serif); font-weight: 800;
    letter-spacing: .02em; font-size: 22px; color: var(--navy);
  }
  .lockup .word .bar{height:2px; background:var(--mustard); width:78px; margin:6px 0}
  .lockup .word small{
    font-size: 9.5px; letter-spacing: .26em; font-weight: 700; color: var(--navy);
  }
  nav.primary{display:flex; gap: 32px}
  nav.primary a{
    font-weight: 600; font-size: 15px; color: var(--navy);
    position:relative; padding: 6px 0;
  }
  nav.primary a.active::after,
  nav.primary a:hover::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px;
    height:2px; background: var(--mustard);
  }
  .cta-phone-removed{
    display:none;
    background: var(--mustard); color: var(--navy);
    padding: 12px 18px; border-radius: 999px;
    font-weight: 800; font-size: 15px;
    box-shadow: 0 8px 18px -10px rgba(255,189,89,.9);
    transition: transform .15s ease;
  }
  .cta-phone:hover{transform: translateY(-1px)}
  .cta-phone svg{width:18px;height:18px}

  /* ── HERO ───────────────────────────────────────────────────────────── */
  .hero{
    position: relative;
    background: var(--forest);
    overflow: hidden;
    isolation: isolate;
  }
  .hero .picture{
    position: relative;
    min-height: clamp(640px, 78vh, 780px);
    width: 100%;
    background:
      radial-gradient(120% 80% at 70% 30%, rgba(255,189,89,.12), transparent 60%),
      linear-gradient(180deg, #2a4a32 0%, #1f3a26 45%, #15291a 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* Synthetic "garden" placeholder image */
  .hero-svg{position:absolute; inset:0; width:100%; height:100%}
  .hero-overlay{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(15,36,24,.05) 0%, rgba(15,36,24,.0) 35%, rgba(15,36,24,.65) 100%),
      linear-gradient(90deg, rgba(18,37,61,.55) 0%, rgba(18,37,61,0) 55%);
  }
  .hero-copy{
    position: relative;
    margin-top: auto;
    padding-bottom: 150px;
    z-index: 3;
  }
  .hero-copy .container{display:grid; grid-template-columns: 1fr; gap: 18px; max-width: 1100px}
  .hero h1{color:#fff; max-width: 14ch}
  .hero h1 em{font-style:normal; color: var(--mustard); display:inline-block}
  .hero .lede{color: var(--ink-on-dark); font-size: clamp(17px, 1.4vw, 19px); max-width: 56ch}
  .hero .ctarow{display:flex; gap:14px; flex-wrap:wrap; margin-top: 12px}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding: 14px 22px; border-radius: 999px;
    font-weight: 700; font-size: 15px;
    border: 1px solid transparent;
    transition: transform .15s ease, background .15s ease;
  }
  .btn-primary{background: var(--mustard); color: var(--navy)}
  .btn-primary:hover{transform: translateY(-1px); background: #ffc977}
  .btn-ghost{background: transparent; color: #fff; border-color: rgba(255,255,255,.35)}
  .btn-ghost:hover{background: rgba(255,255,255,.08)}
  .btn svg{width:16px;height:16px}

  .hero-meta{
    position: relative;
    padding-top: 32px;
    padding-bottom: 24px;
    z-index: 4;
  }
  .hero-meta .row{
    display:flex; align-items:center; justify-content:space-between;
    color: rgba(255,255,255,.7); font-size: 12px;
    letter-spacing: .22em; text-transform: uppercase; font-weight:700;
  }
  .hero-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--mustard);display:inline-block;margin:0 12px}

  /* The wave divider (lifted from the flyer) */
  .wave{
    position:absolute; left:0; right:0; bottom:-1px;
    width:100%; height: 120px; z-index: 2; pointer-events:none;
  }
  .wave svg{display:block; width:100%; height:100%}

  /* ── INTRO BAND with hex photos ─────────────────────────────────────── */
  .band-intro{
    background: var(--forest);
    color: var(--ink-on-dark);
    position:relative; overflow:hidden;
    padding: 40px 0 110px;
  }
  .band-intro::before, .band-intro::after{
    content:""; position:absolute; border-radius:50%; filter: blur(4px);
    pointer-events:none;
  }
  .band-intro::before{width: 360px; height: 360px; background: var(--forest-600); opacity:.55; left:-80px; bottom:-120px}
  .band-intro::after{width: 320px; height: 320px; background: var(--forest-900); opacity:.7; right:-60px; top: 40px}
  .intro-grid{
    display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items:center;
    position:relative; z-index: 2;
  }
  .intro-copy h2{color:#fff}
  .intro-copy h2 .accent{color: var(--mustard)}
  .intro-copy p{color: var(--ink-on-dark); max-width: 52ch; font-size: 17.5px}
  .signature{
    margin-top: 22px; padding-top:22px;
    border-top: 1px dashed rgba(255,189,89,.35);
    display:flex; align-items:center; gap: 14px;
  }
  .signature .avatar{
    width:54px; height:54px; border-radius:50%;
    background: linear-gradient(135deg, #4a6b4f, #2a4a32);
    display:grid; place-items:center; color:#fff; font-weight: 800; font-family:var(--serif);
    border: 2px solid var(--mustard);
  }
  .signature small{display:block; color: rgba(255,255,255,.6); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700}
  .signature b{font-family: var(--serif); font-size: 18px; color:#fff}

  .hex-stack{
    position:relative; min-height: 480px;
  }
  .hex{
    position:absolute;
    width: 260px; aspect-ratio: 1/1.05;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    display:grid; place-items:center;
    color:#fff;
    font-family: var(--mono); font-size: 11px; letter-spacing:.24em; font-weight: 700;
    box-shadow: 0 30px 50px -25px rgba(0,0,0,.55);
  }
  .hex-frame{
    position:absolute; inset: -12px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: #fff;
    z-index: -1;
  }
  .hex.alt .hex-frame{background: var(--mustard)}
  .hex .label{
    background: rgba(15,36,24,.55); padding: 6px 10px; border-radius: 4px; backdrop-filter: blur(2px);
  }
  .hex-1{ top: 0; left: 8%; background:
    repeating-linear-gradient(45deg, #3b5947 0 6px, #2c4736 6px 10px); }
  .hex-2{ top: 110px; right: 4%; background:
    repeating-linear-gradient(-45deg, #4a6b54 0 6px, #2c4736 6px 10px); }
  .hex-3{ bottom: -20px; left: 32%; width: 220px; background:
    repeating-linear-gradient(0deg, #5a7a64 0 6px, #3b5947 6px 10px); }

  /* ── TUINONDERHOUD ─────────────────────────────────────────────────── */
  .section{padding: clamp(70px, 9vw, 120px) 0}
  .section.alt{background: var(--cream)}
  .section.alt-2{background: #fff}
  .section-head{
    display:grid; grid-template-columns: 1fr auto; gap: 32px; align-items:end;
    margin-bottom: 56px;
  }
  .section-head .lead{max-width: 56ch; color: #3a4a3a; font-size: 18px}
  .section-head h2{max-width: 16ch}

  .services{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  }
  .service{
    background: #fff;
    border: 1px solid #ece6d3;
    border-radius: var(--r-lg);
    padding: 36px 32px;
    display:flex; flex-direction:column;
    position: relative; overflow:hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .service::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width: 4px;
    background: var(--mustard); transform: scaleY(0); transform-origin: top;
    transition: transform .25s ease;
  }
  .service:hover{
    transform: translateY(-3px);
    box-shadow: 0 24px 50px -30px rgba(18,37,61,.25);
    border-color: #e2d8b8;
  }
  .service:hover::before{transform: scaleY(1)}
  .service .num{
    font-family: var(--serif); font-size: 13px; font-weight: 700;
    color: var(--mustard-600); letter-spacing:.18em;
  }
  .service .ico{
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--sage-50); color: var(--forest);
    display:grid; place-items:center; margin: 18px 0 22px;
  }
  .service .ico svg{width: 30px; height: 30px}
  .service h3{margin-bottom: 12px}
  .service p{color:#4a5a4a; font-size: 15.5px}
  .service ul{list-style:none; padding:0; margin: 10px 0 22px}
  .service ul li{
    position:relative; padding-left: 22px; font-size: 14.5px; color: #3a4a3a;
    padding-bottom: 7px;
  }
  .service ul li::before{
    content:""; position:absolute; left:0; top: 8px; width:10px; height: 2px; background: var(--mustard);
  }
  .service .more{
    margin-top: auto; padding-top: 14px;
    color: var(--navy); font-weight: 700; font-size: 14px;
    display:inline-flex; align-items:center; gap:8px;
    border-top: 1px solid #eee5d2;
  }
  .service .more svg{width:14px; height:14px; transition: transform .2s ease}
  .service:hover .more svg{transform: translateX(4px)}

  /* ── COÖRDINATIE (specialty pills) ──────────────────────────────────── */
  .coord{
    background: var(--forest);
    color: #fff; position: relative; overflow:hidden;
  }
  .coord .container{position: relative; z-index: 2}
  .coord::after{
    content:""; position:absolute; left:-200px; bottom:-200px;
    width: 600px; height: 600px; border-radius: 50%;
    background: var(--forest-600); opacity: .35;
    filter: blur(8px);
  }
  .coord h2{color:#fff; max-width: 18ch}
  .coord h2 .accent{color: var(--mustard)}
  .coord .section-head .lead{color: var(--ink-on-dark)}
  .pills{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  .pill{
    display:flex; align-items:center; gap: 16px;
    padding: 22px 24px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .pill:hover{
    background: rgba(255,189,89,.08);
    border-color: rgba(255,189,89,.35);
    transform: translateY(-2px);
  }
  .pill .ico{
    width: 44px; height: 44px; border-radius: 10px;
    background: rgba(255,189,89,.14); color: var(--mustard);
    display:grid; place-items:center; flex-shrink: 0;
  }
  .pill .ico svg{width: 22px; height: 22px}
  .pill b{display:block; font-family: var(--serif); font-size: 17px; font-weight: 700; color: #fff}
  .pill small{display:block; color: rgba(255,255,255,.6); font-size: 13px; margin-top: 2px}

  /* ── WERKGEBIED ── */
  .gebied{
    display:grid; grid-template-columns: 1fr 1fr; gap: 64px;
    align-items: center;
  }
  .gebied .map{
    aspect-ratio: 4/3; background: var(--sage-50);
    border-radius: var(--r-lg);
    position: relative; overflow:hidden;
    border: 1px solid #e2d8b8;
  }
  .gebied ul{list-style:none; padding:0; columns: 2; column-gap: 24px}
  .gebied ul li{
    padding: 10px 0 10px 24px; position: relative; font-weight: 600;
    border-bottom: 1px dashed #e2d8b8;
    break-inside: avoid;
  }
  .gebied ul li::before{
    content:""; position:absolute; left:0; top: 17px;
    width: 8px; height: 8px; border-radius:50%; background: var(--mustard);
    box-shadow: 0 0 0 4px rgba(255,189,89,.18);
  }

  /* ── CONTACT BAR (the yellow + navy split from the flyer) ───────────── */
  .contact-bar{
    display:grid; grid-template-columns: 280px 1fr;
    min-height: 220px;
  }
  .contact-bar .left{
    background: var(--navy); color: var(--mustard);
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding: 30px;
    text-align:center;
  }
  .contact-bar .left small{
    font-size: 11px; letter-spacing: .3em; font-weight: 700; opacity:.85;
  }
  .contact-bar .left b{
    font-family: var(--serif); font-size: 38px; font-weight: 800; letter-spacing: .04em;
    margin-top: 6px;
  }
  .contact-bar .left .sub{
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(255,189,89,.25);
    color: rgba(255,255,255,.7); font-size: 13px;
    line-height: 1.4; max-width: 220px;
  }
  .contact-bar .right{
    background: var(--mustard); color: var(--navy);
    display:grid; grid-template-columns: 1.2fr 1fr; gap: 40px;
    padding: 40px clamp(30px, 5vw, 70px);
    align-items: center;
  }
  .contact-bar .pitch h3{
    font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); font-weight: 800;
    color: var(--navy); margin-bottom: 8px; line-height: 1.15;
  }
  .contact-bar .pitch p{color: #2a3b53; font-size: 15px; margin: 0; max-width: 40ch}
  .contact-bar .lines{display:flex; flex-direction:column; gap: 12px}
  .contact-bar .lines a{
    display:flex; align-items:center; gap:14px;
    background: rgba(18,37,61,.06);
    padding: 14px 18px; border-radius: 999px;
    font-weight: 700; font-size: 15px;
    transition: background .15s ease, transform .15s ease;
  }
  .contact-bar .lines a:hover{background: rgba(18,37,61,.12); transform: translateX(2px)}
  .contact-bar .lines svg{width:18px;height:18px}
  .contact-bar .lines .ico{
    width: 36px; height:36px; border-radius:50%;
    background: var(--navy); color: var(--mustard);
    display:grid; place-items:center;
  }

  /* ── FOOTER ─────────────────────────────────────────────────────────── */
  footer{background: var(--forest-900); color: rgba(255,255,255,.7); font-size: 14px}
  footer .grid{
    display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
    padding: 64px 0 40px;
  }
  footer h4{color: #fff; font-family: var(--serif); font-size: 16px; margin: 0 0 16px}
  footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 9px}
  footer a:hover{color: var(--mustard)}
  footer .colophon{
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 22px 0; display:flex; justify-content:space-between; align-items:center;
    font-size: 12.5px; color: rgba(255,255,255,.5);
  }
  footer .badge{
    display:inline-flex; align-items:center; gap:8px;
    background: rgba(255,255,255,.05); padding: 6px 12px; border-radius: 999px;
    font-size: 11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
    color: var(--mustard);
  }

  /* ── RESPONSIVE ─────────────────────────────────────────────────────── */
  @media (max-width: 1024px){
    nav.primary{display:none}
    .services{grid-template-columns: 1fr 1fr}
    .pills{grid-template-columns: 1fr 1fr}
    .intro-grid{grid-template-columns: 1fr; gap: 80px}
    .hex-stack{min-height: 380px; max-width: 480px; margin: 0 auto}
    .gebied{grid-template-columns: 1fr; gap: 36px}
    .steps{grid-template-columns: 1fr 1fr}
    .step{border-bottom: 1px solid rgba(255,255,255,.12)}
    .step:nth-child(2){border-right: none}
    footer .grid{grid-template-columns: 1fr 1fr}
  }
  /* ── Gutenberg block rendering reset ─────────────────────────────────────
     Cancels default spacing WordPress's block library injects so the layout
     works correctly when content is rendered from Gutenberg blocks.        */
  .wp-block-group{margin-top:0;margin-bottom:0;max-width:none;padding:0}
  .wp-block-group.alignfull{width:100%;max-width:100%;margin-left:0;margin-right:0}
  .wp-block-group > *,.wp-block-list{margin-block-start:0;padding-inline-start:0}
  .wp-block-heading,.wp-block-paragraph{margin-top:0;margin-block-start:0}

  @media (max-width: 680px){
    header.site .row, .site .row{height: 72px}
    .lockup .mark{width:44px;height:44px}
    .lockup .mark svg{width:24px;height:24px}
    .lockup .word b{font-size: 18px}
    .cta-phone span{display:none}
    .cta-phone{padding: 12px}
    .section-head{grid-template-columns: 1fr}
    .services{grid-template-columns: 1fr}
    .pills{grid-template-columns: 1fr}
    .contact-bar{grid-template-columns: 1fr}
    .contact-bar .right{grid-template-columns: 1fr; gap: 24px}
    .steps{grid-template-columns: 1fr}
    .step{border-right: none; border-bottom: 1px solid rgba(255,255,255,.12)}
    footer .grid{grid-template-columns: 1fr; gap: 32px}
    .hex-1{left: 0}
    .hex-2{right: 0}
    .hex-3{left: 18%}
    .topbar .row{font-size: 11.5px; gap: 12px}
    .topbar a.hide-sm{display:none}
  }