/* GDS Travel | Five-panel homepage hero | single-source visual styling, 15 Oct 2026.
   Each service photo is a true full-bleed BACKGROUND, never a document-flow img.
   No styles here target the original home hero or search section. */
.gds5-hero{
  --gds5-cut:24px;--gds5-orange:#EE6F00;
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;height:650px;min-height:610px;margin:0;padding:0;
  background:#071b2b!important;color:#fff;font-family:Alexandria,Arial,sans-serif;
  border:0!important;outline:0!important;box-shadow:none!important;
}
.gds5-hero,.gds5-hero *{box-sizing:border-box;-webkit-tap-highlight-color:transparent!important}
.gds5-hero__actions .ri-arrow-up-right-line{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 auto;font-size:1.12em!important;line-height:1!important;
 color:inherit!important;font-weight:400!important;
}

.gds5-hero, .gds5-hero__track, .gds5-hero .gds5-hero__panel{
  border-image:none!important;
  background-clip:border-box!important;
  -webkit-background-clip:border-box!important;
}
/* Draw a protective 2px INSET inside the hero, not a colored external border.
   This covers browser compositing artefacts at the outermost viewport edge. */
.gds5-hero::after{
  content:"";position:absolute;inset:0;z-index:20;
  pointer-events:none;box-shadow:inset 0 0 0 2px #071b2b;
  border:0!important;outline:0!important;background:none!important;
}
.gds5-hero__track{
  position:absolute;inset:0;display:flex;flex-direction:row-reverse;
  height:100%;width:100%;overflow:hidden;direction:ltr;
  background:#071b2b!important;border:0!important;outline:0!important;box-shadow:none!important;
}
.gds5-hero .gds5-hero__panel{
  position:relative;isolation:isolate;min-width:0;flex:1 1 0;
  height:100%;overflow:hidden;
  border:0!important;outline:0!important;box-shadow:none!important;
  background-color:#0b2637!important;
  background-image:var(--gds5-photo)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  clip-path:polygon(0 0,calc(100% - var(--gds5-cut)) 0,100% 100%,var(--gds5-cut) 100%);
  transition:flex-grow .58s cubic-bezier(.22,.81,.23,1);
  will-change:flex-grow;
}
.gds5-hero .gds5-hero__panel:first-child{
  clip-path:polygon(0 0,100% 0,100% 100%,var(--gds5-cut) 100%);
}
.gds5-hero .gds5-hero__panel:last-child{
  clip-path:polygon(0 0,calc(100% - var(--gds5-cut)) 0,100% 100%,0 100%);
}
.gds5-hero .gds5-hero__panel + .gds5-hero__panel{margin-right:calc(-1 * var(--gds5-cut))}
.gds5-hero .gds5-hero__panel.is-active{flex-grow:4.8}
/* Semantic img is accessible, but the panel's CSS background paints the photo.
   Hidden visual img avoids other theme rules resetting height:auto / max-width. */
.gds5-hero .gds5-hero__img{
  position:absolute!important;top:0!important;right:0!important;
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  object-fit:cover!important;opacity:0!important;pointer-events:none!important;
}
.gds5-hero__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,13,25,.57) 0%,rgba(1,13,25,.20) 28%,rgba(2,15,29,.20) 52%,rgba(1,12,24,.88) 100%);
  transition:background .25s;
}
.gds5-hero__panel.is-active .gds5-hero__overlay{
  background:linear-gradient(180deg,rgba(1,13,25,.42) 0%,rgba(1,13,25,.08) 40%,rgba(1,12,24,.80) 100%);
}
.gds5-hero:before{
  content:"";position:absolute;z-index:8;pointer-events:none;
  inset:0 0 auto;height:365px;
  background:linear-gradient(180deg,rgba(2,16,27,.68) 0%,rgba(2,16,27,.33) 55%,rgba(2,16,27,0) 100%);
}
.gds5-hero__trigger{
  position:absolute;inset:0;z-index:2;display:block;
  width:100%;height:100%;padding:0;border:0;border-radius:0;
  background:transparent!important;box-shadow:none!important;
  cursor:default;-webkit-tap-highlight-color:transparent;
}
.gds5-hero__trigger:focus-visible{outline:3px solid #EE6F00;outline-offset:-6px}
.gds5-hero__closed{
  position:absolute;z-index:3;bottom:38px;left:50%;
  transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);
  overflow-wrap:normal;white-space:normal;direction:rtl;
  font:700 clamp(11px,1.14vw,16px)/1.5 Alexandria,Arial,sans-serif;
  text-align:center;color:#fff;text-shadow:0 3px 13px rgba(0,0,0,.8);
  pointer-events:none;transition:opacity .2s;
}
.gds5-hero__closed:before{
  content:"";display:block;margin:0 auto 11px;
  width:30px;height:3px;background:#EE6F00;border-radius:3px;
}
.gds5-hero__panel.is-active .gds5-hero__closed{opacity:0}
.gds5-hero__detail{
  position:absolute;z-index:5;bottom:39px;
  right:clamp(24px,3.5vw,60px);left:auto;
  width:min(610px,calc(100% - 88px));max-width:calc(100% - 55px);
  margin:0!important;direction:rtl;text-align:right!important;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
}
.gds5-hero__panel.is-active .gds5-hero__detail{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition-delay:.13s;
}
.gds5-hero__kicker{
  display:inline-flex;align-items:center;gap:9px;
  color:#fff;font:600 12px/1.6 Alexandria,Arial,sans-serif;
}
.gds5-hero__kicker:before{
  content:"";width:24px;height:3px;border-radius:3px;background:#EE6F00;
}
.gds5-hero__detail :is(h1,h2){
  margin:12px 0 12px!important;padding:0!important;
  color:#fff!important;text-align:right!important;
  font:700 clamp(23px,2.18vw,33px)/1.42 Alexandria,Arial,sans-serif!important;
  text-wrap:balance;
}
.gds5-hero__detail p{
  margin:0 0 20px!important;padding:0!important;max-width:540px;
  color:#f0f5f7!important;text-align:right!important;
  font:400 clamp(12px,1.04vw,15px)/1.85 Alexandria,Arial,sans-serif!important;
}
.gds5-hero__actions{display:flex;align-items:center;justify-content:flex-start!important;flex-wrap:wrap;gap:10px;direction:rtl;text-align:right}
/* Hero buttons inherit the exact GDS primary/secondary system from gds-global-ui.css.
   Only their position is controlled locally. */
.gds5-hero__actions .gds-button{flex:0 0 auto;white-space:normal}
.gds5-hero__panel:not(.is-active) .gds5-hero__detail a{pointer-events:none}
.gds5-hero__dots{
  position:absolute;z-index:9;bottom:13px;left:50%;
  display:flex;align-items:center;gap:6px;
  transform:translateX(-50%);pointer-events:none;
}
.gds5-hero__dots span{
  display:block;width:20px;height:3px;background:rgba(255,255,255,.5);
  border-radius:3px;transition:width .2s,background .2s;
}
.gds5-hero__dots span.is-active{width:36px;background:#EE6F00}
@media(min-width:768px) and (max-width:1100px){
  .gds5-hero{height:610px;min-height:610px}
  .gds5-hero .gds5-hero__panel.is-active{flex-grow:5.2}
  .gds5-hero__closed{font-size:11px;bottom:30px}
  .gds5-hero__detail{right:23px;left:23px;bottom:34px}
  .gds5-hero__detail :is(h1,h2){font-size:25px!important}
}
@media (min-width:768px) and (hover:hover) and (pointer:fine){
  /* Desktop: panel hover owns interaction, no full-panel click surface. */
  .gds5-hero .gds5-hero__trigger{display:none!important;pointer-events:none!important}
  .gds5-hero .gds5-hero__panel{cursor:default!important}
}
/* Full-viewport phone accordion; panels touch at a single seamless diagonal.
   The FIRST closed panel reserves enough height BELOW the overlaid site header
   so the visitor can always open visas again. */
@media(max-width:767px){
  .gds5-hero{
    --gds5-mobile-slope:19px;
    --gds5-mobile-collapsed:clamp(57px,9svh,76px);
    --gds5-mobile-header:clamp(72px,calc(66.5px + 1.7vw),84px);
    --gds5-mobile-first-closed:calc(var(--gds5-mobile-header) + var(--gds5-mobile-collapsed));
    width:100%!important;
    height:100vh!important;
    height:100svh!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    background:#071b2b!important;
  }
  .gds5-hero:before{
    height:120px;
    background:linear-gradient(180deg,rgba(1,11,19,.64) 0%,rgba(1,11,19,.14) 75%,transparent 100%);
  }
  .gds5-hero .gds5-hero__track{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:0!important;
    padding:0!important;
    direction:rtl!important;
    background:#071b2b!important;
    overflow:hidden!important;
  }
  .gds5-hero .gds5-hero__panel,
  .gds5-hero .gds5-hero__panel:first-child,
  .gds5-hero .gds5-hero__panel:last-child{
    position:relative;
    flex:0 0 var(--gds5-mobile-collapsed)!important;
    height:auto!important;
    min-height:0!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    background-color:#071b2b!important;
    background-position:center 43%!important;
    clip-path:polygon(
       0 var(--gds5-mobile-slope),
       100% 0,
       100% calc(100% - var(--gds5-mobile-slope)),
       0 100%
    )!important;
    transition:flex-grow .4s cubic-bezier(.22,.81,.23,1),flex-basis .4s cubic-bezier(.22,.81,.23,1)!important;
  }
  /* At the top the visa photo fills the area behind the transparent header. */
  .gds5-hero .gds5-hero__panel:first-child{
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--gds5-mobile-slope)),0 100%)!important;
  }
  /* Last panel meets the following section with a clean horizontal edge. */
  .gds5-hero .gds5-hero__panel:last-child{
    clip-path:polygon(0 var(--gds5-mobile-slope),100% 0,100% 100%,0 100%)!important;
  }
  /* Panels overlap by a pixel to eliminate colored / transparent seams. */
  .gds5-hero .gds5-hero__panel + .gds5-hero__panel{
    margin-top:calc(-1 * var(--gds5-mobile-slope) - 5px)!important;
    border:0!important;
  }
  .gds5-hero .gds5-hero__panel:first-child:not(.is-active){
    flex-basis:var(--gds5-mobile-first-closed)!important;
  }
  .gds5-hero .gds5-hero__panel.is-active,
  .gds5-hero .gds5-hero__panel:first-child.is-active,
  .gds5-hero .gds5-hero__panel:last-child.is-active{
    flex:1 1 0%!important;
    height:auto!important;
    min-height:0!important;
  }
  /* WebKit touch highlight / focus outlines can render like magenta borders.
     Remove panel focus paint on touch; the actual CTA links keep native focus. */
  .gds5-hero .gds5-hero__panel,
  .gds5-hero .gds5-hero__panel:is(:focus,:active,:focus-within),
  .gds5-hero .gds5-hero__trigger,
  .gds5-hero .gds5-hero__trigger:is(:focus,:active){
    border:0!important;border-color:transparent!important;border-image:none!important;
    outline:0!important;outline-style:none!important;outline-offset:0!important;
    box-shadow:none!important;-webkit-tap-highlight-color:transparent!important;
  }
  .gds5-hero .gds5-hero__trigger{display:block!important;pointer-events:auto!important;cursor:pointer}
  .gds5-hero .gds5-hero__closed{
    right:20px;left:auto;
    bottom:clamp(23px,3.3svh,31px);
    transform:none;
    max-width:calc(100% - 40px);
    font-size:clamp(14px,3.8vw,17px);
    text-align:right;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .gds5-hero .gds5-hero__closed:before{display:none}
  .gds5-hero .gds5-hero__detail{
    right:clamp(17px,5vw,27px)!important;
    left:clamp(17px,5vw,27px)!important;
    bottom:clamp(28px,4.4svh,47px)!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    text-align:right!important;
    direction:rtl!important;
  }
  .gds5-hero .gds5-hero__detail :is(h1,h2){
    font-size:clamp(20px,5.5vw,26px)!important;
    line-height:1.4!important;
    margin:8px 0 10px!important;
    text-align:right!important;
  }
  .gds5-hero .gds5-hero__detail p{
    font-size:clamp(11px,3.0vw,13px)!important;
    line-height:1.75!important;
    margin:0 0 16px!important;
    max-width:100%!important;
    text-align:right!important;
  }
  .gds5-hero .gds5-hero__actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    justify-content:stretch!important;
    direction:rtl!important;
    text-align:center!important;
  }
  /* Same GDS brand tokens, responsive dimensions only. */
  body .gds5-hero.gds-global-hero .gds5-hero__actions .gds-button{
    min-width:0!important;
    width:100%!important;
    min-height:43px!important;
    padding:10px 7px!important;
    font-size:clamp(10.5px,2.9vw,13px)!important;
    line-height:1.45!important;
    gap:5px!important;
    border-radius:6px!important;
    white-space:normal!important;
  }
  .gds5-hero .gds5-hero__actions .gds-button-text{
    overflow-wrap:normal;
    word-break:normal;
    text-align:center;
  }
  .gds5-hero .gds5-hero__dots{display:none!important}
}
/* Very short mobile landscape: allow content room instead of trapping buttons
   behind the closed sections; normal portrait keeps 100dvh exactly. */
@media(max-width:767px) and (max-height:530px){
  .gds5-hero{min-height:540px!important;height:540px!important}
}

@media(prefers-reduced-motion:reduce){
  .gds5-hero__panel,.gds5-hero__detail,.gds5-hero__closed{transition:none!important}
}