/* ==========================================================================
   Geypen & Zonen, landingspagina
   Tijdelijke pagina tot de volledige website er staat. 04-09-2026.

   Bron: huisstijlgids v1 (kleur, typografie, vormentaal) en het
   kickoffverslag.

   Alles hieronder is semantisch benoemd: gebruik --action-surface, niet
   --brand-mint. Zo verandert een kleurbesluit op één plek.
   ========================================================================== */


/* ==========================================================================
   Fonts, zelf gehost

   NIET VIA DE GOOGLE-CDN, en dat is geen technische voorkeur. Een <link> naar
   fonts.googleapis.com stuurt bij elk bezoek het IP-adres van de bezoeker naar
   Google. Het Landgericht München oordeelde in januari 2022 (3 O 17493/20) dat
   dat zonder toestemming in strijd is met de AVG. Dit is een Belgische site.

   Beide families staan onder de SIL Open Font License 1.1, dus zelf hosten mag
   zonder meer. De licentievoorwaarde is wel dat de licentietekst meegaat: die
   staat in assets/fonts/OFL-*.txt en hoort daar te blijven.

   Apfel Grotezk (Collletttivo) draagt de koppen, zoals de gids voorschrijft.
   Drie gewichten: Regular 400, Mittel 500 en Fett 700 (Mittel erbij op
   verzoek van Rob, 04-09). Brukt 300 en Satt 900 zijn meegeleverd maar niet
   geladen. Elk gewicht is ~20 kB en wordt pas opgehaald zodra een regel het
   gebruikt.

   Plus Jakarta Sans draagt de lopende tekst. Eén variabel bestand voor het hele
   bereik 200-800, gesubset naar latin en latin-ext: van 172 kB TTF naar 38 kB
   woff2. latin-ext is nodig en niet optioneel, want het Nederlands hier
   gebruikt é en ë (één, zoëven) en die vallen deels buiten latin.
   ========================================================================== */
@font-face{
  font-family:"Apfel Grotezk";
  src:url(../assets/fonts/apfel-grotezk-regular.woff2) format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Apfel Grotezk";
  src:url(../assets/fonts/apfel-grotezk-mittel.woff2) format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Apfel Grotezk";
  src:url(../assets/fonts/apfel-grotezk-fett.woff2) format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url(../assets/fonts/plus-jakarta-sans.woff2) format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}


:root{

  /* --- Merkkleuren, letterlijk uit huisstijlgids v1 ----------------------
     LET OP: de geleverde SVG's wijken hier licht van af. Het logo vult
     #1F2E5D waar de gids #1E2D5D zegt, en de vormen vullen #2C447D, #44BB8E
     en #D4ECE9 waar de gids #2C437C, #15CC93 en #D0F7EF zegt. Bij het blauw
     is dat een afrondingsverschil, bij het groen niet: #44BB8E is een
     duidelijk zachtere tint dan #15CC93. De gids is hier leidend voor alles
     wat CSS tekent; de SVG's brengen hun eigen kleur mee. Zie README. */
  --brand-blue            : #1E2D5D;
  --brand-blue-tint       : #2C437C;   /* tweede blauwtint, alleen voor diepte */
  --brand-mint            : #15CC93;
  --brand-mint-light      : #D0F7EF;
  --brand-white           : #ffffff;

  /* --- Semantisch. Gebruik hieronder alléén deze -------------------------- */
  --surface               : var(--brand-white);
  --surface-dark          : var(--brand-blue);
  --surface-soft          : var(--brand-mint-light);
  --surface-accent        : var(--brand-mint);

  --text                  : var(--brand-blue);            /* 13,2 op wit  */
  --text-soft             : #5a6478;                      /*  5,9 op wit  */
  --text-inverse          : var(--brand-white);           /* 13,2 op blauw */
  --text-on-dark-soft     : #b9c2d8;                      /*  8,1 op blauw */

  --border                : #d7dbe5;
  --border-strong         : var(--brand-blue);

  /* De belknop is de enige echte actie op deze pagina. Uit het kickoffverslag:
     landbouwklanten bellen, die vullen geen contactformulier in. Daarom krijgt
     hij als enige element de accentkleur, en staat hij in de kop.
     GEMETEN: donkerblauw op muntgroen haalt 6,35, ruim AA. Wit op muntgroen
     haalt 2,08 en staat daarom nergens op deze pagina. */
  --action-surface        : var(--brand-mint);
  --action-surface-hover  : #12b482;
  --action-text           : var(--brand-blue);
  --focus-ring            : var(--brand-blue);
  --focus-ring-on-dark    : var(--brand-mint);

  /* --- Typografie -------------------------------------------------------- */
  --font-display          : "Apfel Grotezk", ui-sans-serif, system-ui, sans-serif;
  --font-text             : "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --size-hero             : clamp(2rem, 1.1rem + 4.1vw, 3.85rem);   /* 04-09 een trap kleiner: 62px op desktop, was 68 */
  --size-h2               : clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --size-h3               : 1.125rem;
  --size-lead             : clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  --size-body             : 1.0625rem;
  --size-small            : 0.9375rem;

  /* --- Ruimte ------------------------------------------------------------ */
  --space-2xs             : 0.25rem;
  --space-xs              : 0.5rem;
  --space-s               : 0.75rem;
  --space-m               : 1rem;
  --space-l               : 1.5rem;
  --space-xl              : 2.5rem;
  --space-2xl             : 4rem;
  --space-3xl             : 6rem;

  --container             : 70rem;
  --radius                : 8px;
}


/* ==========================================================================
   Reset en basis
   ========================================================================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--size-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,p,ul,dl,dd{ margin:0; }
ul{ padding:0; list-style:none; }
img{ max-width:100%; height:auto; display:block; }

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

/* Onzichtbaar op het scherm, wel aanwezig voor schermlezers. Niet display:none,
   want dat haalt het ook uit de toegankelijkheidsboom. */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
}
.skip-link:focus{
  left:var(--space-m);
  top:var(--space-m);
  z-index:10;
  padding:var(--space-s) var(--space-m);
  background:var(--surface);
  color:var(--text);
  border-radius:var(--radius);
}


/* ==========================================================================
   Layout
   ========================================================================== */
.l-container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--space-l);
}

.section-title{
  font-family:var(--font-display);
  font-size:var(--size-h2);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.015em;
  text-wrap:balance;
}


/* ==========================================================================
   Kop
   ========================================================================== */
/* De houder van kop en hero: één donker vlak, en de enige plek waar
   overflow wordt afgesneden. De hero zelf snijdt niets meer af, zodat de vorm
   erin (met Robs posities) tot achter de kop kan doorlopen. */
.masthead{
  position:relative;
  overflow:hidden;
  background:var(--surface-dark);
  color:var(--text-inverse);
}

/* Transparant op het donkere vlak; z-index boven de hero-vorm, want die staat
   later in de DOM en zou anders over logo en knop heen tekenen. */
.site-header{
  position:relative;
  z-index:2;
  background:transparent;
}
.masthead :focus-visible{ outline-color:var(--focus-ring-on-dark); }

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-m);
  padding-block:var(--space-m);
}

/* De viewBox van het logobestand is op 04-09 strakgetrokken: de tekening zat
   in een vak met ~25% lucht boven en onder. Bij 52px hoogte tekende het merk
   daardoor maar ~27px hoog. Nu de hoogte de tekening zelf is, volstaat 40px
   voor een groter en scherper merk dan voorheen. */
.site-header__logo{ display:block; }
.site-header__logo img{ width:auto; height:50px; }   /* desktop 50px, Rob 04-09 */


/* ==========================================================================
   Belknop

   Toont het nummer zelf en niet alleen "bel ons". Op een desktop doet tel:
   vaak niets, en dan is het nummer alsnog af te lezen en te noteren.
   ========================================================================== */
.call{
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  padding:var(--space-s) var(--space-m);
  background:var(--action-surface);
  color:var(--action-text);
  border-radius:var(--radius);
  text-decoration:none;
  line-height:1;
  transition:background-color 120ms ease, transform 120ms ease;
}
.call:hover{ background:var(--action-surface-hover); }
/* Indrukfeedback: 0,96 en niet lager, daaronder voelt het overdreven. De
   kleurwissel bij hover blijft de statische aanwijzing; de beweging is extra
   en valt weg onder prefers-reduced-motion. */
.call:active{ transform:scale(0.96); }

/* currentColor: het icoon volgt de tekstkleur en dus de contrastmeting van de
   knop. flex:none zodat het niet meekrimpt als de kop smal wordt. */
.call__icon{
  flex:none;
  display:block;
}

.call__number{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
  white-space:nowrap;
}


/* ==========================================================================
   Hero

   De vorm is het huisstijlelement, niet een plaatje: hij bloedt bewust van
   het vlak af, zoals op de cover van de gids en op de vlaggen. Hij staat in
   de tweede blauwtint op het donkerblauw, gemeten 1,39 — genoeg om diepte te
   geven, te weinig om ooit voor tekst aangezien te worden.

   aria-hidden hoeft niet: dit is een achtergrond, geen <img>.
   ========================================================================== */
/* --offer-overlap: zoveel schuiven de dienstenkaarten omhoog over de hero.
   De hero krijgt onderaan precies die ruimte extra, zodat de tekst vrij blijft. */
.hero{
  --offer-overlap:4rem;
  position:relative;
  padding-block:var(--space-2xl) calc(var(--space-3xl) + var(--offer-overlap));
}

/* De cirkel in vorm 1 zit op de kam van de bovenste golf. Die golf staat in de
   tweede blauwtint en haalt 1,39 tegen het vlak; de cirkel haalt 5,5. Midden in
   het vlak leest de cirkel daardoor als een losse stip, terwijl de gids zegt dat
   hij altijd het uiteinde van een lijn is en nooit los staat.
   Oplossing is dezelfde als op de cover van de gids: de cirkel half door de rand
   snijden. Op top:50% ligt zijn hart vrijwel op de bovenrand van de hero.

   VERPLAATSEN OF SCHALEN: de vier regels top / right / width / transform
   hieronder, en hun tegenhangers in de mediaquery onderaan voor klein scherm.
   Of in het ontwerpcanvas: vorm aanklikken, positie en maat in het paneel. */
/* Waarden van Rob, teruggelezen uit het canvas op 04-09 (desktopvel, 1440
   breed). Hij heeft de vorm een kwartslag gedraaid, sterk vergroot en naar
   links-onder geschoven, zodat vooral de grote diagonaal in beeld blijft.
   De pixelwaarden van het vel zijn omgezet naar vw en % van 1440, zodat de
   compositie meeschaalt: 891px links = 61,9%, 1306 breed = 90,7vw,
   1392 hoog = 96,7vw, 78px van boven = 5,4vw.
   LET OP: breedte en hoogte staan los van elkaar, precies zoals in het canvas
   ingesteld; de vorm is daardoor ~12% smaller getekend dan zijn eigen
   verhouding. Wil je hem onvervormd, zet dan height:auto en haal de
   hoogteregel weg. */
/* Tweede ronde van Rob (04-09, 15u): gedraaid naar +90° en naar links
   geschoven. 560px links op 1440 = 38,9%, 93px van boven = 6,5vw. */
.hero__shape{
  position:absolute;
  top:6.5vw;
  left:38.9%;
  width:90.7vw;
  height:96.7vw;
  transform:translate(0, -52%) rotate(90deg);
}

.hero__inner{
  position:relative;   /* boven de vorm */
}

.hero__title{
  font-family:var(--font-display);
  font-size:var(--size-hero);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.03em;
  max-width:24ch;         /* twee regels op desktop: "Land- en tuinmachines, / met service uit Lommel" */
  text-wrap:balance;
}

.hero__lead{
  margin-top:var(--space-l);
  max-width:36ch;
  font-size:var(--size-lead);
  line-height:1.35;
  text-wrap:pretty;
}


.hero :focus-visible{ outline-color:var(--focus-ring-on-dark); }


/* ==========================================================================
   Aanbod
   ========================================================================== */
/* z-index boven de masthead, anders verdwijnt het overlappende deel van de
   kaarten onder het donkere vlak. */
.offer{
  --offer-overlap:4rem;
  position:relative;
  z-index:1;
  padding-block:0 var(--space-xl);
}

/* Vier items, dus expliciet 1, 2 of 4 kolommen en nooit 3. Met auto-fit kwam
   er op middenmaat een rij van drie met een wees eronder, en die vierde kaart
   leest dan als een naschrift in plaats van als gelijkwaardig aanbod. */
/* Eén blok van vier vlakken (Rob, 04-09). De lijnen tússen de kaarten zijn
   geen borders maar een gap van 1px waar de lijnkleur van de lijst doorheen
   komt: dat werkt in elke kolomverdeling (1, 2 of 4) zonder per kaart te
   rekenen welke zijde een rand krijgt. De buitenrand is wél een border, met
   overflow:hidden zodat de kaarthoeken de grote radius volgen. Radius 16px,
   bewust groter dan de 8px van de knop. */
.offer__list{
  margin-top:calc(-1 * var(--offer-overlap));
  display:grid;
  gap:1px;
  grid-template-columns:1fr;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) * 2);
  overflow:hidden;
}
@media (min-width:36rem){
  .offer__list{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:62rem){
  .offer__list{ grid-template-columns:repeat(4, 1fr); }
}

/* Wit vlak zonder eigen rand, radius of schaduw: de lijst eromheen tekent de
   lijnen en de hoeken. */
.offer-item{
  padding:var(--space-l);
  background:var(--surface);
}

.offer-item__title{
  font-family:var(--font-display);
  font-size:var(--size-h3);
  font-weight:700;
}

.offer-item__text{
  margin-top:var(--space-2xs);
  color:var(--text-soft);
  font-size:var(--size-small);
  text-wrap:pretty;
}


/* ==========================================================================
   Merken
   ========================================================================== */
/* Wit vlak. Dit was het lichtgroene blok, maar merklogo's zijn andermans
   huisstijl: die horen op wit en niet op een gekleurde ondergrond. De band
   houdt zijn plek in het ritme met twee haarlijnen in plaats van met een vlak. */
/* Boven krapper dan onder: de kaartgroep erboven heeft geen scheidingslijn, en
   64 + 64 las als een gat. Nu 40 + 40 = 80 tussen kaarten en kop; onder blijft
   64 tot de lijn. */
.brands{
  padding-block:var(--space-xl) var(--space-2xl);
  background:var(--surface);
  text-align:center;   /* kop, logorij en noot: de hele band is gecentreerd */
  border-bottom:1px solid var(--border);   /* alleen onder; de lijn erboven ging weg op 04-09 */
}

/* Flex met vaste itembreedte, geen grid. Vijf per rij; een onvolledige
   laatste rij komt door justify-content:center vanzelf in het midden te
   staan (acht logo's = 5 + 3 gecentreerd). Een grid kan dat niet: cellen
   vullen altijd van links.
   De logobestanden zijn door Rob bewust op één vast vak (2:1) gezet, met per
   merk zoveel witruimte dat ze naast elkaar even zwaar ogen. Die marge IS de
   optische correctie en hoort in het bestand te blijven: niet bijsnijden,
   niet per logo bijregelen in CSS. De CSS maakt alleen elk vak even breed. */
.brands__list{
  --brands-per-row:5;
  --brands-gap:var(--space-xl);
  margin-top:var(--space-xl);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--space-l) var(--brands-gap);
}

/* De breedte is de rijbreedte min de tussenruimtes, gedeeld door het aantal
   per rij. flex-grow 0, anders rekt de laatste rij zich uit tot de volle
   breedte en is er niets meer te centreren. */
.brands__item{
  flex:0 0 calc((100% - (var(--brands-per-row) - 1) * var(--brands-gap)) / var(--brands-per-row));
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:var(--size-small);
  font-weight:700;
}

/* width:100% en height:auto: het vak vult de cel en houdt de verhouding van het
   bestand. Zo blijft de onderlinge maat exact wat Rob in de bestanden heeft
   gelegd. */
.brands__logo{
  width:100%;
  height:auto;
  display:block;
}

/* De terugval als een logobestand ontbreekt. Zie het script onderaan index.html. */
.brands__name{
  font-family:var(--font-display);
  font-size:1.0625rem;
  font-weight:700;
}

/* Gecentreerd, net als de onvolledige logorij erboven. */
.brands__note{
  margin-top:var(--space-xl);
  font-size:var(--size-small);
  color:var(--text-soft);
  text-align:center;
}

@media (max-width:30rem){
  .brands__list{
    --brands-per-row:2;
    --brands-gap:var(--space-l);
    gap:var(--space-m) var(--brands-gap);
  }
}


/* ==========================================================================
   Contact
   ========================================================================== */
.contact{
  position:relative;
  overflow:hidden;
  padding-block:var(--space-2xl);
}

/* Kleiner en dieper in de hoek dan de hero-vorm. Deze staat achter de
   openingsuren, en die moeten leesbaar blijven: donkerblauw haalt 11,5 op het
   lichtgroen van de vorm, dus dat is in orde, maar een groter vlak zou de
   tabel visueel in tweeën snijden. Verplaatsen: zie .hero__shape. */
/* Ook van Rob, zelfde canvas. De vorm is hier veel groter dan de sectie en
   ver naar boven geschoven, zodat alleen een uitsnede van de onderste bocht
   zichtbaar blijft achter de contactgegevens. 869px links = 60,3%,
   1924 breed = 133,6vw, 3612 hoog = 250,8vw, -1482 van boven = -102,9vw.
   Ook hier staan breedte en hoogte los van elkaar (verhouding 0,53 tegenover
   0,85 van het bestand): de vorm is verticaal uitgerekt. Onvervormd:
   height:auto. */
/* Tweede ronde van Rob: 412px links = 28,6%, -1047px van boven = -72,7vw. */
.contact__shape{
  position:absolute;
  top:-72.7vw;
  left:28.6%;
  width:133.6vw;
  height:250.8vw;
}

.contact > .l-container{ position:relative; }

.contact__grid{
  margin-top:var(--space-xl);
  display:grid;
  gap:var(--space-xl);
  grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr));
}

.contact__title{
  font-family:var(--font-display);
  font-size:var(--size-h3);
  font-weight:700;
}

.contact__line{
  margin-top:var(--space-xs);
}

/* Het beeldmerk staat waar de kop "Contact" stond. Klein gehouden: het is een
   accent bovenaan de sectie, geen tweede logo. */
.contact__mark{
  width:auto;
  height:3.5rem;
}

.contact__phone{
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  color:var(--text);
  text-decoration:none;
}
.contact__phone:hover{ text-decoration:underline; }

/* Muntgroen hoorntje. Decoratief en naast tekst, dus de contrastnorm voor
   tekst geldt er niet voor; de kleur is hier het merkaccent, zoals bij de
   belknop in de kop. */
.contact__phone-icon{
  flex:none;
  color:var(--brand-mint);
}

/* padding-block met een even grote negatieve margin: het klikvlak groeit van
   22 naar 34px (norm minimaal 24, WCAG 2.5.8) zonder dat de regel op het
   scherm verschuift. */
.contact__link{
  display:inline-block;
  padding-block:0.375rem;
  margin-block:-0.375rem;
  color:var(--text);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}



/* ==========================================================================
   Voet

   Twee regels tegenover elkaar: links copyright en BTW, rechts de maker.
   Geen logo en geen "in de maak" meer (04-09): het beeldmerk staat al boven
   de contactgegevens, en de pagina hoeft zich niet te verontschuldigen.
   ========================================================================== */
.site-footer{
  padding-block:var(--space-l);
  background:var(--surface-dark);
  color:var(--text-inverse);
}

.site-footer__inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--space-xs) var(--space-xl);
}

.site-footer__legal,
.site-footer__credit{
  font-size:var(--size-small);
  color:var(--text-on-dark-soft);   /* 8,1 op blauw */
}

/* Onderstreept, want kleur alleen mag het verschil met gewone tekst niet zijn
   (WCAG 1.4.1). Wit op blauw: 13,2. */
.site-footer__link{
  display:inline-block;
  padding-block:0.375rem;
  margin-block:-0.375rem;
  color:var(--text-inverse);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.site-footer__link:hover{ text-decoration-thickness:2px; }
.site-footer :focus-visible{ outline-color:var(--focus-ring-on-dark); }


/* ==========================================================================
   Klein scherm

   De belknop gaat onder het logo staan zodra hij er niet meer naast past.
   Onder de 30rem breken logo en nummer anders allebei af, en juist dat nummer
   is het enige dat op een beurs telt.
   ========================================================================== */
@media (max-width:30rem){
  .site-header__inner{
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-s);
  }
  .call{ justify-content:center; }
  .site-header__logo img{ height:34px; }

  /* Naast de tekst is op deze breedte geen ruimte meer, dus de vorm zakt naar
     onderen. Dat moet met een eigen zone en niet met een procentuele offset:
     de cirkel kwam anders over de witte tekst te liggen, en wit op dat groen
     haalt 2,3 — onleesbaar. De onderrand van de hero krijgt daarom 8,5rem
     extra lucht, en de vorm is zo gemaat dat hij daar precies in valt:
     hoogte (55% van 375 ≈ 194px) min de 4rem die hij onderuit steekt, blijft
     onder de 8,5rem die de tekst vrijhoudt. */
  .hero{ padding-bottom:calc(8.5rem + var(--offer-overlap)); }
  /* Het mobiele vel heeft Rob niet aangepast, dus dit blijft de oude
     compositie. Alles wat de desktopregel zet (left, height, transform) moet
     hier expliciet terug, anders lekt het door. */
  .hero__shape{
    top:auto;
    left:auto;
    bottom:-4rem;
    right:-12%;
    width:55%;
    height:auto;
    transform:none;
  }
  .contact__shape{
    top:auto;
    left:auto;
    bottom:-46%;
    right:-12%;
    width:40%;
    height:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}