:root{
  --black:#050505;
  --ink:#111;
  --paper:#fff;
  --soft:#f2f3f4;
  --line:#d8dadd;
  --muted:#656a70;
  --accent:#ff4f35;
  --accent2:#7fd0ff;
  --max:1500px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);line-height:1.48}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
.wrap{width:min(calc(100% - 44px),var(--max));margin:auto}
.kicker{text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;font-weight:800}
.red-dot{display:inline-block;width:9px;height:9px;background:var(--accent);border-radius:50%;margin-right:9px}
.arrow::after{content:" ↗"}
.site-header{position:sticky;top:0;z-index:100;background:#050505;color:white;border-bottom:1px solid #313131}
.nav{height:84px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;font-size:1.28rem;font-weight:900;letter-spacing:-.04em;margin-right:auto}
.brand-badge{width:42px;height:42px;border:2px solid white;border-radius:50%;display:grid;place-items:center;position:relative;font-size:.76rem}
.brand-badge::after{content:"";position:absolute;width:52px;height:2px;background:var(--accent);transform:rotate(-28deg)}
.nav-links{display:flex;gap:25px;align-items:center;font-weight:700;font-size:.95rem}
.nav-links a{opacity:.86}.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-quote{padding:10px 16px;border:1px solid #fff;font-weight:800}
.menu-btn{display:none;background:transparent;border:0;color:#fff;font-size:1.7rem}

.hero{min-height:calc(100vh - 84px);position:relative;color:white;display:flex;align-items:end;overflow:hidden;background:#111}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.40) 48%,rgba(0,0,0,.15) 100%),linear-gradient(0deg,rgba(0,0,0,.65),transparent 55%)}
.hero-inner{position:relative;padding:110px 0 72px;z-index:2}
.hero h1{font-size:clamp(4.6rem,10vw,10.8rem);line-height:.81;letter-spacing:-.075em;margin:16px 0 30px;max-width:1300px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
.hero-lead{font-size:clamp(1.15rem,2vw,1.65rem);max-width:780px;color:#f0f0f0;margin:0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{min-height:52px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;font-weight:800;cursor:pointer;transition:.18s}
.btn-red{background:var(--accent);border-color:var(--accent);color:white}
.btn-red:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn-white{background:white;color:#111;border-color:white}
.btn-dark{background:#111;color:#fff;border-color:#111}
.btn-outline{background:transparent;color:inherit}
.scroll-cue{position:absolute;right:24px;bottom:24px;z-index:3;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;writing-mode:vertical-rl}

.section{padding:100px 0}
.section-dark{background:#050505;color:#fff}
.section-soft{background:var(--soft)}
.section-head{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;border-bottom:1px solid currentColor;padding-bottom:26px;margin-bottom:42px}
.section-head h2{font-size:clamp(3rem,7vw,7.4rem);line-height:.86;letter-spacing:-.065em;margin:0}
.section-head p{margin:0;color:var(--muted);font-size:1.08rem;max-width:600px}
.section-dark .section-head p{color:#aeb1b5}

.topic-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #2f2f2f;border-bottom:1px solid #2f2f2f;background:#050505;color:white}
.topic-strip a{padding:28px;border-right:1px solid #2f2f2f;min-height:130px;display:flex;flex-direction:column;justify-content:space-between}
.topic-strip a:last-child{border-right:0}
.topic-strip small{color:#92969b;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.topic-strip strong{font-size:1.45rem;letter-spacing:-.03em}

.feature-split{display:grid;grid-template-columns:1.15fr .85fr;min-height:680px}
.feature-image{position:relative;overflow:hidden;background:#111}
.feature-image img{width:100%;height:100%;object-fit:cover}
.feature-copy{padding:clamp(52px,7vw,105px);background:#0b0b0b;color:white;display:flex;flex-direction:column;justify-content:center}
.feature-copy h2{font-size:clamp(3.5rem,7vw,7rem);line-height:.87;letter-spacing:-.065em;margin:14px 0 28px}
.feature-copy p{font-size:1.15rem;color:#c3c6ca;max-width:620px}

.service-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #303236}
.service-card{min-height:290px;padding:34px;border-right:1px solid #303236;border-bottom:1px solid #303236;display:flex;flex-direction:column;justify-content:space-between;gap:45px}
.service-card:nth-child(even){border-right:0}
.service-card .n{font-size:.75rem;color:#7c8085;font-weight:800}
.service-card h3{font-size:clamp(2rem,4vw,4rem);line-height:.95;letter-spacing:-.055em;margin:0 0 14px}
.service-card p{color:#a8acb1;margin:0;max-width:560px}

.project-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.project-card{position:relative;min-height:460px;overflow:hidden;background:#111;color:#fff}
.project-card:first-child{min-height:630px}
.project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-card .blank-art{position:absolute;inset:0;background:
  radial-gradient(circle at 20% 20%,rgba(127,208,255,.22),transparent 30%),
  radial-gradient(circle at 80% 55%,rgba(255,79,53,.22),transparent 28%),
  linear-gradient(140deg,#111,#050505)}
.project-card .blank-art::before{content:"FLIGHT\\A INTEL";white-space:pre;position:absolute;font-size:clamp(4rem,9vw,10rem);font-weight:900;line-height:.78;letter-spacing:-.08em;color:rgba(255,255,255,.07);left:7%;bottom:9%}
.project-card .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.86),transparent 65%)}
.project-card .content{position:absolute;left:28px;right:28px;bottom:26px;z-index:2}
.project-card h3{font-size:clamp(2rem,4vw,4.7rem);letter-spacing:-.055em;line-height:.92;margin:10px 0}
.project-card p{color:#d4d6d8;max-width:620px;margin:0}
.project-card .tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800}

.page-hero{padding:130px 0 80px;background:#050505;color:#fff}
.page-hero h1{font-size:clamp(4.6rem,10vw,10rem);line-height:.82;letter-spacing:-.075em;margin:14px 0 28px}
.page-hero p{font-size:1.25rem;color:#bfc2c6;max-width:800px;margin:0}
.page-hero-media{min-height:62vh;position:relative;background:#111}
.page-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero-media .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62),transparent 55%)}
.page-hero-media .caption{position:absolute;left:3%;bottom:5%;color:#fff;max-width:700px}
.page-hero-media .caption h2{font-size:clamp(2.5rem,5vw,5rem);line-height:.92;letter-spacing:-.055em;margin:8px 0}

.case-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}
.case-intro h2{font-size:clamp(3rem,6vw,6rem);line-height:.88;letter-spacing:-.06em;margin:0}
.case-intro p{font-size:1.14rem;color:#555a60}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ccc;border-bottom:1px solid #ccc;margin-top:45px}
.fact{padding:24px;border-right:1px solid #ccc}.fact:last-child{border-right:0}
.fact strong{font-size:1.6rem}.fact span{display:block;margin-top:4px;color:#666;font-size:.83rem}

.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.gallery figure{margin:0;position:relative;background:#ddd;overflow:hidden;min-height:330px}
.gallery figure.wide{grid-column:span 8}.gallery figure.small{grid-column:span 4}.gallery figure.half{grid-column:span 6}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:14px;bottom:14px;background:rgba(0,0,0,.82);color:#fff;padding:7px 10px;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.original-note{font-size:.85rem;color:#666;margin-top:18px}

.drone-specs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #303236}
.drone-spec{padding:28px;border-right:1px solid #303236;border-bottom:1px solid #303236}
.drone-spec:nth-child(3n){border-right:0}
.drone-spec strong{display:block;font-size:2rem}.drone-spec span{color:#aeb1b5;font-size:.85rem}
.safety-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.safety-card{padding:28px;border:1px solid #d8dadd;min-height:220px}
.safety-card h3{font-size:1.5rem;margin:0 0 12px}.safety-card p{color:#62676d}

.tool-preview{background:#06100d;border:1px solid #214334;color:#e7fff1;padding:28px;min-height:530px;position:relative;overflow:hidden}
.tool-grid{display:grid;grid-template-columns:1fr 1.8fr 1fr;gap:10px;height:100%}
.hud{border:1px solid rgba(91,255,157,.22);background:rgba(15,30,24,.85);padding:16px}
.hud .label{font-size:.66rem;color:#5bff9d;letter-spacing:.14em;text-transform:uppercase}
.hud .big{font-size:2rem;font-weight:900;margin-top:10px}
.map-mock{position:relative;background:
  linear-gradient(rgba(91,255,157,.08) 1px,transparent 1px),
  linear-gradient(90deg,rgba(91,255,157,.08) 1px,transparent 1px),
  radial-gradient(circle at 45% 40%,rgba(91,255,157,.18),transparent 20%),
  #0b1712;background-size:55px 55px,55px 55px,auto,auto;border:1px solid rgba(91,255,157,.22)}
.map-mock::after{content:"+";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 48px monospace;color:#5bff9d}
.hud-row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(91,255,157,.13);padding:11px 0;font:700 .72rem monospace}
.good{color:#5bff9d}.warn{color:#ffc857}

.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}
.contact-card{background:#0b0b0b;color:white;padding:42px}
.contact-card h2{font-size:clamp(2.6rem,5vw,5rem);line-height:.9;letter-spacing:-.055em;margin:14px 0 25px}
.contact-card a{font-size:1.25rem;font-weight:800}
form{display:grid;gap:17px}
label{font-weight:800}input,textarea,select{width:100%;padding:15px;border:1px solid #b9bdc1;background:white;border-radius:0}
textarea{min-height:180px;resize:vertical}
.note{padding:15px;border-left:4px solid var(--accent);background:#fff2ef;color:#5f352f;font-size:.9rem}

.footer{background:#050505;color:white;padding:75px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.5fr .75fr .75fr;gap:60px}
.footer-title{font-size:clamp(2.8rem,6vw,6rem);line-height:.88;letter-spacing:-.065em;font-weight:900;margin:0 0 20px}
.footer-links{display:grid;gap:10px;color:#bbbfc4}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #303030;margin-top:65px;padding-top:20px;color:#878b90;font-size:.85rem}

.reveal{opacity:0;transform:translateY(24px);transition:.6s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1050px){
  .nav-links{display:none;position:absolute;top:84px;left:0;right:0;background:#050505;padding:24px;flex-direction:column;align-items:flex-start;border-top:1px solid #333}
  .nav-links.open{display:flex}.menu-btn{display:block}.nav-quote{display:none}
  .hero-grid,.section-head,.feature-split,.case-intro,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}.project-card:first-child,.project-card{min-height:520px}
  .topic-strip{grid-template-columns:repeat(2,1fr)}
  .drone-specs,.safety-grid{grid-template-columns:1fr 1fr}.drone-spec:nth-child(3n){border-right:1px solid #303236}.drone-spec:nth-child(even){border-right:0}
  .tool-grid{grid-template-columns:1fr}.map-mock{min-height:330px}
}
@media(max-width:720px){
  .wrap{width:min(calc(100% - 28px),var(--max))}.nav{height:70px}.nav-links{top:70px}
  .hero{min-height:760px}.hero-inner{padding:90px 0 55px}.hero h1{font-size:clamp(4rem,18vw,7rem)}
  .section{padding:70px 0}.topic-strip{grid-template-columns:1fr}.topic-strip a{border-right:0;border-bottom:1px solid #2f2f2f}
  .service-grid,.drone-specs,.safety-grid{grid-template-columns:1fr}.service-card,.drone-spec{border-right:0}
  .gallery{display:block}.gallery figure{min-height:300px;margin-bottom:12px}
  .facts{grid-template-columns:1fr 1fr}.fact:nth-child(even){border-right:0}
  .page-hero{padding:95px 0 60px}.footer-bottom{display:block}
}


/* =========================================================
   BONTENBAL CREATIVE BRAND
========================================================= */
.brand{
  min-width:0;
}
.brand-logo{
  width:68px;
  height:68px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 7px 18px rgba(0,0,0,.45));
}
.brand-name-text{
  white-space:nowrap;
}
.footer-logo{
  width:150px;
  height:auto;
  margin:0 0 18px;
  object-fit:contain;
  filter:drop-shadow(0 12px 25px rgba(0,0,0,.5));
}
.footer-kvk{
  display:block;
  max-width:280px;
  color:#92969b;
  font-size:.86rem;
  line-height:1.5;
}
.kvk-panel{
  border:1px solid #d9dcdf;
  background:#f5f6f7;
  padding:34px;
}
.kvk-panel h3{
  margin:0 0 12px;
  font-size:clamp(1.8rem,3vw,3rem);
  letter-spacing:-.045em;
}
.kvk-panel p{
  margin:0;
  color:#555b61;
  font-size:1.05rem;
}
.contact-coming{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:70px;
  align-items:start;
}
.contact-coming .contact-card{
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.contact-coming .contact-card .footer-logo{
  width:min(260px,70%);
  margin-bottom:auto;
}
@media(max-width:1050px){
  .contact-coming{grid-template-columns:1fr}
}
@media(max-width:720px){
  .brand-logo{width:54px;height:54px}
  .brand-name-text{font-size:1rem}
  .footer-logo{width:120px}
}
@media(max-width:430px){
  .brand-name-text{display:none}
}


/* Drone promo artwork contains its own typography.
   Keep the complete graphic visible instead of cropping it with object-fit: cover. */
.feature-image:has(.drone-promo-image),
.page-hero-media:has(.drone-promo-image){
  background:#050505;
}
.feature-image .drone-promo-image,
.page-hero-media .drone-promo-image{
  object-fit:contain;
  object-position:center;
  padding:0;
}


/* =========================================================
   PERSONAL DRONE PROJECT
========================================================= */
.personal-project-badge{
  display:inline-block;
  margin:0 0 22px;
  padding:8px 11px;
  border:1px solid #454545;
  color:#aeb1b5;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
}
.tool-live-frame{
  width:100%;
  min-height:760px;
  border:1px solid #303236;
  background:#0a111b;
  overflow:hidden;
}
.tool-live-frame iframe{
  display:block;
  width:100%;
  height:760px;
  border:0;
  background:#0a111b;
}
.tool-actions{
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.project-feature-grid{
  margin-top:55px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #cfd2d5;
}
.project-feature-grid article{
  padding:28px;
  border-right:1px solid #cfd2d5;
  border-bottom:1px solid #cfd2d5;
}
.project-feature-grid article:last-child{border-right:0}
.project-feature-grid span{
  font-size:.72rem;
  font-weight:800;
  color:#777d83;
}
.project-feature-grid h3{
  margin:32px 0 10px;
  font-size:1.55rem;
}
.project-feature-grid p{
  margin:0;
  color:#666b70;
}
@media(max-width:1050px){
  .project-feature-grid{grid-template-columns:1fr 1fr}
  .project-feature-grid article:nth-child(2){border-right:0}
}
@media(max-width:720px){
  .tool-live-frame,.tool-live-frame iframe{min-height:620px;height:620px}
  .project-feature-grid{grid-template-columns:1fr}
  .project-feature-grid article{border-right:0}
}