/* ============================================================================
   HOME (Morfey): hero (video), services (white), customs with photo (soft), ОДВ band
   (video), corridor and map (dark), who we work for with photo cards (white), image break
   (photo), how clearance works (soft), company with photo (dark), Информационен център
   (white), inquiry band (soft). Colour tokens and
   the global type/button/header rules live in theme.css, the shared section blocks
   (heads, lists, cards, steps, inquiry band, seam, motifs) in blocks.css.
   ============================================================================ */

.hp-h1{margin:20px 0 0;font-size:var(--fs-h1-home);font-weight:800;line-height:1.02;letter-spacing:-.01em;color:var(--white);overflow-wrap:break-word}
.hp-lead{max-width:640px;margin:26px 0 0;font-size:var(--fs-lead);line-height:1.55;color:var(--text-on-dark)}
#uslugi,#mitnitsa,#koridor,#odv{scroll-margin-top:var(--mh-compact,68px)}
/* the form panel (as on the quote page): it lands a little below the compact header */
#zapitvane{scroll-margin-top:calc(var(--mh-compact,68px) + 24px)}

/* ---- 1. Hero: on desktop the whole hero, facts strip included, fits the first screen: one
   screen tall at most (900 px cap), the copy centred between the header and the facts strip. If
   the copy needs more (short windows), the hero grows and the facts strip goes below the fold.
   Phones keep the taller layout. ---- */
.hp-hero{position:relative;display:flex;flex-direction:column;min-height:max(720px,100vh);min-height:max(720px,100svh);overflow:hidden;background:var(--darker);color:var(--white);--focus:var(--red-on-dark)}
@media (min-width:768px){
  .hp-hero{min-height:min(100vh,900px);min-height:min(100svh,900px)}
  .hp-h1{margin-top:16px}
  .hp-lead{margin-top:20px}
  .hp-hero .hp-actions{margin-top:30px}
}
.hp-hero-media,.hp-hero-overlay{position:absolute;inset:0}
.hp-hero-video{position:absolute;inset:0}
.hp-hero-overlay{background:var(--hero-overlay)}
.hp-hero-in{position:relative;z-index:2;flex:1;display:flex;align-items:center;width:100%;padding-top:calc(var(--mh-h) + 32px);padding-bottom:32px}
.hp-hero-copy{min-width:0;max-width:900px}
.hp-hero .eyebrow{color:var(--white)}
.hp-hero .ts-video-toggle:focus,.hp-hero .ts-video-toggle:focus-visible{top:calc(var(--mh-h) + 16px);right:var(--gutter);bottom:auto}
.hp-facts{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.22);background:rgba(var(--darker-rgb),.45)}
.hp-facts-list{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:0 auto;padding-top:22px;padding-bottom:24px;list-style:none}
.hp-facts-list li{display:flex;flex-direction:column;gap:6px}
.hp-facts-list b{font-family:var(--ts-font-display);font-size:clamp(30px,3vw,40px);font-weight:800;line-height:1;color:var(--white)}
.hp-facts-list span{font-size:15px;line-height:1.4;color:var(--text-on-dark)}

@media (min-width:768px) and (max-height:700px){
  .hp-hero-in{padding-top:calc(var(--mh-h) + 20px);padding-bottom:24px}
  .hp-lead{margin-top:16px;font-size:18px}
  .hp-hero .hp-actions{margin-top:24px}
}

/* ---- 2. Services ---- */
.hp-services{background:var(--white)}
.hp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
/* separate rounded cards (the chart grid shows between them); a tile with a page lifts 2 px on hover */
.hp-tile{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease}
.hp-tile.is-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.hp-tile-in{display:flex;flex-direction:column;height:100%;padding:36px 32px 34px;color:var(--text)}
.hp-tile-num{font-family:var(--ts-font-display);font-size:20px;font-weight:800;line-height:1;letter-spacing:.02em;color:var(--red)}
.hp-tile-head{display:flex;align-items:center;gap:14px;min-height:28px}
.hp-tile-tag{padding:6px 10px;border-radius:var(--r-xs);background:var(--red);color:var(--white);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.hp-tile-title{margin:18px 0 0;font-size:var(--fs-h3);font-weight:800;line-height:1.15;color:var(--ink);transition:color .2s ease}
.hp-tile-text{flex:1;margin:14px 0 0;font-size:var(--fs-card);line-height:1.55;color:var(--text)}
.hp-tile-more{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-weight:700;color:var(--ink)}
.hp-tile .hp-arrow{transition:transform .2s ease}
.hp-tile.is-link:hover .hp-tile-title{color:var(--red)}
.hp-tile.is-link:hover .hp-arrow{transform:translateX(3px)}
.hp-tile-in{border-radius:inherit}
.hp-tile-in:focus-visible{outline-offset:-6px}
.hp-tile--dark{background:var(--dark);border-color:var(--dark);--focus:var(--red-on-dark)}
.hp-tile--dark .hp-tile-in,.hp-tile--dark .hp-tile-text{color:var(--text-on-dark)}
.hp-tile--dark .hp-tile-num{color:var(--red-on-dark)}
.hp-tile--dark .hp-tile-title,.hp-tile--dark .hp-tile-more{color:var(--white)}
.hp-tile--dark.is-link:hover .hp-tile-title{color:var(--red-on-dark)}
.hp-tile--dark .hp-tile-title,.hp-tile--dark .hp-tile-more{color:var(--white)}
.hp-tile--dark.is-link:hover .hp-tile-title{color:var(--red-on-dark)}

/* ---- 3. Corridor ---- */
.hp-corridor{background:var(--dark);color:var(--text-on-dark);--focus:var(--red-on-dark)}
.hp-corridor .eyebrow,.hp-corridor .hp-h2{color:var(--white)}
.hp-corr-head{margin-bottom:48px}
.hp-corridor .hp-head-note{color:var(--text-on-dark)}
.hp-corr-intro .btn{margin-top:28px}

/* ---- 4. ОДВ band ---- */
.hp-odv{position:relative;overflow:hidden;background:var(--darker);color:var(--text-on-dark);--focus:var(--red-on-dark)}
.hp-odv-media,.hp-odv-overlay{position:absolute;inset:0}
.hp-odv-video{position:absolute;inset:0}
.hp-odv-overlay{background:linear-gradient(90deg,rgba(var(--darker-rgb),.93) 0%,rgba(var(--darker-rgb),.74) 100%)}
.hp-odv-in{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center;padding-top:calc(var(--sec-pad) * 7 / 6);padding-bottom:calc(var(--sec-pad) * 7 / 6)}
.hp-odv .eyebrow,.hp-odv .hp-h2{color:var(--white)}
.hp-odv-copy .hp-text{max-width:620px}
.hp-odv-list-title{margin-top:34px;color:var(--text-on-dark)}
.hp-odv-copy .hp-list li{padding-top:12px;padding-bottom:12px;font-size:var(--fs-card)}
.hp-odv-copy .hp-list li::before{top:20px}
.hp-odv-mailbox{display:inline-flex;flex-direction:column;gap:4px}
.hp-odv-mailbox small{font-size:14px;color:var(--text-on-dark)}
.hp-odv-mail{color:var(--white);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.hp-odv-mail:hover{color:var(--red-on-dark)}
.hp-odv-panel{padding:32px 34px;background:rgba(var(--darker-rgb),.8);border:1px solid var(--rule-on-dark);border-radius:var(--r-md);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hp-odv-panel-title{margin:0 0 8px;font-family:var(--ts-font-body);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.hp-odv-panel ul{margin:0;padding:0;list-style:none}
.hp-odv-panel li{position:relative;padding:14px 0 14px 22px;border-bottom:1px solid var(--rule-on-dark);font-size:19px;font-weight:500;line-height:1.3;color:var(--white)}
.hp-odv-panel li::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;border-radius:50%;background:var(--red-on-dark)}
.hp-odv-panel li:last-child{border-bottom:0;padding-bottom:4px}

/* ---- 3. Customs representation (soft): split with the photo on the left, as tall as the copy ---- */
.hp-customs{background:var(--soft)}
.hp-customs .hp-list li{border-color:var(--rule-2)}
.hp-cus-split{align-items:stretch}
.hp-cus-split .ip-split-media{display:flex;flex-direction:column}
.hp-cus-split .ip-split-photo{position:relative;flex:1;min-height:520px}
.hp-cus-split .ip-split-photo img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:62% 50%}
.hp-cus-cols{margin-top:36px;gap:24px 40px}

/* ---- 6. Who we work for (white) ---- */
.hp-clients{background:var(--white)}

/* ---- 7. How clearance works (soft) ---- */
.hp-process{background:var(--soft)}

/* ---- 9. Company (dark): split with the photo on the right; the ICS2 point as one ruled line ---- */
.hp-company{background:var(--dark);color:var(--text-on-dark);--focus:var(--red-on-dark)}
.hp-company .eyebrow,.hp-company .hp-h2{color:var(--white)}
.hp-co-split .hp-text{max-width:600px;color:var(--text-on-dark)}
.hp-co-split .ip-split-photo{box-shadow:0 32px 64px -36px rgba(0,0,0,.6)}
.hp-co-split .ip-split-photo img{aspect-ratio:5/4;object-position:50% 40%}
.hp-co-point{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;max-width:600px;margin:30px 0 0;padding:18px 0 18px 26px;border-top:1px solid var(--rule-on-dark);border-bottom:1px solid var(--rule-on-dark);font-size:18px;line-height:1.45;color:var(--text-on-dark)}
.hp-co-point::before{content:"";position:absolute;left:0;top:28px;width:10px;height:10px;border-radius:50%;background:var(--red)}
.hp-co-point strong{font-family:var(--ts-font-display);font-size:24px;font-weight:800;line-height:1.1;color:var(--white)}

/* ---- 9. Информационен център (white) ---- */
.hp-info{background:var(--white)}
.hp-articles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.hp-article{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease}
.hp-article.is-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.hp-article-in{border-radius:inherit}
.hp-article-in{display:flex;flex-direction:column;height:100%;padding:28px 24px 30px;color:var(--text)}
.hp-article-title{margin:0;font-size:19px;font-weight:800;line-height:1.25;color:var(--ink);transition:color .2s ease}
.hp-article-text{flex:1;margin:12px 0 0;font-size:var(--fs-small);line-height:1.55;color:var(--text)}
.hp-article.is-link:hover .hp-article-title{color:var(--red)}
.hp-article.is-link:hover .hp-arrow{transform:translateX(3px)}
.hp-tools{margin-top:40px}
.hp-tools-list{display:flex;flex-wrap:wrap;gap:10px 28px;margin:8px 0 0;padding:0;list-style:none}
.hp-tools-list a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* ---- Background artwork per section (base .deco in theme.css) ---- */
/* services, white: nautical chart grid over the right half. Drawn large and placed so only the
   plain lower-left part of the drawing shows: its coordinate labels (Varna top left, Batumi in
   the middle) stay outside the section and never land next to the tile text */
.hp-services > .deco{--deco-img:url(../img/bg/bg-chart-grid.svg);--deco-color:var(--ink);--deco-opacity:.14;--deco-size:2400px auto;--deco-pos:calc(50% + 1000px) -380px;
  --deco-fade:linear-gradient(to left,#000 0,#000 48%,transparent 60%)}
/* customs, grey: bearing ring, 900 px, its centre 180 px inside the right edge */
.hp-customs > .deco{--deco-img:url(../img/bg/bg-bearing-ring.svg);--deco-color:var(--ink);--deco-opacity:.14;--deco-size:900px 900px;--deco-pos:calc(100% + 270px) 50%;
  --deco-fade:linear-gradient(to left,#000 0,#000 540px,transparent 660px)}
/* corridor, dark: sea-depth contours across the band */
.hp-corridor > .deco{--deco-img:url(../img/bg/bg-contours-a.svg);--deco-color:var(--white);--deco-opacity:.18;--deco-size:cover;--deco-pos:center}
/* who we work for, white: route arcs at the top left, round the heading */
.hp-clients > .deco{--deco-img:url(../img/bg/bg-route-arcs.svg);--deco-color:var(--ink);--deco-opacity:.32;--deco-size:1700px auto;--deco-pos:left -300px top -230px;
  --deco-fade:radial-gradient(1500px 560px at 0 0,#000 0,#000 55%,transparent 100%)}
/* five steps, grey: container stacks at the bottom right, 1100 px wide */
.hp-process > .deco{--deco-img:url(../img/bg/bg-containers.svg);--deco-color:var(--ink);--deco-opacity:.14;--deco-size:1100px auto;--deco-pos:right -40px bottom 0;
  --deco-fade:radial-gradient(ellipse 75% 100% at 100% 100%,#000 0,#000 45%,transparent 95%)}
/* company, dark: the Morfey figure, 820 px, over the right third behind the facts; a red glow top left */
.hp-company > .deco{--deco-img:url(../img/bg/bg-symbol.svg);--deco-color:var(--white);--deco-opacity:.12;--deco-size:820px 820px;--deco-pos:calc(100% + 220px) 50%;
  --deco-fade:linear-gradient(to left,#000 0,#000 520px,transparent 680px)}
.hp-company > .deco-glow{left:-320px;top:-280px;width:960px;height:600px;--glow-opacity:.65}
/* Информационен център, white: dot field from the top right */
.hp-info > .deco{--deco-img:url(../img/bg/bg-dot-field.svg);--deco-color:var(--ink);--deco-opacity:.38;--deco-size:1200px auto;--deco-pos:right top;
  --deco-fade:radial-gradient(ellipse 65% 85% at 100% 0,#000 0,#000 30%,transparent 85%)}
/* inquiry band, grey: swell lines in the bottom half */
.hp-close > .deco{--deco-img:url(../img/bg/bg-waves.svg);--deco-color:var(--ink);--deco-opacity:.14;--deco-size:cover;--deco-pos:center bottom;
  --deco-fade:linear-gradient(to bottom,transparent 45%,#000 100%)}
/* ---- Responsive ---- */
@media (max-width:980px){
  .hp-hero-overlay{background:var(--hero-overlay-sm)}
  .hp-corr-head{margin-bottom:40px}
  /* text spans the width here, so the .90 to .55 sideways fade becomes an even wash */
  .hp-odv-overlay{background:linear-gradient(180deg,rgba(var(--darker-rgb),.86) 0%,rgba(var(--darker-rgb),.80) 100%)}
  .hp-tiles{grid-template-columns:repeat(2,1fr)}
  .hp-odv-in{grid-template-columns:1fr;gap:44px}
  .hp-odv-in{padding-top:80px;padding-bottom:80px}
  .hp-cus-split .ip-split-photo{flex:none;min-height:0;aspect-ratio:4/3}
  .hp-co-split .ip-split-photo img{aspect-ratio:4/3}
  .hp-articles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-article:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:981px) and (max-width:1199px){
  .hp-articles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  .hp-hero-in{padding-top:calc(var(--mh-h) + 36px);padding-bottom:40px}
  .hp-lead{font-size:18px}
  .hp-actions .btn{flex:1 1 100%}
  .hp-facts-list{grid-template-columns:1fr;gap:14px;padding-top:20px;padding-bottom:22px}
  .hp-facts-list li{display:grid;grid-template-columns:104px 1fr;align-items:baseline;gap:12px}
  .hp-facts-list b{font-size:26px}
  .hp-tiles{grid-template-columns:1fr;gap:16px}
  .hp-tile-in{padding:30px 22px 28px}
  .hp-odv-panel{padding:26px 22px}
  .hp-articles{grid-template-columns:1fr;gap:16px}
  .hp-article-in{padding:24px 22px 26px}
  .hp-cus-cols{margin-top:28px}
  .hp-co-point strong{font-size:22px}
}
/* tablets: a smaller bearing ring; the services grid fades out downwards (the section is taller) */
@media (max-width:980px){
  .hp-services > .deco{--deco-fade:radial-gradient(ellipse 70% 900px at 100% 0,#000 0,#000 50%,transparent 100%)}
  .hp-customs > .deco{--deco-size:640px 640px;--deco-pos:calc(100% + 200px) 50%;--deco-fade:linear-gradient(to left,#000 0,#000 380px,transparent 460px)}
}
/* phones: the motifs shrink towards the edges; the bearing ring and the container stacks
   would fill the single text column, so they go */
@media (max-width:600px){
  .hp-customs > .deco,.hp-process > .deco{display:none}
  .hp-services > .deco{--deco-size:800px auto;--deco-pos:calc(50% + 300px) -150px;--deco-fade:radial-gradient(420px 360px at 100% 0,#000 0,transparent 100%)}
  .hp-clients > .deco{--deco-size:1000px auto;--deco-pos:left -230px top -150px;--deco-fade:radial-gradient(420px 260px at 0 0,#000 0,transparent 100%)}
  .hp-company > .deco{--deco-size:440px 440px;--deco-pos:calc(100% + 220px) 100%;--deco-fade:linear-gradient(to left,rgba(0,0,0,.5) 0,transparent 240px)}
  .hp-company > .deco-glow{left:-240px;top:-200px;width:600px;height:400px}
  .hp-info > .deco{--deco-size:560px auto;--deco-fade:radial-gradient(360px 300px at 100% 0,#000 0,transparent 100%)}
  .mf > .deco{--deco-size:900px auto}
}
@media (prefers-reduced-motion:reduce){
  .hp-tile,.hp-article,.hp-tile-title,.hp-tile .hp-arrow,.hp-article-title{transition:none}
  .hp-tile.is-link:hover,.hp-article.is-link:hover,.hp-tile.is-link:hover .hp-arrow{transform:none}
}