/* ==========================================================================
   Briljant Lekdetectie — style.css
   Tokens per .claude/skills/brand-guidelines/SKILL.md + DESIGN.md
   ========================================================================== */

:root{
  /* Brand */
  --c-primary:#0056BF;
  --c-primary-hover:#00459B;
  --c-ink:#0D0D0D;

  /* Neutrals */
  --c-text:#1A1A1A;
  --c-muted:#5A636E;
  --c-bg:#FFFFFF;
  --c-tint:#EFF6FC;
  --c-surface-soft:#F7FAFD;
  --c-border:#E1E6EC;

  /* Type */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --text-hero:clamp(2.5rem,1.65rem + 3.9vw,4.6rem);
  --text-h2:clamp(1.75rem,1.3rem + 2vw,2.6rem);
  --text-h3:clamp(1.05rem,0.98rem + 0.35vw,1.2rem);
  --text-lead:clamp(1.1rem,1rem + 0.5vw,1.4rem);
  --text-body:clamp(1rem,0.96rem + 0.2vw,1.075rem);
  --text-small:0.9375rem;

  /* Space */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-6:1.5rem; --s-8:2rem; --s-12:3rem; --s-16:4rem;
  --section-y:clamp(3rem,7vw,6rem);

  /* Shape */
  --r-sm:8px; --r-md:10px; --r-lg:18px; --r-pill:999px;
  --shadow-card:0 2px 4px rgb(13 13 13 / .04), 0 12px 28px rgb(0 86 191 / .07);
  --shadow-card-hover:0 4px 8px rgb(13 13 13 / .05), 0 20px 44px rgb(0 86 191 / .12);

  /* Motion */
  --ease-quint:cubic-bezier(.22,1,.36,1);
  --ease-quart:cubic-bezier(.25,1,.5,1);

  /* Layering */
  --z-sticky:100; --z-nav-panel:110; --z-skip:200;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--c-bg);color:var(--c-text);
  font-family:var(--font-sans);font-size:var(--text-body);line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,figure{margin:0}
ul{list-style:none;padding:0}
a{color:var(--c-primary);text-decoration-thickness:1px;text-underline-offset:.18em}
button{font:inherit;color:inherit}

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--c-primary);outline-offset:3px;border-radius:4px;
}

.container{width:min(1180px,100% - 2*clamp(1.25rem,5vw,3rem));margin-inline:auto}
.icon{width:1.15em;height:1.15em;flex:none}

.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:var(--z-skip);
  background:var(--c-primary);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-weight:600;text-decoration:none;transition:top .2s var(--ease-quart);
}
.skip-link:focus-visible{top:1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.72rem 1.35rem;border-radius:var(--r-sm);border:2px solid transparent;
  font-size:1rem;font-weight:600;letter-spacing:-.005em;line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s var(--ease-quart),color .18s var(--ease-quart),
             border-color .18s var(--ease-quart),transform .22s var(--ease-quint),
             box-shadow .22s var(--ease-quint);
}
.btn--lg{padding:.95rem 1.75rem;font-size:1.05rem}
.btn--primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff;box-shadow:0 2px 6px rgb(0 86 191 / .22)}
.btn--primary:hover{background:var(--c-primary-hover);border-color:var(--c-primary-hover);transform:translateY(-2px);box-shadow:0 8px 20px rgb(0 86 191 / .3)}
.btn--primary:active{transform:translateY(0)}
.btn--secondary{background:#fff;border-color:var(--c-primary);color:var(--c-primary)}
.btn--secondary:hover{background:var(--c-tint);transform:translateY(-2px)}
.btn--secondary:active{transform:translateY(0)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:rgb(255 255 255 / .94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-border);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:84px}
.site-logo{display:block;line-height:0}
.site-logo img{width:clamp(190px,22vw,246px)}

.site-header__cta{font-size:1.02rem}
.site-header__cta-num{font-variant-numeric:tabular-nums}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2rem,4.5vw,3.25rem) clamp(2.75rem,5.5vw,4.5rem);overflow:hidden}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,3.5rem);align-items:center;
}
.hero__title{
  font-size:var(--text-hero);font-weight:800;letter-spacing:-.035em;line-height:.98;
  text-wrap:balance;margin-bottom:.55rem;
}
.hero__title-blue{color:var(--c-primary)}
.hero__title-ink{color:var(--c-ink)}
.hero__tagline{
  font-size:var(--text-lead);font-weight:700;letter-spacing:-.02em;line-height:1.25;
  color:var(--c-primary);margin-bottom:1rem;text-wrap:balance;
}
.hero__lead{max-width:46ch;color:var(--c-text);text-wrap:pretty;margin-bottom:1.9rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.9rem}

/* Hero media: photo clipped to a big convex left curve, blue crescent offset behind.
   The crescent is a duplicate of the shape pushed left — never a border, so it only
   ever reads on the curve, exactly as in the approved comp. */
.hero__media{position:relative;isolation:isolate}
.hero__media-frame,
.hero__media-arc{border-radius:46% 0 0 46% / 50% 0 0 50%}
.hero__media-frame{overflow:hidden;position:relative;z-index:1;background:var(--c-tint)}
.hero__media-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__media-arc{
  position:absolute;inset:0;z-index:0;background:var(--c-primary);
  transform:translateX(-17px);
}
@media (min-width:901px){
  /* photo runs off the right page edge, as in the comp */
  .hero__media{margin-right:calc(-1 * max(clamp(1.25rem,5vw,3rem),(100vw - 1180px)/2))}
}

/* ---------- Wat we doen ---------- */
.services{padding-block:0 clamp(2rem,4.5vw,3.25rem)}
.section-title{
  font-size:var(--text-h2);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  color:var(--c-ink);text-align:center;text-wrap:balance;
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.services__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.1rem,2.2vw,1.75rem);
}
.service-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.6vw,2rem);text-align:center;
  box-shadow:var(--shadow-card);
  transition:transform .32s var(--ease-quint),box-shadow .32s var(--ease-quint);
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.service-card__icon{display:block;color:var(--c-primary);margin-inline:auto;margin-bottom:1.1rem}
.service-card__icon svg{width:clamp(52px,6vw,64px);height:auto}
.service-card__title{
  font-size:var(--text-h3);font-weight:700;letter-spacing:-.015em;line-height:1.25;
  color:var(--c-ink);margin-bottom:.55rem;
}
.service-card__desc{font-size:var(--text-small);line-height:1.55;color:var(--c-muted);text-wrap:pretty}

/* ---------- Wij zoeken tot we het vinden ---------- */
.detective{padding-block:0 var(--section-y)}
.detective__grid{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:center;
  background:var(--c-surface-soft);border:1px solid var(--c-border);
  border-radius:var(--r-lg);padding:clamp(1.75rem,4vw,3rem);
}
.detective__figure img{
  width:100%;max-width:380px;margin-inline:auto;
  filter:drop-shadow(0 18px 32px rgb(13 13 13 / .14));
}
.detective__copy p{max-width:62ch;text-wrap:pretty;margin-bottom:1rem}
.detective__copy p:last-of-type{margin-bottom:1.75rem}
.section-title--left{text-align:left;margin-bottom:1.1rem}

/* ---------- Footer ---------- */
.site-footer__band{background:var(--c-tint);padding-block:clamp(2.25rem,4.5vw,3.25rem)}
.footer-grid{
  display:grid;grid-template-columns:.95fr 1fr .9fr 1.05fr 1.05fr;
  gap:clamp(1.25rem,2.2vw,2rem);align-items:center;
}
.footer-col{position:relative;text-align:center}
.footer-col + .footer-col::before{
  content:"";position:absolute;left:calc(clamp(1.5rem,3vw,2.5rem) / -2);
  top:50%;translate:0 -50%;width:1px;height:74%;
  background:rgb(0 86 191 / .18);
}
.footer-col--brand{text-align:left}
.footer-wordmark{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;letter-spacing:-.035em;line-height:1;margin-bottom:.7rem}
.footer-wordmark__blue{color:var(--c-primary)}
.footer-wordmark__ink{color:var(--c-ink)}
.footer-tagline{font-size:1.05rem;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--c-primary)}

.footer-col__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:var(--r-pill);
  background:#fff;color:var(--c-primary);margin-bottom:.85rem;
  box-shadow:0 2px 10px rgb(0 86 191 / .1);
}
.footer-col__icon .icon{width:1.7rem;height:1.7rem}
.footer-col__value{
  display:block;font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.02em;
  color:var(--c-primary);text-decoration:none;margin-bottom:.35rem;
}
a.footer-col__value{white-space:nowrap}
a.footer-col__value:hover{color:var(--c-primary-hover);text-decoration:underline}
.footer-col:nth-child(3) .footer-col__value{color:var(--c-ink)}
.footer-col__value--address{white-space:normal;font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.4;letter-spacing:-.01em}
.footer-col__value--mail{
  white-space:normal;font-size:clamp(.875rem,1vw,.95rem);letter-spacing:-.01em;line-height:1.35;
  overflow-wrap:anywhere;
}
.footer-col__meta a{color:var(--c-muted);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.footer-col__meta a:hover{color:var(--c-primary);text-decoration:underline}
.footer-col__meta{font-size:var(--text-small);color:var(--c-muted)}

.footer-col--badge{display:flex;flex-direction:column;align-items:center;gap:1rem}
.trust-badge{width:clamp(96px,11vw,124px);height:auto}

.site-footer__bar{background:var(--c-primary);color:#fff;padding-block:.95rem}
.site-footer__bar p{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.4rem .9rem;font-size:var(--text-small);
}
.site-footer__bar a{color:#fff;text-decoration:none}
.site-footer__bar a:hover{text-decoration:underline}
.site-footer__bar span[aria-hidden]{opacity:.5}
/* needs to outrank `.site-footer__bar p`, which is a flex row with a gap:
   the label and the link are one sentence, not two flex items */
.site-footer__bar .site-footer__credit{
  display:block;text-align:center;margin-top:.5rem;
  font-size:var(--text-small);color:rgb(255 255 255 / .82);
}
.site-footer__credit a{color:#fff;text-decoration:underline;text-underline-offset:.2em}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .site-header__inner{min-height:72px}
  .site-header__cta-num{display:none}

  .hero__grid{grid-template-columns:1fr;gap:2.25rem}
  .hero__copy{order:1}
  .hero__media{order:2}
  .hero__media-frame,.hero__media-arc{border-radius:22px}
  .hero__media-arc{transform:translate(-11px,11px)}
  .hero__lead{max-width:60ch}

  .detective__grid{grid-template-columns:1fr;gap:1.75rem}
  .detective__figure img{max-width:230px}
  .section-title--left{text-align:center}
  .detective__copy{text-align:center}
  .detective__copy p{margin-inline:auto}

  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .footer-col{text-align:center}
  .footer-col--brand{text-align:center;grid-column:1 / -1}
  .footer-col + .footer-col::before{display:none}
  .footer-col--mail,
  .footer-col--badge{grid-column:1 / -1}

  /* the phone/e-mail links are the primary conversion path: give them a
     comfortable tap target, not just the WCAG 2.2 minimum */
  a.footer-col__value{padding-block:.35rem}
  .footer-col__meta a{display:inline-block;padding-block:.3rem}
  .site-footer__bar a{display:inline-block;padding-block:.3rem}
}

@media (max-width:640px){
  .hero__actions .btn{flex:1 1 auto}
  .footer-grid{grid-template-columns:1fr}
}

@media (max-width:480px){
  /* .btn is nowrap by default; on narrow screens a long CTA label would set the
     grid's min-content width and push the page into horizontal scroll */
  .btn{white-space:normal;text-align:center}
  /* give the header CTA enough room to stay on one line next to the logo */
  .site-logo img{width:clamp(148px,38vw,190px)}
  .site-header__cta{padding-inline:1rem}
  .site-header__cta span:not(.site-header__cta-num){font-size:.95rem}
}

/* ==========================================================================
   Motion — JS opts in. Without JS everything is visible by default.
   ========================================================================== */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mediaIn{from{opacity:0;transform:translateX(34px) scale(.96)}to{opacity:1;transform:none}}
@keyframes arcIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(-17px)}}
@keyframes arcInSmall{from{opacity:0;transform:translate(6px,-4px)}to{opacity:1;transform:translate(-11px,11px)}}

/* Page-load choreography (hero) */
.js.anim-ready [data-anim]{animation:riseIn .68s var(--ease-quint) both}
.js.anim-ready [data-anim="1"]{animation-delay:.05s}
.js.anim-ready [data-anim="2"]{animation-delay:.13s}
.js.anim-ready [data-anim="3"]{animation-delay:.21s}
.js.anim-ready [data-anim="4"]{animation-delay:.29s}
.js.anim-ready [data-anim="5"]{animation-delay:.37s}
.js.anim-ready [data-anim="media"]{animation:mediaIn .85s var(--ease-quint) .1s both}
.js.anim-ready [data-anim="media"] .hero__media-arc{animation:arcIn .85s var(--ease-quint) .22s both}
@media (max-width:900px){
  .js.anim-ready [data-anim="media"] .hero__media-arc{animation-name:arcInSmall}
}

/* Scroll reveals */
.js [data-reveal].will-reveal{opacity:0;transform:translateY(26px)}
.js [data-reveal].will-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease-quart),transform .7s var(--ease-quint);
  transition-delay:calc(var(--d,0) * 70ms);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js [data-reveal].will-reveal{opacity:1;transform:none}
  .js.anim-ready [data-anim="media"] .hero__media-arc{transform:translateX(-17px)}
  @media (max-width:900px){.js.anim-ready [data-anim="media"] .hero__media-arc{transform:translate(-11px,11px)}}
  .btn:hover,.service-card:hover{transform:none}
}

@media print{
  .site-header,.hero__media-arc{display:none}
  .site-footer__bar{background:none;color:#000}
  .site-footer__bar a{color:#000}
}