/* =========================================================
   Heijman Consultancy — LANDING PAGE STYLES
   Link AFTER styles.css.
   Sections: hero(white) · cards(taupe) · team(white) · cta(taupe)
   Palette: white / taupe #ded6d3 / ink #212529 / muted #6c757d only.
   ========================================================= */

/* ---------- Hero intro ---------- */
.hero-intro{padding:130px 0 clamp(2.5rem,6vh,4rem);text-align:center}
.hero-intro .inner{max-width:820px;margin-inline:auto}
.hero-intro h1{font-size:clamp(2.3rem,1.5rem + 3.4vw,4rem);margin:1.3rem 0 0;letter-spacing:-.02em}
.hero-intro .lead{margin-top:1.5rem;font-size:clamp(1.05rem,1rem + .45vw,1.22rem);color:var(--muted);line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem;justify-content:center}

/* ---------- Dune band (full-bleed) ---------- */
.dune-band{
  width:100%;height:clamp(320px,44vh,480px);
  background-image:linear-gradient(180deg,rgba(33,37,41,.05),rgba(33,37,41,0) 22%),url("../images/duinen.jpg");
  background-size:cover;background-position:center 60%;background-color:var(--sand);
}

/* ---------- What we do — three cards + a larger Partners card ---------- */
.offer{background:var(--sand)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{
  min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:2.1rem 1.6rem;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(33,37,41,.4)}
.card-icon{height:64px;margin-bottom:1.2rem;display:flex;align-items:center;justify-content:center}
.card-icon img{height:64px;width:auto;max-width:100%}
.card h3{font-size:1.25rem;font-weight:500;margin-bottom:.6rem}
.card p{color:var(--muted);font-size:.95rem;overflow-wrap:break-word}

/* larger, emphasised Partners card */
.partner-card{
  margin-top:1.4rem;background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:clamp(2rem,4vw,3.1rem);display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1.6rem,4vw,3rem);align-items:center;
  transition:transform .2s ease,box-shadow .2s ease;
}
.partner-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(33,37,41,.4)}
.partner-card .p-icon{display:flex;align-items:center;justify-content:center}
.partner-card .p-icon img{height:96px;width:auto}
.partner-card .eyebrow{margin-bottom:.7rem}
.partner-card h3{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.3rem);font-weight:500;letter-spacing:-.015em;max-width:22ch;margin-bottom:.7rem}
.partner-card p{color:var(--muted);max-width:62ch}
.partner-card .p-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.partner-card .p-link:hover{color:var(--muted);border-color:var(--muted)}

/* ---------- Team (Freeke featured left/right, members below) ---------- */
.team{background:var(--paper)}
.founder{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:.5rem}
.founder-text .f-name{font-family:var(--font-display);font-weight:500;font-size:1.8rem;margin-top:.2rem}
.founder-text .f-role{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.founder-text p{color:var(--muted);margin-top:1rem;font-size:1rem;max-width:52ch}
.founder-text p a{color:var(--ink);border-bottom:1px solid var(--line);transition:color .15s ease,border-color .15s ease}
.founder-text p a:hover{color:var(--muted);border-color:var(--ink)}
.founder-text .about-links{margin-top:1.3rem}
.founder-text .about-links a{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink)}
.founder-text .about-links svg{width:24px;height:24px}
.founder-media{max-width:300px;margin-left:auto;width:100%}

/* portrait / certificate switcher */
.media-viewport{overflow:hidden;border-radius:6px;border:1px solid var(--line);background:var(--paper);touch-action:pan-y}
.media-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.media-slide{flex:0 0 100%;margin:0;aspect-ratio:3987/6000;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--paper)}
.media-slide img{width:100%;height:100%;object-fit:cover;display:block}

.media-controls{display:flex;gap:.5rem;margin-top:1rem;justify-content:center;flex-wrap:wrap}
.media-tab{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line);
  padding:.5rem .95rem;border-radius:999px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.media-tab:hover{color:var(--ink);border-color:var(--ink)}
.media-tab.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* the wider team — smaller heads, filling the width */
.member-row{display:grid;grid-template-columns:repeat(7,1fr);gap:1.8rem 1rem;margin-top:clamp(2.8rem,6vh,4.2rem)}
.member{text-align:center;min-width:0}
.member .avatar{
  position:relative;width:104px;height:104px;margin:0 auto .7rem;border-radius:50%;overflow:hidden;
  background:var(--sand);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.member .avatar svg{position:absolute;width:52px;height:52px;color:var(--muted)}
.member .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member .m-name{font-family:var(--font-display);font-weight:500;font-size:1rem}
.member .m-role{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.team-note{margin-top:1.8rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}

/* ---------- CTA ---------- */
.cta{background:var(--sand)}
.cta-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.cta h2{font-size:clamp(2rem,1.5rem + 2.2vw,3rem)}
.cta p{margin-top:1.1rem;color:var(--muted);max-width:460px}
.cta-actions{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
@media(min-width:900px){.cta-actions{align-items:flex-end}}

/* ---------- Page responsive ---------- */
@media(max-width:900px){
  .founder{grid-template-columns:1fr}
  .founder-media{order:-1;margin:0 auto;max-width:300px}
  .founder-text{text-align:center}
  .founder-text p{margin-inline:auto}
  .founder-text .about-links{display:flex;justify-content:center}
  .member-row{grid-template-columns:repeat(4,1fr)}
  .cta-inner{grid-template-columns:1fr}
}
@media(max-width:720px){
  .cards{grid-template-columns:1fr}
  .partner-card{grid-template-columns:1fr;text-align:center;justify-items:center}
  .partner-card h3{max-width:none}
}
@media(max-width:640px){
  .member-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:420px){
  .member-row{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Hero stat citation ----------
   Devices with real hover (mouse/trackpad): the [1] marker's title
   tooltip is enough, so the permanent source line is hidden.
   Touch devices (no hover): no tooltip on tap, so the source line
   stays visible, just small. ---------- */
.hero-intro .cite-mark{position:relative;display:inline-block;color:var(--muted);font-size:.75em;border-bottom:1px dotted var(--muted);cursor:help;outline:none}
.hero-intro .cite-mark:hover,.hero-intro .cite-mark:focus-visible{color:var(--ink);border-color:var(--ink)}
.hero-intro .cite-tooltip{
  display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:.68rem;line-height:1.45;
  padding:.65rem .85rem;border-radius:6px;width:max-content;max-width:min(240px,70vw);text-align:left;
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:5;
}
.hero-intro .cite-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink)}
.hero-intro .cite-mark:hover .cite-tooltip,.hero-intro .cite-mark:focus-visible .cite-tooltip{display:block;opacity:1;transform:translateX(-50%) translateY(0)}
/* Narrow screens: skip the tooltip entirely and show the source line instead,
   so a tooltip near the right edge can never widen the page. */
@media(max-width:700px){
  .hero-intro .cite-tooltip,
  .hero-intro .cite-mark:hover .cite-tooltip,
  .hero-intro .cite-mark:focus-visible .cite-tooltip{display:none}
  .hero-intro .hero-source{display:block}
}
.hero-intro .hero-source{
  margin-top:.6rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;
  color:var(--muted);scroll-margin-top:100px;
}
@media (hover: hover) and (pointer: fine){
  .hero-intro .hero-source{display:none}
}