/* ===================================================================
   ADESCO DRONES — sub-page system (loaded after drones.css)
   =================================================================== */

/* ---------- nav: dropdown + current state ---------- */
.nav ul li{position:relative}
.nav ul a.cur{color:#fff;position:relative}
.nav ul a.cur::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;background:var(--blue)}
.has-sub > a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px)}
.sub{position:absolute;top:100%;left:-18px;min-width:252px;padding:10px 0;margin-top:14px;
  background:rgba(12,12,13,.97);backdrop-filter:blur(18px);border:1px solid var(--line2);border-radius:14px;
  list-style:none;display:grid;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s,transform .28s,visibility .28s;box-shadow:0 26px 60px rgba(0,0,0,.6)}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub li{margin:0}
.sub a{display:block;padding:10px 20px;font-size:14px;color:var(--ink2)}
.sub a:hover{color:#fff;background:rgba(47,168,255,.08)}
.sub .hd{padding:13px 20px 6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--ink3);text-transform:uppercase}
.mob .ind{padding-left:calc(clamp(20px,4vw,56px) + 20px);font-weight:500;color:var(--ink2);font-size:14px}

/* ---------- page hero (sub-pages) ---------- */
.phero{position:relative;padding:calc(78px + clamp(54px,8vw,112px)) 0 clamp(48px,6vw,84px);overflow:hidden;
  border-bottom:1px solid var(--line2)}
.phero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse at 78% 18%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 78% 18%,#000,transparent 70%)}
.phero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 84% 8%,rgba(47,168,255,.13),transparent 58%)}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(33px,5.4vw,78px);max-width:21ch}
.phero .lead{margin-top:24px}
.phero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.crumb{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:22px;flex-wrap:wrap}
.crumb a{color:var(--ink3)}
.crumb a:hover{color:var(--blue)}
.crumb i{font-style:normal;opacity:.4}
.crumb b{color:var(--blue);font-weight:500}

/* ---------- key/value spec list ---------- */
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,60px)}
.spec .kv{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--line2);font-size:14.5px}
.spec .kv span{color:var(--ink3)}
.spec .kv b{font-weight:700;text-align:right}
@media(max-width:700px){.spec{grid-template-columns:1fr}}

/* ---------- comparison table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line2);border-radius:16px;background:var(--bg2)}
table.cmp{width:100%;border-collapse:collapse;min-width:860px;font-size:14px}
table.cmp th,table.cmp td{padding:17px 20px;text-align:left;border-bottom:1px solid var(--line2);vertical-align:top}
table.cmp thead th{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
  background:#101012;white-space:nowrap}
table.cmp tbody th{font-weight:700;color:var(--ink2);font-size:13.5px;white-space:nowrap}
table.cmp td{color:var(--ink);font-weight:600}
table.cmp tbody tr:hover td,table.cmp tbody tr:hover th{background:rgba(255,255,255,.025)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}

/* ---------- generic card grid ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.cd{border:1px solid var(--line2);border-radius:16px;background:var(--bg2);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .35s,transform .35s}
.cd:hover{border-color:rgba(47,168,255,.5);transform:translateY(-4px)}
.cd .ph{border:0;border-radius:0;border-bottom:1px solid var(--line2)}
.cd .in{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:10px;flex:1}
.cd .tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--blue);text-transform:uppercase}
.cd p{font-size:14px;color:var(--ink3);line-height:1.6}
.cd .more{margin-top:auto;padding-top:16px;font-size:13px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:8px}
.cd .more svg{width:13px;height:13px;transition:transform .3s}
.cd:hover .more svg{transform:translateX(4px)}
@media(max-width:1000px){.cards,.cards.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards,.cards.c2,.cards.c4{grid-template-columns:1fr}}

/* ---------- accordion (FAQ) ---------- */
.acc{border-top:1px solid var(--line2);max-width:94ch}
.acc details{border-bottom:1px solid var(--line2)}
.acc summary{padding:24px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
  align-items:center;font-weight:700;font-size:clamp(16px,1.5vw,19px)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:11px;height:11px;border-right:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);
  transform:rotate(45deg);transition:transform .3s}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc p{padding:0 0 24px;color:var(--ink2);font-size:15px;line-height:1.75}

/* ---------- configurator ---------- */
.cfg{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(30px,4vw,64px);align-items:start}
.cfg-step{border-top:1px solid var(--line2);padding:clamp(24px,3vw,38px) 0}
.cfg-step > .mono{display:block;margin-bottom:8px}
.cfg-step h3{margin-bottom:18px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.opt{border:1.5px solid var(--line);border-radius:13px;padding:16px 18px;cursor:pointer;background:none;color:inherit;
  font:inherit;text-align:left;transition:.28s;display:grid;gap:5px}
.opt b{font-size:14.5px;font-weight:700}
.opt span{font-size:11.5px;color:var(--ink3);font-family:var(--mono);letter-spacing:.08em}
.opt:hover{border-color:rgba(47,168,255,.6)}
.opt.on{border-color:var(--blue);background:rgba(47,168,255,.10)}
.opt.on span{color:var(--blue)}
.cfg-sum{position:sticky;top:112px;border:1px solid var(--line);border-radius:18px;background:var(--bg2);padding:clamp(24px,2.6vw,34px)}
.cfg-sum h3{margin-bottom:20px}
.cfg-sum .kv{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line2);font-size:14px}
.cfg-sum .kv span{color:var(--ink3)}
.cfg-sum .kv b{text-align:right;font-weight:700}
.cfg-sum .btn{width:100%;justify-content:center;margin-top:24px}
@media(max-width:900px){.cfg{grid-template-columns:1fr}.cfg-sum{position:static}.opts{grid-template-columns:1fr}}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .full{grid-column:1/-1}
.field{display:grid;gap:8px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.field input,.field select,.field textarea{background:var(--bg2);border:1.5px solid var(--line);border-radius:12px;
  padding:14px 16px;color:#fff;font:inherit;font-size:15px;transition:border-color .25s;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue)}
.field select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);
  background-position:calc(100% - 21px) 23px,calc(100% - 15px) 23px;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:#101012}
.note{font-size:12.5px;color:var(--ink3);line-height:1.6}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* ---------- info columns / prose ---------- */
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.info.i2{grid-template-columns:repeat(2,1fr)}
.info > div h3{margin-bottom:12px}
.info > div p{color:var(--ink2);font-size:14.5px;line-height:1.7}
@media(max-width:860px){.info,.info.i2{grid-template-columns:1fr}}
.prose{max-width:76ch}
.prose p{color:var(--ink2);font-size:15.5px;line-height:1.75;margin-bottom:18px}
.prose h3{margin:34px 0 12px}

/* ---------- next/prev pager ---------- */
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2)}
.pager a{padding:clamp(28px,3.4vw,46px) 0;display:grid;gap:9px;align-content:center}
.pager a:first-child{padding-right:clamp(20px,3vw,40px)}
.pager a:last-child{text-align:right;border-left:1px solid var(--line2);padding-left:clamp(20px,3vw,40px)}
.pager .mono{color:var(--ink3)}
.pager h3{transition:color .28s}
.pager a:hover h3{color:var(--blue)}
@media(max-width:620px){.pager{grid-template-columns:1fr}
  .pager a:last-child{text-align:left;border-left:0;border-top:1px solid var(--line2);padding-left:0}}

/* ---------- misc ---------- */
.band{background:var(--bg2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;color:var(--ink2)}
.chip.b{border-color:rgba(47,168,255,.45);color:var(--blue);background:rgba(47,168,255,.07)}
.soon{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);border:1px solid rgba(47,168,255,.4);background:rgba(47,168,255,.07);border-radius:999px;padding:5px 11px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}
  .rv{opacity:1;transform:none}.hero h1 .ln i{transform:none}}

/* ---------- real media ---------- */
.im{position:relative;overflow:hidden;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;display:block}
.im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.im.r169{aspect-ratio:16/9}
.im.r43{aspect-ratio:4/3}
.im.r11{aspect-ratio:1}
.im.r32{aspect-ratio:3/2}
.cd .im,.card .im{border:0;border-radius:0;border-bottom:1px solid var(--line2)}
.cd:hover .im img,.card:hover .im img{transform:scale(1.05)}
.im.contain{background:#fff}
.im.contain img{object-fit:contain;padding:8%}
.tile .im{position:absolute;inset:0;border:0;border-radius:0;z-index:0;aspect-ratio:auto}
.tile:hover .im img{transform:scale(1.07)}
/* logo lockup: black-on-white art shown white on dark */
.inv{filter:invert(1);mix-blend-mode:screen}

/* ---------- ROCC band ---------- */
.rocc{position:relative;overflow:hidden;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.rocc-bg{position:absolute;inset:0;z-index:0}
.rocc-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;opacity:.5}
.rocc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(7,7,7,.9) 38%,rgba(7,7,7,.45) 66%,rgba(7,7,7,.2) 100%),
             linear-gradient(180deg,var(--bg) 0%,transparent 22%,transparent 72%,var(--bg) 100%)}
.rocc .wrap{position:relative;z-index:2}
.rocc-in{max-width:58ch}
.rocc-st{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,34px);margin-top:clamp(30px,3.6vw,46px)}
.rocc-st > div{border-top:1px solid var(--line);padding-top:16px}
.rocc-st b{display:block;font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-.05em;line-height:1}
.rocc-st b small{font-size:.42em;color:var(--blue);letter-spacing:0;margin-left:2px}
.rocc-st span{display:block;margin-top:9px;font-size:13px;color:var(--ink3);line-height:1.5}
@media(max-width:760px){.rocc-bg img{opacity:.26}.rocc-st{grid-template-columns:1fr}}

/* ---------- certification / logo strip ---------- */
.logos{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);align-items:center;margin-top:30px}
.logos figure{background:#fff;border-radius:12px;padding:16px 20px;display:grid;place-items:center;min-width:140px;min-height:84px}
.logos img{max-height:52px;width:auto;object-fit:contain}
.logos figcaption{display:none}

/* ---------- hero mission HUD ---------- */
.hud{position:absolute;inset:0;z-index:2;pointer-events:none}
.hud-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hud-lines path{fill:none;stroke:rgba(255,255,255,.34);stroke-width:.12;stroke-dasharray:.9 1.3;vector-effect:non-scaling-stroke;
  stroke-dashoffset:0;animation:dash 14s linear infinite}
.hud-lines path.dim{stroke:rgba(47,168,255,.3)}
@keyframes dash{to{stroke-dashoffset:-40}}
.pill{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:11px;
  padding:9px 15px 9px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(14,16,20,.62);backdrop-filter:blur(14px);box-shadow:0 10px 34px rgba(0,0,0,.42);
  opacity:0;animation:pillIn .9s cubic-bezier(.16,1,.3,1) forwards}
.pill:nth-of-type(2){animation-delay:.5s}
@keyframes pillIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.pill > svg{width:30px;height:30px;flex:none;padding:6px;border-radius:9px;color:var(--blue);
  background:rgba(47,168,255,.12);border:1px solid rgba(47,168,255,.26)}
.pill span{display:grid;line-height:1.25}
.pill b{font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.pill i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--blue);margin-top:3px}
.pill i::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blue);
  margin-right:7px;vertical-align:1px;animation:blip 1.6s ease-in-out infinite}
@keyframes blip{50%{opacity:.25}}
.tgt{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.tgt b{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 16px 3px rgba(47,168,255,.6)}
.tgt::before,.tgt::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1px solid rgba(47,168,255,.55);border-radius:50%;animation:ring 3.4s cubic-bezier(.2,.6,.3,1) infinite}
.tgt::after{animation-delay:1.7s}
.tgt.t2::before{animation-delay:.8s}.tgt.t2::after{animation-delay:2.5s}
.tgt.t3 b{width:7px;height:7px;left:-3.5px;top:-3.5px;opacity:.8}
.tgt.t3::before{animation-delay:1.2s}.tgt.t3::after{animation-delay:2.9s}
@keyframes ring{from{transform:scale(.35);opacity:.9}to{transform:scale(3.6);opacity:0}}
@media(max-width:900px){.hud{display:none}}
@media(prefers-reduced-motion:reduce){.hud-lines path,.pill i::before,.tgt::before,.tgt::after{animation:none}.pill{opacity:1}}

/* ---------- Greece coverage map ---------- */
.gmap{overflow:hidden}
.gmap-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(34px,5vw,80px);align-items:center}
.gmap-txt{max-width:52ch}
.gmap-st{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(28px,3.4vw,44px)}
.gmap-st > div{border-top:1px solid var(--line);padding-top:15px}
.gmap-st b{display:block;font-size:clamp(26px,3.2vw,44px);font-weight:800;letter-spacing:-.05em;line-height:1}
.gmap-st b small{font-size:.42em;color:var(--blue);letter-spacing:0;margin-left:2px}
.gmap-st span{display:block;margin-top:8px;font-size:12.5px;color:var(--ink3);line-height:1.5}
.gmap-vis{position:relative}
.gmap-vis::before{content:"";position:absolute;left:50%;top:50%;width:88%;height:88%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(47,168,255,.26),transparent 64%);filter:blur(22px);pointer-events:none}
.gmap-svg{position:relative;width:100%;height:auto;max-height:76vh;display:block;overflow:visible}
.land path{fill:rgba(47,168,255,.17);stroke:rgba(99,196,255,.62);stroke-width:1.2;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sites .site{opacity:1}
.beam{stroke:rgba(99,196,255,.75);stroke-width:1.5;vector-effect:non-scaling-stroke}
.site.big .beam{stroke:rgba(255,255,255,.72)}
.cap{fill:var(--blue)}
.site.big .cap{fill:#fff}
.dot{fill:var(--blue)}
.site.big .dot{fill:#fff}
.ring{fill:none;stroke:rgba(99,196,255,.7);stroke-width:1;vector-effect:non-scaling-stroke;transform-origin:center;transform-box:fill-box}
.sites .ring{animation:gring 3.8s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:var(--d)}
.sites .ring.r2{animation-delay:calc(var(--d) + 1.9s)}
@keyframes gring{from{transform:scale(.3);opacity:.85}to{transform:scale(3.4);opacity:0}}
@media(max-width:900px){.gmap-grid{grid-template-columns:1fr}.gmap-svg{max-height:58vh;margin:0 auto}.gmap-st{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sites .ring{animation:none;opacity:.4}}

/* =================================================================
   SCROLL SHOWCASE - image bleeds into the page background
   ================================================================= */
.showcase{position:relative;overflow:hidden;padding-top:clamp(90px,12vw,170px);padding-bottom:clamp(90px,12vw,170px)}
.sc-bg{position:absolute;inset:0;z-index:0}
.sc-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);
  transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 9s linear;
  mask-image:radial-gradient(ellipse 78% 86% at 74% 50%,#000 24%,transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse 78% 86% at 74% 50%,#000 24%,transparent 82%)}
.sc-bg img.on{opacity:.72;transform:scale(1.15)}
.showcase::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(7,7,7,.8) 24%,rgba(7,7,7,.22) 58%,transparent 88%),
             linear-gradient(180deg,var(--bg) 0%,transparent 20%,transparent 78%,var(--bg) 100%)}
.sc-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse at 60% 50%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 60% 50%,#000,transparent 75%)}
.showcase .wrap{position:relative;z-index:2}
.sc-head{max-width:22ch;margin-bottom:clamp(40px,5.5vw,86px)}
.showcase h2{font-size:clamp(28px,3.8vw,56px)}
.sc-rows{display:grid;max-width:52ch}
.sc-row{padding:clamp(34px,4.4vw,62px) 0;border-top:1px solid var(--line2);position:relative;
  opacity:.34;transition:opacity .7s cubic-bezier(.16,1,.3,1)}
.sc-row:last-child{border-bottom:1px solid var(--line2)}
.sc-row.on{opacity:1}
.sc-row .n{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--ink3);transition:color .6s}
.sc-row.on .n{color:var(--blue)}
.sc-row h3{font-size:clamp(22px,2.6vw,38px);margin:14px 0 0;letter-spacing:-.03em;line-height:1.08}
.sc-row p{color:var(--ink2);font-size:15.5px;line-height:1.65;margin-top:14px;max-width:52ch;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .8s cubic-bezier(.16,1,.3,1),opacity .6s,margin-top .8s}
.sc-row.on p{max-height:220px;opacity:1}
.sc-row::before{content:"";position:absolute;left:-22px;top:clamp(34px,4.4vw,62px);width:2px;height:0;
  background:var(--blue);transition:height .7s cubic-bezier(.16,1,.3,1)}
.sc-row.on::before{height:46px}
@media(max-width:900px){
  .sc-bg img{mask-image:none;-webkit-mask-image:none}
  .sc-bg img.on{opacity:.2}
  .sc-rows{max-width:none}
  .sc-row{opacity:1}
  .sc-row p{max-height:none;opacity:1}
  .sc-row::before{display:none}}
@media(prefers-reduced-motion:reduce){.sc-bg img{transition:opacity .3s}.sc-row{opacity:1}.sc-row p{max-height:none;opacity:1}}

/* ---------- reusable: photo bleeding into the section background ---------- */
.bleed{position:relative;overflow:hidden}
.bleed > .bleed-bg{position:absolute;inset:0;z-index:0}
.bleed > .bleed-bg img{width:100%;height:100%;object-fit:cover;opacity:.6;
  mask-image:radial-gradient(ellipse 80% 90% at var(--bx,78%) 50%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at var(--bx,78%) 50%,#000 20%,transparent 80%)}
.bleed::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(7,7,7,.82) 26%,rgba(7,7,7,.3) 60%,transparent 90%),
             linear-gradient(180deg,var(--bg) 0%,transparent 22%,transparent 76%,var(--bg) 100%)}
.bleed.left > .bleed-bg img{--bx:22%}
.bleed.left::before{background:linear-gradient(270deg,var(--bg) 0%,rgba(7,7,7,.82) 26%,rgba(7,7,7,.3) 60%,transparent 90%),
             linear-gradient(180deg,var(--bg) 0%,transparent 22%,transparent 76%,var(--bg) 100%)}
.bleed > .wrap{position:relative;z-index:2}
@media(max-width:900px){.bleed > .bleed-bg img{opacity:.22;mask-image:none;-webkit-mask-image:none}}

/* top variant: photo lives in the upper band, text sits on clean black below */
.bleed.top > .bleed-bg img{opacity:.55;object-position:center 42%;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.75) 38%,transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.75) 38%,transparent 72%)}
.bleed.top::before{background:linear-gradient(180deg,var(--bg) 0%,rgba(7,7,7,.42) 26%,rgba(7,7,7,.8) 58%,var(--bg) 78%)}

/* ---------- embedded location map ---------- */
.gmap-embed{position:relative;border:1px solid var(--line2);border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--bg2);display:grid;place-items:center}
.gmap-embed::before{content:"ADESCO HQ";font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink3);text-align:center}
.gmap-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:invert(92%) hue-rotate(188deg) saturate(.72) contrast(.92);
  transition:filter .4s}
.gmap-embed:hover iframe{filter:invert(92%) hue-rotate(188deg) saturate(.9) contrast(1)}
.gmap-embed::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 70px 14px rgba(7,7,7,.75);border-radius:14px}
.maplink{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--blue)}
.maplink svg{width:13px;height:13px;transition:transform .3s}
.maplink:hover svg{transform:translateX(4px)}

/* =================================================================
   JOURNEY - the programme as a route that draws itself on scroll
   ================================================================= */
.journey .sec-head{max-width:30ch}
.journey h2{font-size:clamp(28px,3.8vw,56px)}
.journey .sec-head .lead{max-width:54ch}
.jr{position:relative;margin-top:clamp(44px,6vw,86px)}
.jr-rail{position:absolute;left:0;right:0;top:calc(var(--imgh) + 30px);height:1px;background:var(--line);overflow:visible}
.jr-rail i{position:absolute;left:0;top:0;height:1px;width:0;background:linear-gradient(90deg,rgba(47,168,255,.2),var(--blue));
  box-shadow:0 0 14px 1px rgba(47,168,255,.55);transition:width .35s linear}
.jr-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px)}
.jr-step{position:relative;--imgh:clamp(120px,13vw,186px)}
.jr{--imgh:clamp(120px,13vw,186px)}
.jr-img{height:var(--imgh);border-radius:12px;overflow:hidden;position:relative;background:var(--bg2)}
.jr-img img{width:100%;height:100%;object-fit:cover;opacity:.3;transform:scale(1.08);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.65) 62%,transparent 100%)}
.jr-step.on .jr-img img{opacity:.92;transform:scale(1)}
.jr-node{position:absolute;top:calc(var(--imgh) + 30px);left:0;width:13px;height:13px;margin:-6px 0 0 -1px;z-index:2}
.jr-node b{position:absolute;inset:0;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);
  transition:border-color .5s,background .5s,box-shadow .5s}
.jr-node::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(47,168,255,.5);
  opacity:0;transform:scale(.4);transition:opacity .6s,transform .6s}
.jr-step.on .jr-node b{background:var(--blue);border-color:var(--blue);box-shadow:0 0 16px 3px rgba(47,168,255,.55)}
.jr-step.on .jr-node::after{opacity:1;transform:scale(1)}
.jr-n{display:block;margin-top:48px;font-family:var(--mono);font-size:10px;letter-spacing:.26em;
  color:var(--ink3);transition:color .5s}
.jr-step.on .jr-n{color:var(--blue)}
.jr-step h3{font-size:clamp(18px,1.9vw,25px);margin:12px 0 0;letter-spacing:-.025em;
  opacity:.45;transition:opacity .6s}
.jr-step.on h3{opacity:1}
.jr-step p{font-size:13.5px;color:var(--ink3);line-height:1.6;margin-top:10px;opacity:.5;transition:opacity .6s}
.jr-step.on p{opacity:1}
.jr-cta{display:flex;align-items:center;gap:clamp(18px,3vw,38px);flex-wrap:wrap;margin-top:clamp(44px,5.5vw,76px)}
.jr-note{font-size:13.5px;color:var(--ink3);max-width:44ch;line-height:1.6}
@media(max-width:900px){
  .jr-rail{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto;background:var(--line)}
  .jr-rail i{width:1px;height:0;top:0;background:linear-gradient(180deg,rgba(47,168,255,.2),var(--blue));
    transition:height .35s linear}
  .jr-steps{grid-template-columns:1fr;gap:34px}
  .jr-step{padding-left:34px}
  .jr-img{height:clamp(150px,42vw,230px)}
  .jr-node{top:14px;left:-34px;margin:0}
  .jr-n{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.jr-img img{opacity:.8;transform:none}.jr-step h3,.jr-step p{opacity:1}}