/* VAN DE RIET RECLAME — Steenwijk
   VAKDOSSIER
   Folie, rakels, grootformaatprints, lichtletters en fotobehang zijn het materiaal.
   De studio ontwikkelt logo's, huisstijlen, brochures en digitale ontwerpen.
   De werkplaats en montage verbinden het ontwerp met een gevel, auto of kantoor.
   Korte Baan 8a in Steenwijk is de bestaande werkplek; bezoek op afspraak.
   Marijke Falkena – Van de Riet en Bernard Falkena runnen het bedrijf.
   Zij werken samen met een netwerk van creatieve experts.
   Zakelijke opdrachtgevers zoeken herkenbaarheid en een verzorgde uitvoering.
   De bestaande fotografie en bestaande portfolio's zijn de inhoudelijke basis.
   Ontwerp, Reclame en Interieur zijn de drie nieuwe, gelijkwaardige ingangen.
   Het primaire doel is een zakelijke offerteaanvraag met voldoende projectcontext.
   PLAN
   Palette: Huisstijlpetrol #00788a (door opdrachtgever vastgelegd), Drukinkt #292929
   (leesbare neutrale tekst), Papier #ffffff, Folierug #f3f7f7 (rust),
   Lichtpetrol #dcecef (ondersteunend vlak), Dieppetrol #004651 (duotone schaduw).
   Type: Archivo 700 voor koppen, verwant aan letters op gevels en voertuigen;
   Figtree 400/600 geeft zakelijke toelichtingen een menselijke, open toon.
   Signature: een getrapte vierkante uitsparing in het beeld, rechtstreeks uit
   de blokken van het aangeleverde gevellogo; alleen in de homepagehero.
   Layout: links uitgelijnde grote themawoorden naast één echt uitgevoerd werk;
   daarna een open dienstenlijst, projecten, mensen en een praktische start.
   [logo          navigatie             offerte]
   [Ontwerp.      | projectfoto               ]
   [Reclame.      |                       ____]
   [Interieur.    |                  _____|   ]
   [uitleg / CTA  | bijschrift                 ]
   [drie thema's als grote lijst met diensten  ]
   [groot project           | kleiner project ]
   [mensenfoto      | persoonlijke toelichting ]
   [offerte voorbereiden     | telefoon / mail ]
   Edge language: rechte hoeken, 1px lijnen; geen schaduwen.
   GENERIC TEST
   Een algemene 'zichtbaar'-slogan vervangen door de drie concrete werkterreinen.
   De beeldvorm is ontleend aan dit logo, niet aan een willekeurige agencyvorm.
   Geen kaartenraster, badges, decoratieve labels of standaard animaties.
   CRITIQUE: de dubbele pluslinks in de dienstenlijst zijn verwijderd; de titels
   zijn al klikbaar en het beeld draagt de enige signature. De gebruikte foto's tonen echt werk, geen fictieve cases.
*/
@font-face{font-family:Archivo;src:url(assets/archivo-bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Figtree;src:url(assets/figtree-regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(assets/figtree-semibold.ttf) format('truetype');font-weight:600;font-display:swap}
:root{--c-bg:#fff;--c-ink:#292929;--c-muted:#596568;--c-line:#cbd8da;--c-alt:#f3f7f7;--c-dark:#004651;--c-on-dark:#fff;--c-accent:#00788a;--c-on-accent:#fff;--c-link:#006778;--c-ph:#dcecef;--c-focus:#00788a;--font-display:Archivo,Arial,sans-serif;--font-body:Figtree,Arial,sans-serif;--display-weight:700;--display-tracking:-.045em;--display-lh:1.06;--radius:0;--radius-btn:0;--section:112px;--t-3xl:clamp(3rem,6.1vw,5.5rem)}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{overflow-x:visible}
.site-header{position:relative;border-bottom:0}
.site-header .wrap{min-height:88px;gap:32px}
.brand{display:block;flex:none;width:68px;margin-block:10px}
.brand-image{width:68px;height:68px}
.nav ul{gap:28px}
.nav a{font-size:16px;min-height:44px;display:flex;align-items:center;padding:10px 0}
.nav a[aria-current=page]{text-decoration:none;border-bottom:2px solid var(--c-accent)}
.header-action{margin-left:24px;font-size:15px;padding-inline:20px}
.btn{font-weight:600;border-width:1px;min-height:50px}
.btn:hover{background:#005e6d;border-color:#005e6d}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.hero{padding:40px 0 48px}
.hero-layout{display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:start}
.hero-copy{position:relative;z-index:1;padding-top:12px}
.location{margin-bottom:24px;font-size:15px;color:var(--c-muted)}
.hero-title{font-size:clamp(4.5rem,6.7vw,6rem);line-height:.98;letter-spacing:-.06em;margin:0 0 28px}
.hero-intro{max-width:34ch;font-size:19px;line-height:1.5;margin-bottom:28px}
.hero-photo{margin:0;min-width:0;padding-top:12px}
.image-frame{display:block;overflow:hidden;background:#dcecef}
.photo{width:100%;height:100%;object-fit:cover;filter:url(#duotone)}
.hero-image{height:480px;clip-path:polygon(0 0,100% 0,100% 76%,91% 76%,91% 88%,81% 88%,81% 100%,0 100%)}
.hero-image .photo{object-position:45% center}
.hero-caption{font-size:14px;color:var(--c-muted);display:flex;gap:24px;justify-content:space-between;margin-top:16px;max-width:100%}
.hero-caption a{color:var(--c-ink);min-height:44px;display:inline-flex;align-items:center;margin-top:-10px}
.intro-heading{display:grid;grid-template-columns:5fr 7fr;gap:32px;margin-bottom:48px;align-items:start}
.intro-heading h2{font-size:clamp(2.2rem,4vw,3.45rem);max-width:14ch;margin:0}
.intro-heading p{max-width:45ch;margin:0;padding-top:6px;font-size:20px}
.offering{background:var(--c-alt)}
.offering-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--c-line)}
.offering-row{display:grid;grid-template-columns:5fr 7fr;gap:32px;padding:32px 0;border-bottom:1px solid var(--c-line);align-items:start}
.offering-title{font:700 clamp(2.5rem,4.4vw,4rem)/1 var(--font-display);letter-spacing:-.05em;text-decoration:none;color:var(--c-accent)}
.offering-title:hover{color:var(--c-ink)}
.offering-copy p{margin:0 0 12px;max-width:44ch}
.service-summary{font-size:15px;color:var(--c-muted);line-height:1.7}
.service-summary a{color:inherit;display:inline-block;min-height:44px;margin-right:18px}
.section-top{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:40px}
.section-top h2{font-size:clamp(2.3rem,4vw,3.45rem);margin:0;max-width:18ch}
.project-pair{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:start}
.project-block{margin:0;min-width:0}
.project-image{aspect-ratio:4/3}
.project-block-small{margin-top:0}
.project-block-small .project-image{aspect-ratio:20/21}
.project-title{font:700 26px/1.15 var(--font-display);letter-spacing:-.025em;color:var(--c-ink);text-decoration:none;margin-bottom:8px;display:inline-flex;min-height:44px;align-items:center}
.project-title:hover{text-decoration:underline}
.project-caption{max-width:100%;margin-top:16px;font-size:16px}
.project-caption p{margin:0;color:var(--c-muted)}
.people{background:var(--c-accent);color:#fff}
.people-layout{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
.people-image{aspect-ratio:1.35;object-position:51% center}
.people-photo{height:100%;object-position:center}
.people h2{font-size:clamp(2.3rem,4vw,3.45rem);max-width:14ch}
.people p{max-width:34ch}
.people a{color:white}
.people-caption{font-size:14px;color:#fff;max-width:none}
.start{padding-block:96px}
.start-layout{display:grid;grid-template-columns:7fr 5fr;gap:64px}
.start h2{font-size:clamp(2.2rem,3.8vw,3.25rem);max-width:19ch}
.start p{max-width:44ch}
.direct{padding-top:8px}
.direct-title{font-size:16px;color:var(--c-muted);margin:0 0 16px}
.direct-phone{font:700 clamp(1.8rem,3vw,2.5rem)/1.15 var(--font-display);text-decoration:none;color:var(--c-ink);display:block;min-height:48px;letter-spacing:-.03em}
.direct-mail{display:inline-block;margin-block:8px 24px;overflow-wrap:anywhere;min-height:44px}
.site-footer{background:var(--c-alt);color:var(--c-ink);padding-block:64px 28px}
.footer-grid{display:grid;grid-template-columns:4fr 3fr 2.5fr 2.5fr;gap:40px}
.footer-logo{width:96px;height:96px;margin-bottom:24px}
.footer-about{font-size:16px;max-width:25ch}
.footer-link{display:inline-flex;align-items:center;min-height:44px;color:var(--c-ink)}
.site-footer h2{margin-bottom:16px}
.site-footer li{margin:0}
.footer-hours{font-size:15px;color:var(--c-muted)}
.legal{margin-top:48px;font-size:14px;align-items:center}
.legal a{color:var(--c-muted);min-height:44px;display:inline-flex;align-items:center}
.page-head{padding-block:48px 64px;border-bottom:1px solid var(--c-line)}
.page-head .breadcrumb{margin-bottom:32px}
.page-intro{font-size:clamp(1.2rem,2vw,1.45rem);max-width:48ch;margin:24px 0 0;line-height:1.5}
.page-heading{max-width:18ch;margin:0}
.page-head-layout{display:grid;grid-template-columns:8fr 4fr;gap:48px;align-items:end}
.jump-nav{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:32px}
.jump-nav a{min-height:44px;display:flex;align-items:center;font-weight:600}
.page-section{padding-block:96px}
.service-section{scroll-margin-top:24px;border-bottom:1px solid var(--c-line)}
.service-layout{display:grid;grid-template-columns:5fr 7fr;gap:64px}
.service-heading{font-size:clamp(2.6rem,4.7vw,4rem);margin-bottom:24px}
.service-visual{aspect-ratio:1.45;margin-top:32px}
.service-items{border-top:1px solid var(--c-line)}
.service-detail{border-bottom:1px solid var(--c-line);scroll-margin-top:24px}
.service-toggle{font:600 22px/1.3 var(--font-body);padding:22px 44px 22px 0;cursor:pointer;list-style:none;position:relative;min-height:72px}
.service-toggle::-webkit-details-marker{display:none}
.service-toggle::after{content:'+';position:absolute;right:8px;top:18px;font-size:28px;font-weight:400;color:var(--c-accent)}
.service-detail[open] .service-toggle::after{content:'−'}
.service-description{padding:0 40px 24px 0;max-width:45ch;color:var(--c-muted)}
.service-description p{margin-bottom:12px}
.service-description a{font-size:16px;min-height:44px;display:inline-flex;align-items:center}
.reading-layout{display:grid;grid-template-columns:minmax(0,680px) 1fr;gap:96px}
.reading-layout h2{font-size:34px;margin-top:48px}
.reading-layout h2:first-child{margin-top:0}
.margin-note{border-top:1px solid var(--c-line);padding-top:20px;font-size:16px;color:var(--c-muted);max-width:28ch}
.margin-note strong{display:block;color:var(--c-ink);font-size:18px;margin-bottom:12px}
.portrait-row{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center;margin-top:64px}
.portrait-image{aspect-ratio:1.3}
.portrait-image .photo{object-position:78% center}
.portrait-row h2{font-size:36px}
.portrait-row p{max-width:41ch}
.portrait-role{font-size:16px;color:var(--c-muted)}
.quote-text{font-size:23px;line-height:1.5;letter-spacing:-.015em}
.portfolio-list{display:grid;grid-template-columns:7fr 5fr;gap:72px 48px}
.portfolio-list .project-block:nth-child(even){margin-top:100px}
.project-wide{aspect-ratio:16/9}
.project-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--c-line);padding-top:24px;margin-top:40px;font-size:16px}
.project-facts dt{color:var(--c-muted);margin-bottom:8px}
.project-facts dd{margin:0;font-weight:600}
.project-description{display:grid;grid-template-columns:7fr 5fr;gap:64px;margin-top:64px}
.project-description h2{font-size:34px}
.contact-layout{display:grid;grid-template-columns:7fr 5fr;gap:96px}
.contact-form h2{font-size:30px;margin-bottom:32px}
.contact-aside h2{font-size:24px}
.contact-aside a{min-height:44px;display:inline-flex;align-items:center}
.contact-team{aspect-ratio:1.5;margin-bottom:24px}
.contact-stack{min-width:0}
.contact-stack p{max-width:36ch}
.contact-stack .direct-mail{display:block;overflow-wrap:anywhere}
.field{margin-bottom:24px}
input,select,textarea{border:1px solid #829da2;background:#fff;border-radius:0}
.error{font-size:14px}
.contact-note{font-size:15px;color:var(--c-muted);max-width:55ch}
.form-done{border-top:3px solid var(--c-accent);padding-top:32px}
.review-list{margin-block:24px}
.review-list dt{font-size:14px;color:var(--c-muted);margin-top:16px}
.review-list dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.form-back{min-height:48px;border:0;padding:12px 0;background:transparent;color:var(--c-link);text-decoration:underline;font:600 16px var(--font-body);cursor:pointer}
.filter-svg{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.related-links{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:32px}
.related-links a{min-height:44px;display:inline-flex;align-items:center}
.empty-section{padding-block:64px}
.not-found{text-align:left;max-width:650px;margin-block:96px}
@media(min-width:1500px){.hero-title{font-size:96px}}
@media(max-width:1100px){.nav ul{gap:20px}.header-action{margin-left:0}.hero-title{font-size:8.4vw}.hero-image{height:480px}.hero-layout{grid-template-columns:5.2fr 6.8fr}.people-layout,.start-layout{gap:40px}.contact-layout{gap:48px}.footer-grid{gap:24px}}
@media(max-width:1000px){.nav a{font-size:28px;padding-block:20px;min-height:64px}.nav a[aria-current=page]{border-bottom:0;color:var(--c-accent)}.nav .nav-action{font-size:18px;margin-top:32px;min-height:52px}.site-header .wrap{min-height:88px}.menu-btn{border:1px solid var(--c-accent);padding:0 16px;color:var(--c-accent)}.nav .btn{color:white;padding-inline:24px;justify-content:center}.header-action{display:none}.nav ul{gap:0}.hero{padding-top:32px}.hero-title{font-size:9vw}.hero-intro{font-size:18px}.hero-image{height:450px}.hero-caption{display:block}.hero-caption a{margin-top:4px}.hero-caption span{display:block}.offering-row{grid-template-columns:5fr 7fr}.intro-heading{grid-template-columns:5fr 7fr}.people-layout{grid-template-columns:6fr 6fr}.start-layout{grid-template-columns:7fr 5fr}.footer-grid{grid-template-columns:1fr 1fr;gap:40px}.page-head-layout{grid-template-columns:1fr}.reading-layout{grid-template-columns:7fr 3fr;gap:48px}.contact-layout{grid-template-columns:7fr 5fr;gap:40px}.service-layout{gap:40px;grid-template-columns:5fr 7fr}}
@media(max-width:760px){:root{--section:64px}.hero{padding-block:24px 48px}.hero-layout{grid-template-columns:1fr;gap:32px}.hero-copy{padding-top:0}.location{font-size:14px;margin-bottom:24px}.hero-title{font-size:clamp(4.25rem,12.3vw,5.75rem);line-height:.99;margin-bottom:24px}.hero-intro{max-width:34ch;font-size:18px;margin-bottom:24px}.hero-image{height:auto;aspect-ratio:1.2}.hero-image .photo{object-position:center}.hero-photo{padding:0}.hero-caption{display:flex;align-items:start;gap:12px;font-size:13px}.hero-caption a{margin-top:-10px;white-space:nowrap}.intro-heading{grid-template-columns:1fr;gap:20px;margin-bottom:32px}.intro-heading h2{max-width:16ch;font-size:38px}.intro-heading p{font-size:18px;max-width:38ch}.offering-row{grid-template-columns:1fr;gap:20px 16px;padding-block:28px}.offering-title{font-size:42px;grid-column:1;grid-row:1}.offering-copy{grid-column:1/-1;grid-row:2}.offering-copy p{font-size:17px}.service-summary{font-size:14px}.section-top{display:block;margin-bottom:24px}.section-top h2{font-size:38px;margin-bottom:16px}.project-pair{grid-template-columns:1fr;gap:32px}.project-block-small{margin-top:0}.project-block-small .project-image{aspect-ratio:4/3}.project-title{font-size:25px}.people-layout{grid-template-columns:1fr;gap:32px}.people-image{aspect-ratio:1.3}.people h2{font-size:38px;max-width:17ch}.people p{max-width:36ch}.start{padding-block:64px}.start-layout{grid-template-columns:1fr;gap:40px}.start h2{font-size:36px}.direct{padding-top:0}.direct-phone{font-size:32px}.footer-grid{grid-template-columns:1fr 1fr;gap:40px 24px}.footer-brand{grid-column:1/-1;display:grid;grid-template-columns:88px 1fr;gap:24px;align-items:start}.footer-logo{width:88px;height:88px;margin:0}.footer-about{margin:0;font-size:15px;max-width:25ch}.footer-grid .footer-visit{grid-column:1/-1}.site-footer{padding-top:48px}.legal{margin-top:32px;gap:8px;font-size:13px}.legal ul{gap:0 20px}.page-head{padding-block:32px 40px}.page-head .breadcrumb{font-size:14px;margin-bottom:32px}.page-heading{font-size:50px;max-width:15ch}.page-intro{font-size:20px;max-width:35ch;margin-top:24px}.page-section{padding-block:64px}.service-layout{grid-template-columns:1fr;gap:32px}.service-heading{font-size:44px}.service-visual{margin-top:24px;aspect-ratio:1.6}.service-toggle{font-size:21px}.reading-layout{grid-template-columns:1fr;gap:40px}.reading-layout h2{font-size:30px}.margin-note{max-width:38ch}.portrait-row{grid-template-columns:1fr;gap:24px;margin-top:48px}.portrait-row h2{font-size:30px}.portrait-image{aspect-ratio:1.4}.quote-text{font-size:21px}.portfolio-list{grid-template-columns:1fr;gap:40px}.portfolio-list .project-block:nth-child(even){margin-top:0}.project-facts{grid-template-columns:1fr;gap:20px}.project-description{grid-template-columns:1fr;gap:24px;margin-top:40px}.project-wide{aspect-ratio:1.2}.contact-layout{grid-template-columns:1fr;gap:64px}.contact-aside{border-top:1px solid var(--c-line);padding-top:40px}.contact-team{aspect-ratio:1.4}.jump-nav{gap:4px 24px}.people-caption{font-size:13px}.empty-section{padding-block:48px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
.breadcrumb ol{align-items:center}
.people :focus-visible{outline-color:#fff}