/* Blue Ocean Publishing Studio — one-pager
   Gebouwd op het meegeleverde design system: tokens/colors.css,
   tokens/typography.css en tokens/spacing.css zijn onaangeroerd. */

@import 'colors.css';
@import 'spacing.css';
@import 'typography.css';

/* Fonts: assets/css/fonts.css (paden herschreven t.o.v. tokens/fonts.css) */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--surface-page);color:var(--text-primary);
  font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-primary);text-decoration:none}
a:hover{color:var(--accent-primary-hover)}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:2px}

/* ---------- layout ---------- */
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-5)}
.wrap--narrow{max-width:820px}
section{padding:var(--space-9) 0}
@media (max-width:720px){section{padding:var(--space-8) 0}}
.band--navy{background:var(--surface-navy);color:var(--text-on-navy);position:relative;overflow:hidden}
.band--navy h2,.band--navy h3,.band--navy .lead{color:#fff}

/* ---------- type ---------- */
.eyebrow{font-size:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  font-weight:600;color:var(--accent-primary);margin-bottom:var(--space-4);line-height:1.4}
.band--navy .eyebrow{color:var(--blue-300)}
.display{font-family:var(--font-serif);font-weight:500;font-size:var(--text-display-1);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
h2{font-family:var(--font-serif);font-weight:500;font-size:var(--text-display-2);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);max-width:20ch}
h3{font-family:var(--font-serif);font-weight:500;font-size:var(--text-h2);line-height:var(--leading-snug)}
h4{font-family:var(--font-sans);font-weight:600;font-size:var(--text-body);line-height:var(--leading-snug)}
.lead{font-size:var(--text-body-lg);color:var(--text-secondary);max-width:62ch;margin-top:var(--space-5)}
.band--navy .lead{color:var(--text-on-navy)}
p+p{margin-top:var(--space-4)}
.prose{color:var(--text-secondary);max-width:64ch}
.band--navy .prose{color:var(--text-on-navy)}
.muted{color:var(--text-muted);font-size:var(--text-body-sm)}
.band--navy .muted{color:var(--blue-300)}
.rule{height:1px;background:var(--border-subtle);border:0;margin:var(--space-7) 0}
.band--navy .rule{background:var(--border-on-navy)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-sans);font-weight:600;
  font-size:15px;padding:13px 22px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  transition:background var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard)}
.btn--primary{background:var(--accent-primary);color:#fff}
.btn--primary:hover{background:var(--accent-primary-hover);color:#fff}
.btn--warm{background:var(--accent-warm);color:#fff}
.btn--warm:hover{background:var(--accent-warm-hover);color:#fff}
.btn--secondary{background:transparent;color:var(--accent-primary);border-color:var(--border-default)}
.btn--secondary:hover{background:var(--surface-sunken);color:var(--accent-primary-hover)}
.btn--on-navy{background:transparent;color:#fff;border-color:var(--border-on-navy)}
.btn--on-navy:hover{background:rgba(255,255,255,.08);color:#fff}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow-md)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  min-height:72px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:var(--space-5)}
.nav a{font-size:var(--text-body-sm);font-weight:500;color:var(--text-secondary)}
.nav a:hover{color:var(--accent-primary-hover)}

/* ---------- hero ---------- */
.hero{padding:var(--space-10) 0 var(--space-9)}
.hero .display{max-width:16ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7)}
.hero__tagline{margin-top:var(--space-7);font-size:var(--text-caption);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--blue-300)}
.wave{position:absolute;left:0;right:0;bottom:-10px;width:100%;height:auto;opacity:.18;pointer-events:none}
.wave--top{top:-30px;bottom:auto;transform:scaleY(-1)}

/* ---------- grid & cards ---------- */
.grid{display:grid;gap:var(--space-5)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:1fr}}
@media (max-width:720px){.grid--2,.grid--4{grid-template-columns:1fr}}

.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);padding:var(--space-5);
  transition:box-shadow var(--duration-base) var(--ease-standard)}
.card:hover{box-shadow:var(--shadow-md)}
.card__eyebrow{font-size:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--accent-primary);font-weight:600;margin-bottom:6px}
.card__title{font-family:var(--font-serif);font-size:var(--text-h3);margin-bottom:8px}
.card__body{font-size:var(--text-body-sm);color:var(--text-secondary);line-height:var(--leading-normal)}
.card--navy{background:var(--surface-navy);border-color:var(--border-on-navy);box-shadow:var(--shadow-navy);color:#fff}
.card--navy .card__eyebrow{color:var(--blue-300)}
.card--navy .card__body{color:var(--text-on-navy)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-7)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat__value{font-family:var(--font-serif);font-size:var(--text-display-2);line-height:1;color:var(--accent-primary)}
.band--navy .stat__value{color:var(--clay-300)}
.stat__label{font-size:var(--text-body-sm);color:var(--text-secondary);margin-top:var(--space-2)}
.band--navy .stat__label{color:var(--text-on-navy)}

/* ---------- quote ---------- */
blockquote{font-family:var(--font-serif);font-style:italic;font-size:var(--text-h1);
  line-height:var(--leading-snug);border-left:2px solid var(--blue-400);padding-left:var(--space-5);max-width:26ch}
.band--navy blockquote{border-color:var(--clay-500);color:#fff}
blockquote cite{display:block;margin-top:var(--space-3);font-family:var(--font-sans);font-style:normal;
  font-size:var(--text-caption);color:var(--text-muted)}
.band--navy blockquote cite{color:var(--blue-300)}

/* ---------- table ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card)}
table th,table td{text-align:left;padding:14px var(--space-4);font-size:var(--text-body-sm);vertical-align:top}
table thead th{background:var(--surface-navy-deep);color:#fff;font-weight:600;font-size:var(--text-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap}
table tbody tr+tr{border-top:1px solid var(--border-subtle)}
table tbody tr:nth-child(even){background:var(--surface-sunken)}
td.is-ours{color:var(--text-primary);font-weight:500}
td.is-theirs{color:var(--text-muted)}

/* ---------- tags ---------- */
.tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tag--reach{background:var(--phase-reach);color:#05233f}
.tag--connect{background:var(--phase-connect);color:#fff}
.tag--create{background:var(--phase-create);color:#fff}
.tag--proof{background:var(--phase-proof);color:#fff}
.tag--neutral{background:var(--surface-sunken);color:var(--text-secondary)}
.tag--outline{background:transparent;color:var(--blue-300);border:1px solid var(--border-on-navy)}

/* ---------- chain ---------- */
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);margin-top:var(--space-7);align-items:stretch}
@media (max-width:1080px){.chain{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.chain{grid-template-columns:1fr}}
.chain__step{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.chain__num{font-size:var(--text-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--accent-primary);font-weight:600}
.chain__title{font-family:var(--font-serif);font-size:var(--text-h3);margin:6px 0 8px}
.chain__body{font-size:var(--text-body-sm);color:var(--text-secondary);line-height:var(--leading-normal)}
.chain__step::after{content:'';position:absolute;right:calc(var(--space-4) * -1 + 3px);top:50%;
  width:10px;height:10px;border-top:1px solid var(--border-default);border-right:1px solid var(--border-default);
  transform:translateY(-50%) rotate(45deg)}
.chain__step:last-child::after{display:none}
@media (max-width:1080px){.chain__step::after{display:none}}

/* ---------- loop ---------- */
.loop-layout{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:var(--space-8);align-items:center;margin-top:var(--space-7)}
@media (max-width:900px){.loop-layout{grid-template-columns:1fr;gap:var(--space-7)}}
.loop{position:relative;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto}
.loop__ring{position:absolute;inset:0;width:100%;height:100%}
.loop__node{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;box-shadow:var(--shadow-navy);transform:translate(-50%,-50%)}
.loop__node b{font-size:clamp(13px,3.6vw,17px);font-weight:700;letter-spacing:.02em}
.loop__node span{font-size:clamp(10px,2.6vw,12px);opacity:.85}
.loop__node--reach{top:17%;left:50%;background:var(--phase-reach);color:#05233f}
.loop__node--connect{top:50%;left:83%;background:var(--phase-connect);color:#fff}
.loop__node--create{top:83%;left:50%;background:var(--phase-create);color:#fff}
.loop__node--proof{top:50%;left:17%;background:var(--phase-proof);color:#fff}
.loop__hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;text-align:center;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-300);line-height:1.4}
.phase-list{display:flex;flex-direction:column;gap:var(--space-5)}
.phase{display:grid;grid-template-columns:110px 1fr;gap:var(--space-4);align-items:start}
@media (max-width:560px){.phase{grid-template-columns:1fr;gap:var(--space-2)}}
.phase__body{font-size:var(--text-body-sm);color:var(--text-on-navy);line-height:var(--leading-normal)}
.phase__kpi{display:block;margin-top:4px;font-size:var(--text-caption);color:var(--blue-300)}

/* ---------- matrix ---------- */
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border-subtle);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;margin-top:var(--space-5)}
.matrix__cell{background:var(--surface-card);padding:var(--space-5);min-height:150px;display:flex;flex-direction:column;gap:6px}
.matrix__cell--primary{background:var(--surface-navy);color:#fff}
.matrix__cell--conversion{background:var(--clay-100)}
.matrix__cell h4{font-family:var(--font-serif);font-weight:500;font-size:var(--text-h3)}
.matrix__cell p{font-size:var(--text-body-sm);color:var(--text-secondary);line-height:var(--leading-normal)}
.matrix__cell--primary p{color:var(--text-on-navy)}
.matrix__axis{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}

/* ---------- books ---------- */
.book{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:var(--space-7);align-items:center}
@media (max-width:800px){.book{grid-template-columns:1fr;gap:var(--space-5)}}
.book__cover img{width:100%;filter:drop-shadow(0 24px 40px rgba(8,26,48,.22))}
.book--next{grid-template-columns:minmax(120px,170px) 1fr;gap:var(--space-5);align-items:center}
@media (max-width:800px){.book--next{grid-template-columns:130px 1fr}}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-sm);
  font-size:11px;font-weight:600;background:var(--clay-100);color:var(--clay-600)}
.badge--neutral{background:var(--surface-sunken);color:var(--text-muted)}

/* ---------- panel ---------- */
.panel{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:var(--space-7);box-shadow:var(--shadow-sm)}
@media (max-width:720px){.panel{padding:var(--space-5)}}
.list-check{list-style:none;padding:0;margin:var(--space-4) 0 0;display:flex;flex-direction:column;gap:var(--space-3)}
.list-check li{position:relative;padding-left:24px;font-size:var(--text-body-sm);color:var(--text-secondary);line-height:var(--leading-normal)}
.list-check li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--blue-400)}
.list-check--muted li::before{background:var(--border-default)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr minmax(320px,420px);gap:var(--space-8);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:var(--space-7)}}
.field{display:flex;flex-direction:column;gap:6px;font-size:var(--text-body-sm);color:var(--blue-300);margin-bottom:var(--space-4)}
.field input,.field textarea{font:inherit;font-size:var(--text-body);padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--border-on-navy);background:rgba(255,255,255,.06);color:#fff;
  transition:border-color var(--duration-base) var(--ease-standard)}
.field input::placeholder,.field textarea::placeholder{color:rgba(223,234,245,.45)}
.field input:focus,.field textarea:focus{border-color:var(--blue-400);outline:none}
.field textarea{resize:vertical;min-height:110px}

/* ---------- footer ---------- */
.site-footer{background:var(--surface-navy-deep);color:var(--text-on-navy);padding:var(--space-8) 0 var(--space-6)}
.site-footer img{height:64px;width:auto}
.footer__grid{display:grid;grid-template-columns:1fr auto;gap:var(--space-7);align-items:start}
@media (max-width:720px){.footer__grid{grid-template-columns:1fr}}
.footer__links{display:flex;flex-direction:column;gap:10px;font-size:var(--text-body-sm)}
.footer__links a{color:var(--text-on-navy)}
.footer__links a:hover{color:#fff}
.footer__bottom{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--border-on-navy);
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;font-size:var(--text-caption);color:var(--blue-300)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(10px);
  transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card{transition:none}
}


/* horizontale lockup in de header: golfmerk + wordmark als tekst
   (het meegeleverde lockup is gestapeld en op 44px onleesbaar) */
.brand img{height:42px;width:42px}
.brand__words{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-size:17px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-800)}
.brand__sub{font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-600)}
.site-footer img{height:104px}

/* lockup op navy */
.brand--inverse{gap:14px}
.brand--inverse img{height:52px;width:52px}
.brand--inverse .brand__name{color:#fff;font-size:19px}
.brand--inverse .brand__sub{color:var(--blue-300);font-size:10.5px}

/* header-navigatie: links vervallen op smal scherm, de CTA blijft */
.nav__links{display:flex;align-items:center;gap:var(--space-5)}
.brand__name,.brand__sub{white-space:nowrap}
@media (max-width:900px){
  .nav__links{display:none}
}
@media (max-width:420px){
  .site-header__inner{gap:var(--space-3)}
  .brand img{height:36px;width:36px}
  .brand__name{font-size:15px;letter-spacing:.1em}
  .brand__sub{font-size:8.5px;letter-spacing:.16em}
  .btn{padding:11px 16px;font-size:14px}
}

/* select in het contactformulier, zelfde behandeling als input/textarea */
.field select{font:inherit;font-size:var(--text-body);padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--border-on-navy);background:rgba(255,255,255,.06);color:#fff;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--blue-300) 50%),linear-gradient(135deg,var(--blue-300) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color var(--duration-base) var(--ease-standard)}
.field select:focus{border-color:var(--blue-400);outline:none}
.field select option{background:var(--surface-navy-deep);color:#fff}

/* kernzin: tekst naast de uitgelichte zin */
.split{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:var(--space-8);
  align-items:start;margin-top:var(--space-7)}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--space-6)}}
.kernzin-card{padding:var(--space-6)}
.kernzin-card__line{font-family:var(--font-serif);font-style:italic;font-size:var(--text-h1);
  line-height:var(--leading-snug);color:#fff;margin:var(--space-3) 0 var(--space-4)}