/* ==========================================================================
   sasba.nl — voorstel: B als basis, magenta van C op volle sterkte
   Eén stylesheet, geen JavaScript, geen buildstap.
   Beweging komt uit CSS scroll-driven animations; zonder ondersteuning
   staat alles stil en zichtbaar.
   ========================================================================== */

@font-face{
  font-family:Archivo;
  src:url('/assets/fonts/archivo.woff2') format('woff2');
  font-weight:300 600;font-style:normal;font-display:swap;
}

:root{
  --papier:#F7F4F0;
  --papier-diep:#EDE8E1;
  --inkt:#1C1A18;
  --inkt-zacht:#615A52;
  --inkt-vaag:#6B645C;
  --lijn:#8A7A66;

  --magenta:#ED1364;
  --magenta-inkt:#B80B4D;
  --magenta-diep:#8F0739;

  /* het verloop van het slotblok, van papier naar warm donker */
  /* Warm grijs, afgeleid van haar logo (#4D4A45 en #A8A29C) in plaats van klei.
     Het bruin trok de magenta punt naar bordeaux; op grijs blijft hij haar kleur. */
  --slot-1:#F7F4F0; --slot-2:#F5F2ED; --slot-3:#F0ECE6; --slot-4:#E7E1D8;
  --slot-5:#DFD8CD; --slot-6:#9C948A; --slot-7:#565049; --slot-8:#322D28;
  --slot-lijn:rgba(28,26,24,.30);
  --slot-zacht:#4A443D;
  --slot-vaag:#4A443D;
  --merk:rgba(247,244,240,.13);
  --merk-punt:#ED1364;

  --sans:Archivo,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --rand:clamp(1.25rem,4vw,3.5rem);
  --sectie:clamp(4rem,9vw,8.5rem);
  --regel:38rem;
}



*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
/* Licht is de identiteit: warm papier met magenta. Een donkere variant
   gaf een heel ander merk terug dan haar briefpapier en logo. */
:root{color-scheme:light}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.6;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;height:auto;display:block}
address{font-style:normal}

/* --- typografie ---------------------------------------------------------- */

/* Nederlandse samenstellingen ('Vennootschapsbelasting') zijn op kopgrootte
   breder dan een telefoonscherm. hyphens:auto breekt ze netjes af, maar alleen
   als de browser een Nederlands woordenboek heeft; break-word is het vangnet
   voor als dat er niet is. */
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.028em;line-height:1.02;
         text-wrap:balance;hyphens:auto;hyphenate-limit-chars:10 4 4;
         overflow-wrap:break-word}
h1{font-size:clamp(2.5rem,5.6vw,4.75rem)}
h2{font-size:clamp(2rem,4.4vw,3.5rem)}
h3{font-size:clamp(1.25rem,1.8vw,1.625rem);letter-spacing:-.018em}
em{font-style:normal;font-weight:500}

p{margin:0 0 1.2em;text-wrap:pretty;overflow-wrap:break-word}
a{color:inherit}

/* het micro-label: het enige structuurmiddel op de hele site */
.mini{
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;line-height:1.5;margin:0;color:var(--inkt-vaag);
}
.mini--punt{display:flex;align-items:center;gap:.6rem}
.mini--punt::before{content:"";flex:0 0 auto;width:7px;height:7px;
  border-radius:50%;background:var(--magenta)}

.lead{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.55;
      font-weight:300;color:var(--inkt-zacht);max-width:44ch}

.groot{font-size:clamp(1.25rem,2.1vw,1.875rem);line-height:1.4;
       font-weight:300;max-width:34ch}

:focus-visible{outline:2px solid var(--magenta-inkt);outline-offset:3px;border-radius:2px}

/* --- beweging ------------------------------------------------------------ */
/* Alles staat standaard zichtbaar. Alleen browsers die scroll-driven
   animations kennen krijgen de beweging, en alleen als de bezoeker die wil. */

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .op{animation:op linear both;animation-timeline:view();
        animation-range:entry 4% cover 26%}
    @keyframes op{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}


    /* de heldfoto zakt traag mee en zoomt licht uit */
    .parallax img{animation:para linear both;animation-timeline:scroll();
                  animation-range:0 90vh}
    @keyframes para{from{transform:scale(1.14) translateY(-1.5%)}
                    to{transform:scale(1) translateY(1.5%)}}

    /* het magenta vlak: tekst komt licht op */
    .band__in{animation:bandin linear both;animation-timeline:view();
              animation-range:entry 10% cover 45%}
    @keyframes bandin{from{opacity:.25;transform:translateY(26px)}to{opacity:1;transform:none}}

    /* dienstenregels komen één voor één binnen */
    .dienst{animation:op linear both;animation-timeline:view();
            animation-range:entry 2% cover 22%}
  }
}

/* --- navigatie ----------------------------------------------------------- */

/* Zwevende balk: los van de pagina, met matglas eronder. Blijft bovenaan
   staan en laat de foto eronderdoor lopen. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  padding:clamp(.6rem,1.4vw,1.1rem) clamp(.6rem,2.5vw,1.75rem);
  pointer-events:none;
}
.nav__balk{
  max-width:76rem;margin-inline:auto;pointer-events:auto;
  display:flex;align-items:center;gap:.75rem;
  background:rgba(24,21,19,.58);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:.5rem .5rem .5rem 1.1rem;
  box-shadow:0 6px 28px -14px rgba(20,16,14,.55);
}
.nav__logo{display:inline-flex}
.nav__logo img{height:26px;width:auto}
.nav__links{margin-left:auto;display:flex;gap:clamp(.7rem,1.6vw,1.5rem);align-items:center}
/* :not(.pil) is nodig: anders wint .nav__links a op specificiteit van .pil en
   krijgt de knop witte tekst op een licht vlak. */
.nav__links a{
  text-decoration:none;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;white-space:nowrap;
}
.nav__links a:not(.pil){color:rgba(255,255,255,.88)}
.nav__links a:not(.pil):hover{color:#fff}
.pil{background:var(--papier);color:var(--inkt);border-radius:999px;
     padding:.62rem 1.1rem}
.pil:hover{background:var(--magenta);color:#fff}

/* de zwevende balk hangt over de inhoud, dus de hero krijgt lucht bovenin */
/* De balk zweeft over de inhoud. --balk is zijn hoogte plus de marge eromheen.
   LET OP: de afstand hoort in de padding-shorthand van .hero__tekst zelf. Een
   losse padding-top hier wordt verderop door die shorthand overschreven. */
:root{--balk:5.5rem}
@media(min-width:40rem){:root{--balk:6rem}}

@media(max-width:30rem){
  .nav__balk{padding:.45rem .45rem .45rem .85rem;gap:.5rem}
  .nav__logo img{height:22px}
  .nav__links a:not(.pil){display:none}
  .pil{padding:.55rem .95rem;font-size:.625rem}
}

/* --- hero ---------------------------------------------------------------- */

.hero{display:grid;align-items:stretch}
@media(min-width:62rem){.hero{grid-template-columns:1.02fr .98fr}}

.hero__tekst{
  padding:calc(var(--balk) + clamp(1.25rem,3vw,2.5rem)) var(--rand) clamp(2.5rem,6vw,6rem);
  display:flex;flex-direction:column;justify-content:center;
}
.hero__tekst .mini{margin-bottom:1.75rem}
.hero h1{margin-bottom:1.6rem;max-width:12ch}
/* Het echte logomagenta. Op h1-formaat is dit grote tekst, dus 3:1 is de eis
   en #ED1364 haalt 3,93:1. De donkere variant las als bordeauxrood. */
.hero h1 em{color:var(--magenta)}
.hero .lead{margin-bottom:2.5rem}

.contact{border-top:1px solid var(--lijn);padding-top:1.4rem;
         display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 2rem}
.contact .tel{text-decoration:none;font-weight:300;letter-spacing:-.022em;
              font-size:clamp(1.5rem,2.5vw,2.25rem)}
.contact .tel:hover{color:var(--magenta-inkt)}
.contact .mail{text-decoration:none;color:var(--inkt-zacht);
               font-size:clamp(.9375rem,1.2vw,1.0625rem)}
.contact .mail:hover{color:var(--magenta-inkt)}

.hero__beeld{position:relative;min-height:52vh;overflow:hidden}
@media(min-width:62rem){.hero__beeld{min-height:100%}}
.hero__beeld img{position:absolute;inset:0;width:100%;height:100%;
                 object-fit:cover;object-position:58% 42%;will-change:transform}
/* Onder 62rem wordt saskia-hero-mobiel.webp geladen, een andere uitsnede waarin
   ze links in beeld zit. Met de 58% hierboven viel haar gezicht op een telefoon
   net buiten het kader; 20% zet het weer op een derde van links. */
@media(max-width:62rem){.hero__beeld img{object-position:20% 38%}}

/* --- bewijsbalk ---------------------------------------------------------- */

.bewijs{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
        padding:1.1rem var(--rand);display:flex;flex-wrap:wrap;
        gap:.7rem 2.75rem;align-items:center;background:var(--papier-diep)}
.bewijs b{color:var(--inkt);font-weight:600}
.bewijs a{color:inherit}

/* --- secties ------------------------------------------------------------- */

.sectie{padding:var(--sectie) var(--rand)}
.sectie--diep{background:var(--papier-diep);border-block:1px solid var(--lijn)}

.kolommen{display:grid;gap:2rem}
/* min-width:0 zodat de kolom onder zijn min-content mag krimpen; zonder dit
   rekt een lang kruimelpad als "Belastingaangiftes" de pagina op smalle
   schermen op. */
.kolommen > *{min-width:0}
@media(min-width:62rem){
  .kolommen{grid-template-columns:12rem minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .kolommen__label{position:sticky;top:6rem}
}

/* --- diensten als typografische regels ----------------------------------- */

.diensten{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.dienst{border-bottom:1px solid var(--lijn)}
/* Op smalle schermen alles onder elkaar. Met twee kolommen belandt de alinea
   door auto-placement in de smalle nummerkolom en rekt die de hele pagina op. */
.dienst a{
  display:grid;gap:.4rem;padding:1.4rem 0;text-decoration:none;
  grid-template-columns:minmax(0,1fr);align-items:baseline;
}
.dienst__pijl{display:none}
@media(min-width:48rem){
  .dienst a{grid-template-columns:2.5rem minmax(0,13rem) minmax(0,26rem) auto;
            gap:clamp(1.5rem,3vw,3rem);padding:1.9rem 0}
  .dienst__pijl{display:block}
}
.dienst__nr{font-size:.6875rem;letter-spacing:.16em;font-weight:500;
            color:var(--magenta);padding-top:.35rem}
.dienst h3{transition:color .2s ease}
.dienst p{margin:0;color:var(--inkt-zacht);font-size:.9375rem;line-height:1.5;
          font-weight:300;max-width:42ch}
.dienst__pijl{font-size:1.25rem;color:var(--inkt-vaag);transition:transform .2s ease,color .2s ease}
.dienst a:hover h3{color:var(--magenta-inkt)}
.dienst a:hover .dienst__pijl{transform:translateX(5px);color:var(--magenta-inkt)}

/* --- het magenta vlak ---------------------------------------------------- */

.band{background:var(--magenta);color:#fff;padding:clamp(3.5rem,7vw,6.5rem) var(--rand);
       position:relative;overflow:hidden;isolation:isolate}
/* Traag drijvende lichtglans: geeft het vlak diepte en beweging zonder
   JavaScript en zonder dat er iets te lezen valt dat wegvalt. */
.band::before{
  content:"";position:absolute;z-index:-1;
  width:80vmax;height:80vmax;left:-15vmax;top:-35vmax;
  border-radius:50%;
  background:radial-gradient(circle at 38% 38%,
     rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 34%,rgba(255,255,255,0) 68%);
  filter:blur(6px);
}
@media (prefers-reduced-motion:no-preference){
  .band::before{animation:drijf 26s ease-in-out infinite alternate}
  @keyframes drijf{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(16vmax,10vmax,0) scale(1.18)}
  }
}
.band__in{max-width:56rem}
.band h2{color:#fff;max-width:20ch;margin-bottom:1.75rem;
         font-size:clamp(2.25rem,5.2vw,4.25rem)}
.band .mini{color:rgba(255,255,255,.85);margin-bottom:1.75rem}
.band .mini--punt::before{background:#fff}
.band__rij{display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;align-items:baseline;
           border-top:1px solid rgba(255,255,255,.4);padding-top:1.5rem;margin-top:2.5rem}
.band__rij a{text-decoration:none;color:#fff;font-weight:300;letter-spacing:-.02em;
             font-size:clamp(1.375rem,2.3vw,2rem)}
.band__rij a:hover{text-decoration:underline;text-underline-offset:.2em}
.band__rij .klein{font-size:.9375rem;color:rgba(255,255,255,.88);font-weight:400}

/* --- pakketten ----------------------------------------------------------- */

.pakketten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
           gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.pakketten img{height:clamp(30px,3.4vw,44px);width:auto;opacity:.9}

/* --- stappen ------------------------------------------------------------- */

.stappen{list-style:none;margin:0;padding:0;display:grid;gap:2.5rem}
@media(min-width:44rem){
  .stappen{grid-template-columns:repeat(2,1fr);gap:2.5rem}
  /* De koppen zijn een of twee regels ('Je belt of mailt' tegenover 'We plannen
     een gesprek'). Zonder vaste hoogte begint de lopende tekst per kolom op een
     andere lijn en staat de rij scheef. In een kolom speelt dat niet, vandaar
     dat dit pas vanaf twee kolommen geldt. */
  .stappen h3{min-height:2.04em;min-height:2lh}
}
@media(min-width:68rem){.stappen{grid-template-columns:repeat(4,1fr);gap:2.5rem}}
.stappen li{border-top:1px solid var(--lijn);padding-top:1.25rem}
.stappen .mini{color:var(--magenta);margin-bottom:.9rem}
.stappen h3{margin-bottom:.5rem}
.stappen p{margin:0;color:var(--inkt-zacht);font-size:.9375rem;font-weight:300}

/* --- portret ------------------------------------------------------------- */

.portret{display:grid;gap:2.5rem;align-items:center}
@media(min-width:62rem){.portret{grid-template-columns:22rem 1fr;gap:5rem}}
.portret img{width:100%}

/* --- citaten ------------------------------------------------------------- */

.citaten{list-style:none;margin:0;padding:0;display:grid;gap:3rem}
@media(min-width:62rem){.citaten{grid-template-columns:repeat(3,1fr);gap:3.5rem}}
.citaat{display:flex;flex-direction:column;height:100%;
        border-top:1px solid var(--lijn);padding-top:1.5rem;margin:0}
.citaat blockquote{margin:0 0 1.75rem;font-size:clamp(1.0625rem,1.45vw,1.25rem);
                   line-height:1.5;font-weight:300}
.citaat blockquote p{margin:0}
.citaat figcaption{margin-top:auto;display:flex;align-items:center;gap:.85rem}
.citaat img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.citaat cite{font-style:normal;font-weight:500;display:block;font-size:.9375rem}
.citaat .rol{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
             color:var(--inkt-vaag);font-weight:500}


/* --- afsluiting ---------------------------------------------------------- */

.slot{
  /* Variant C: het papier zakt geleidelijk weg naar warm donker, zodat er geen
     harde rand is maar een afdaling. Acht stops en niet twee: over een vlak van
     deze hoogte gaat een verloop met weinig stops zichtbaar strepen. */
  background:linear-gradient(to bottom,
    var(--slot-1) 0%, var(--slot-2) 20%, var(--slot-3) 40%, var(--slot-4) 56%,
    var(--slot-5) 64%, var(--slot-6) 73%, var(--slot-7) 85%, var(--slot-8) 100%);
  color:var(--inkt);
  padding:var(--sectie) var(--rand);
}
.slot h2{color:var(--inkt);max-width:16ch;margin-bottom:2rem}
.slot .mini{color:var(--slot-vaag);margin-bottom:1.75rem}
.slot .mini--punt::before{background:var(--magenta)}
.slot__rij{display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;align-items:baseline;
           border-top:1px solid var(--slot-lijn);padding-top:1.5rem;margin-top:2.5rem}
.slot__rij a{color:var(--inkt);text-decoration:none;font-weight:300;letter-spacing:-.02em;
             font-size:clamp(1.375rem,2.3vw,2rem)}
.slot__rij a:hover{color:var(--magenta-inkt)}
.slot__rij .klein{font-size:.9375rem;color:var(--slot-zacht);font-weight:400}
.slot address{margin-top:2rem;font-size:.8125rem;letter-spacing:.14em;
              text-transform:uppercase;color:var(--slot-vaag);font-weight:500}


/* --- afdrukken ------------------------------------------------------------ */
/* Bij printen bestaat er geen scroll-tijdlijn. Zonder deze regel zou alles wat
   op scroll binnenkomt blanco op papier komen. */
@media print{
  *{animation:none !important;opacity:1 !important;transform:none !important}
  .nav{position:static}
  .band,.slot{background:#fff !important;color:#000 !important;
              border-top:2px solid #ED1364;padding-block:1.5rem}
  .band h2,.slot h2,.band a,.slot a,.band .lead{color:#000 !important}
  body{background:#fff;color:#000;font-size:11pt}
}


/* --- het merk op ware grootte -------------------------------------------- */
/* Onderaan de pagina komt "Sas." nog één keer terug, groot genoeg dat de punt
   ook echt een punt is en geen stipje. */
.slot{overflow:hidden;padding-bottom:0}
.reuzenmerk{
  margin:clamp(3.5rem,9vw,7rem) 0 -.055em;
  font-size:clamp(6rem,25vw,20rem);
  font-weight:500;letter-spacing:-.055em;line-height:.82;
  color:var(--merk);
  user-select:none;white-space:nowrap;
}
/* De punt is een echte ronde punt, geen letterteken: Archivo zet daar een
   rechthoek neer en dat is niet de punt uit het logo. */
.reuzenmerk i{
  display:inline-block;width:.15em;height:.15em;border-radius:50%;
  background:var(--merk-punt);margin-left:.05em;vertical-align:baseline;
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reuzenmerk{animation:merkin linear both;animation-timeline:view();
                animation-range:entry 0% cover 60%}
    @keyframes merkin{
      from{transform:translateX(-4%) scale(.96);opacity:.35}
      to{transform:none;opacity:1}
    }
  }
}




/* --- Subpagina's ---------------------------------------------------------- */
/* Zelfde tweekolomsopzet als de homepage: links een sticky label, rechts de
   inhoud. Waar de homepage een foto heeft, staat hier het volgnummer. */

.opener{padding:calc(var(--balk) + clamp(1.25rem,3vw,2.5rem)) var(--rand) 0}

.breadcrumb{margin:0 0 1.25rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.breadcrumb li{margin:0}
.breadcrumb li + li::before{content:"\00B7";margin-right:.4rem;color:var(--magenta)}
.breadcrumb a{color:var(--inkt-vaag);text-decoration:none}
.breadcrumb li,.breadcrumb a,.breadcrumb span{overflow-wrap:anywhere;min-width:0}
.breadcrumb a:hover{color:var(--magenta-inkt)}
.breadcrumb li:last-child{color:var(--inkt)}

.opener__nr{
  font-size:clamp(3rem,7vw,5.5rem);line-height:.9;font-weight:300;
  letter-spacing:-.04em;color:var(--magenta);margin:0 0 1.5rem;
}
@media(min-width:62rem){.opener__nr{margin-bottom:0}}

.opener h1{margin:0 0 1.5rem;max-width:16ch}
.opener .lead{margin:0}

/* lopende tekst op een subpagina */
.tekst h2{margin:2.75rem 0 1rem;max-width:20ch}
.tekst h2:first-child{margin-top:0}
.tekst p{max-width:44ch;color:var(--inkt-zacht);font-weight:300}
.tekst p strong{color:var(--inkt);font-weight:500}
.tekst a{color:var(--magenta-inkt)}
.tekst ul{list-style:none;padding:0;margin:0 0 1.2em;max-width:44ch}
.tekst li{position:relative;padding-left:1.4rem;margin-bottom:.6em;
          color:var(--inkt-zacht);font-weight:300}
.tekst li::before{content:"";position:absolute;left:0;top:.62em;
                  width:6px;height:6px;border-radius:50%;background:var(--magenta)}

/* één citaat in plaats van drie, tegen de tekstmuur op dienstenpagina's */
.citaat-enkel{max-width:42rem;border-top:1px solid var(--lijn);padding-top:1.75rem;margin:0}
.citaat-enkel blockquote{margin:0 0 1.5rem;font-size:clamp(1.125rem,1.7vw,1.5rem);
                         line-height:1.45;font-weight:300}
.citaat-enkel blockquote p{margin:0}
.citaat-enkel figcaption{display:flex;align-items:center;gap:.85rem}
.citaat-enkel img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.citaat-enkel cite{font-style:normal;font-weight:500;display:block;font-size:.9375rem}

/* contactgegevens */
.contact-lijst{list-style:none;padding:0;margin:0 0 2.5rem}
.contact-lijst li{margin-bottom:1.5rem}
.contact-lijst .label{display:block;margin-bottom:.3rem}
/* De bereikbaarheid is geen link, dus die span moet hier ook in: anders valt
   die ene regel kleiner uit dan de vier erboven. */
.contact-lijst a,.contact-lijst address,.contact-lijst>li>span:not(.label){
  text-decoration:none;font-weight:300;letter-spacing:-.018em;
  font-size:clamp(1.25rem,2vw,1.75rem);color:var(--inkt);font-style:normal;
  display:block}
.contact-lijst a:hover{color:var(--magenta-inkt)}

/* portret naast tekst, gespiegeld */
.portret--flip img{order:2}
@media(min-width:62rem){
  .portret--flip{grid-template-columns:1fr 22rem}
  .portret--flip img{order:2}
}

/* De sectielabels zijn echte h2's; .mini wint op specificiteit van h2, dus ze
   zien er identiek uit. Zonder dit springt de koppenvolgorde van h1 naar h3. */
h2.mini{font-family:inherit}

/* Navigatie in het slotblok. De footer als los blok is verdwenen, maar elke
   pagina moet wel naar alle andere kunnen linken. */
.slot__nav{
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--slot-lijn);
}
.slot__nav a{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--slot-vaag);text-decoration:none;
}
.slot__nav a:hover{color:var(--magenta-inkt)}

/* --- Overslaan naar de inhoud --------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--inkt);color:var(--papier);
  padding:.7rem 1.1rem;border-radius:0 0 .5rem 0;
  font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  text-decoration:none;
}
.skip-link:focus{left:0}

/* --- Beeldband van rand tot rand ------------------------------------------ */
/* De duotoonbanden op /wie-is-sas/ en /diensten/. Ingebakken duotoon, niet in
   CSS: een filter raakt ook de gezichten en valt anders uit op P3-schermen. */
/* De zoom schaalt het beeld naar 1.08; zonder begrenzing hier steekt het buiten
   het venster en meet de pagina breder dan het scherm. Het kader klemt af. */
.bandwrap{padding:0;overflow:clip}
.band-beeld{
  width:100%;display:block;aspect-ratio:3/1;object-fit:cover;
  border-block:1px solid var(--lijn);
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .band-beeld{animation:bandzoom linear both;animation-timeline:view();
                animation-range:cover 0% cover 100%}
    @keyframes bandzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
  }
}