/* =============================================================================
   site-header.css — the sticky site header (#pmg-mh)
   -----------------------------------------------------------------------------
   One row carrying the logo, the wordmark, the six section links with their
   sub-pages, the Cyprus/Dubai + EN/ES selector, the socials and Consultation.
   Rolled out 06.09.2026 from the 05.09 build, where it lived inline in every
   document; it is one cached file now.

   It REPLACES the old chrome: includes/site-routes.php renders this instead of
   includes/header.php, and the page's own sticky tab row (.cy-np header.site) is
   hidden below — the six links live up here and two sticky bars at top:0 would
   otherwise slide over one another.
   ============================================================================= */

/* The page's in-page tab row, now that the header carries the same six links.
   Hidden, not removed: the page's inline script ends on
   getElementById('mtoggle').addEventListener(...) and would throw without it. */
.cy-np > header.site { display: none !important; }

/* Defensive reset: every standalone page ships its own bare-tag CSS
     (nav a{text-transform:uppercase}, header{...}, etc.) which would
     otherwise leak into these reused elements. Specific pmg-mh rules
     below (e.g. .geo-group__label) still win where uppercase is wanted. */
  .pmg-mh, .pmg-mh *{
    text-transform:none; letter-spacing:normal; text-align:left; font-style:normal;
    list-style:none; border-radius:0; float:none; text-shadow:none;
  }

  .pmg-mh{
    position:sticky; top:0; z-index:300;
    background:linear-gradient(180deg, #0b3e27 0%, #0f4a2f 100%);
    border-bottom:3px solid transparent;
    border-image:linear-gradient(90deg, #F2E6C8 0%, #C9A868 50%, #8C6D3F 100%) 1;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
    transition:box-shadow .25s ease;
    /* the site's face: site.css already forces Open Sans on the selector inside
       this bar (.geo-current/.geo-opt/.geo-group__label), so anything else here
       renders two typefaces in one row. The serif wordmark below is deliberate. */
    font-family:'Open Sans',Arial,Helvetica,sans-serif;
  }
  .pmg-mh.is-scrolled{ box-shadow:0 8px 22px rgba(0,0,0,.28); }
  .pmg-mh__in{
    max-width:1280px; margin:0 auto; padding:14px 32px;
    display:flex; align-items:center; gap:28px; position:relative;
    transition:padding .25s ease;
  }
  .pmg-mh.is-scrolled .pmg-mh__in{ padding:8px 32px; }

  .pmg-mh__brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
  .pmg-mh__brand .header-wrap__logo{ display:block; max-width:none; }
  .pmg-mh__brand .header-wrap__logo img{ height:38px; width:auto; max-width:none; display:block; transition:height .25s ease; }
  .pmg-mh.is-scrolled .pmg-mh__brand .header-wrap__logo img{ height:28px; }
  .pmg-mh__brand-text{ display:block; text-decoration:none; font-family:"Caladea","Cambria",Georgia,serif; font-weight:700; font-size:19px; letter-spacing:.06em; color:#fff; line-height:1.1; }
  .pmg-mh__brand-text strong{ color:#eed6a3; font-weight:700; }
  .pmg-mh__brand-text small{ display:block; font-family:"Carlito",sans-serif; font-size:8.5px; letter-spacing:.32em; color:#d8c39c; font-weight:700; margin-top:2px; }
  .pmg-mh__brand-div{ width:1px; height:28px; background:rgba(238,214,163,.3); margin:0 2px; flex:0 0 auto; }
  .pmg-mh__slogan{ display:flex; align-items:center; flex:0 0 auto; }
  .pmg-mh__slogan img{ height:20px; width:auto; display:block; opacity:.92; transition:height .25s ease, opacity .25s ease; }
  .pmg-mh.is-scrolled .pmg-mh__slogan{ opacity:0; width:0; overflow:hidden; }
  @media screen and (max-width: 1320px){
    .pmg-mh__brand-div, .pmg-mh__slogan{ display:none; }
  }

  .pmg-mh__nav{ display:flex; align-items:center; gap:2px; flex:1 1 auto; }
  .pmg-mh__tw{ position:relative; }
  .pmg-mh__tab{ display:inline-block; color:rgba(255,255,255,.8); text-decoration:none; font-size:13px; font-weight:700; padding:10px 9px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; white-space:nowrap; }
  .pmg-mh__tab:hover, .pmg-mh__tw:hover .pmg-mh__tab, .pmg-mh__tw:focus-within .pmg-mh__tab{ color:#fff; }
  .pmg-mh__tab.pmg-mh__on{ color:#eed6a3; border-color:#b8975a; }
  .pmg-mh__drop{ display:none; position:absolute; top:100%; left:0; min-width:220px; background:#0b3e27; border:1px solid rgba(238,214,163,.22); box-shadow:0 14px 28px rgba(0,0,0,.3); padding:6px; z-index:10; }
  .pmg-mh__tw:hover .pmg-mh__drop, .pmg-mh__tw:focus-within .pmg-mh__drop{ display:block; }
  .pmg-mh__drop a{ display:block; padding:9px 12px; font-size:13px; font-weight:600; color:rgba(255,255,255,.85); text-decoration:none; }
  .pmg-mh__drop a:hover{ background:rgba(238,214,163,.1); color:#eed6a3; }
  .pmg-mh__drop a.is-here{ color:#eed6a3; }

  .pmg-mh__right{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
  .pmg-mh__nav-cta{ display:none; }   /* phones only — see the 700px block */

  .pmg-mh .geo-switch{ position:relative; }
  .pmg-mh .current-lang{ display:flex; align-items:center; gap:6px; border:1px solid rgba(238,214,163,.4); color:#fff; font-size:12.5px; font-weight:700; padding:7px 12px; cursor:pointer; background:transparent; }
  .pmg-mh .geo-current{ color:#fff; }
  .pmg-mh .lang-caret{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; color:#eed6a3; }
  .pmg-mh .lang-dd-wrap.lang-open .lang-caret{ transform:rotate(180deg); }
  .pmg-mh .lang-dd{ display:none; position:absolute; top:calc(100% + 6px); right:0; left:auto; background:#0b3e27; border:1px solid rgba(238,214,163,.22); box-shadow:0 14px 28px rgba(0,0,0,.3); padding:10px; min-width:170px; z-index:10; }
  .pmg-mh .lang-dd-wrap.lang-open .lang-dd{ display:flex; flex-direction:column; }
  .pmg-mh .geo-group{ margin-bottom:8px; }
  .pmg-mh .geo-group:last-child{ margin-bottom:0; }
  .pmg-mh .geo-group__label{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:4px; }
  .pmg-mh .geo-opt{ display:inline-block; margin-right:10px; font-size:13px; font-weight:700; color:rgba(255,255,255,.85); text-decoration:none; padding:0; border-radius:0; }
  .pmg-mh .geo-opt:hover{ background:none; color:#fff; }
  .pmg-mh .geo-opt.is-active{ color:#eed6a3; }

  .pmg-mh .social-wrap{ display:flex; align-items:center; gap:12px; color:#eed6a3; }
  .pmg-mh .social-wrap a{ color:inherit; font-size:15px; }
  .pmg-mh .social-wrap a:hover{ opacity:.7; }

  .pmg-mh__cta{ display:inline-block; text-decoration:none; font-weight:700; font-size:13.5px; letter-spacing:.02em; padding:10px 20px; white-space:nowrap; color:#0b3e27; background:linear-gradient(135deg, #E9D9B4 0%, #B8975A 42%, #8C6D3F 100%); box-shadow:0 6px 18px rgba(140,109,63,.35); transition:box-shadow .2s, transform .2s; }
  .pmg-mh__cta:hover{ background:linear-gradient(135deg, #F2E6C8 0%, #C9A868 42%, #9C7A46 100%); box-shadow:0 8px 22px rgba(140,109,63,.45); transform:translateY(-1px); }

  .pmg-mh__burger{ display:none; background:transparent; border:1px solid rgba(238,214,163,.4); color:#fff; font-size:18px; padding:6px 11px; cursor:pointer; }

  /* Six labels + the selector + the socials + Consultation do not fit inside
     1280px once "Pricing & Registration" is in the row: the group overflowed the
     bar by 14px at every width above 1080. Widen the bar and tighten the tabs
     rather than letting the CTA hang off the edge. */
  .pmg-mh__in{ max-width:1560px; }
  .pmg-mh__nav{ min-width:0; }
  /* Measured with the longest menu on the estate (ES Dubai: "Consultoría en
     constitución de sociedades" and friends). Between 1100 and 1500 the six
     labels, the selector, the socials and Consultation do not all fit, so the
     socials — decorative, and repeated in the footer — go first, which buys the
     ~85px that keeps the menu inline down to a 1200px laptop. */
  @media screen and (max-width: 1500px){
    .pmg-mh .pmg-mh__social{ display:none; }
    .pmg-mh__in{ gap:20px; }
  }
  @media screen and (max-width: 1400px){
    .pmg-mh__in{ gap:18px; }
    .pmg-mh__tab{ padding:10px 7px; font-size:12.5px; }
    .pmg-mh__right{ gap:12px; }
  }
  @media screen and (max-width: 1200px){
    .pmg-mh__in{ gap:12px; }
    .pmg-mh__tab{ padding:10px 5px; font-size:12px; }
    .pmg-mh .current-lang{ padding:6px 10px; font-size:12px; }
    .pmg-mh__cta{ padding:9px 14px; font-size:12.5px; }
  }

  @media screen and (max-width: 1080px){
    .pmg-mh__nav{
      display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
      background:#0b3e27; border-top:1px solid rgba(238,214,163,.22); padding:8px 20px 18px; gap:0;
      box-shadow:0 14px 28px rgba(0,0,0,.3);
    }
    .pmg-mh.is-nav-open .pmg-mh__nav{ display:flex; }
    .pmg-mh__nav .pmg-mh__tw{ display:block; width:100%; }
    .pmg-mh__nav .pmg-mh__tab{ display:block; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }
    .pmg-mh__nav .pmg-mh__drop{ display:block !important; position:static; box-shadow:none; border:none; background:transparent; padding:0 0 8px 14px; }
    .pmg-mh__nav .pmg-mh__drop a{ padding:7px 0; color:rgba(255,255,255,.7); }
    /* .pmg-mh .social-wrap is (0,2,0) — a bare .pmg-mh__social never won and the
       icons stayed on, pushing the burger off the right edge of a phone. */
    .pmg-mh .pmg-mh__social{ display:none; }
    .pmg-mh__burger{ display:inline-block; }
    .pmg-mh__in{ flex-wrap:wrap; row-gap:10px; }
    /* both groups must be allowed to shrink, or the row is wider than the screen
       and the whole document gets a horizontal scrollbar */
    .pmg-mh__brand{ min-width:0; flex:1 1 auto; }
    .pmg-mh__right{ min-width:0; flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
  }

  /* ---- phones -------------------------------------------------------------
     ONE row: the logo, the jurisdiction selector and the burger. Consultation
     moves inside the panel (.pmg-mh__nav-cta) — with it in the bar the row wrapped
     to two lines and the header ate 99px of a 844px screen.
     -------------------------------------------------------------------------- */
  @media screen and (max-width: 700px){
    .pmg-mh__in{ flex-wrap:nowrap; padding:9px 14px; gap:10px; }
    .pmg-mh.is-scrolled .pmg-mh__in{ padding:7px 14px; }
    .pmg-mh__brand{ flex:1 1 auto; min-width:0; gap:8px; }
    .pmg-mh__brand .header-wrap__logo img{ height:26px; }
    .pmg-mh.is-scrolled .pmg-mh__brand .header-wrap__logo img{ height:24px; }

    /* The slogan comes back on phones (Denys, 06.09). The build hid it below
       1320px; with the wordmark gone there is room for it beside the logo. It is
       680x108, so 13px tall is ~82px wide — which fits a 360px screen next to the
       selector and the burger with ~20px to spare. Below 360 it goes again. */
    .pmg-mh__slogan{ display:flex; }
    .pmg-mh__slogan img{ height:13px; opacity:.85; }
    .pmg-mh.is-scrolled .pmg-mh__slogan{ opacity:1; width:auto; overflow:visible; }
    @media screen and (max-width: 359px){
      .pmg-mh__slogan{ display:none; }
    }
    .pmg-mh__right{ flex:0 0 auto; flex-wrap:nowrap; gap:8px; }
    .pmg-mh__cta{ display:none; }
    .pmg-mh .current-lang{ padding:6px 9px; font-size:12px; }
    .pmg-mh__burger{ padding:6px 10px; font-size:16px; line-height:1; }
    .pmg-mh__nav{ padding:8px 14px 16px; }

    .pmg-mh__nav-cta{
      display:block; margin-top:14px; text-align:center; text-decoration:none;
      font-weight:700; font-size:14px; padding:12px 18px; color:#0b3e27;
      background:linear-gradient(135deg, #E9D9B4 0%, #B8975A 42%, #8C6D3F 100%);
    }
  }

  /* ---- .is-compact: the row measured itself and did not fit -----------------
     The six labels are read out of the page, so their length is content, not a
     constant: the Dubai set ("Golden Visa Consultancy", "Company & Tax
     Consultancy") ran into the language pill on a 2000px screen while the Cyprus
     set fitted with 28px to spare. Rather than tune paddings per language, the
     header measures its own nav and collapses to the burger when it overflows —
     see the script in includes/site-nav.php. The media query above stays as the
     no-JavaScript fallback.
     -------------------------------------------------------------------------- */
  .pmg-mh.is-compact .pmg-mh__nav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:#0b3e27; border-top:1px solid rgba(238,214,163,.22); padding:8px 20px 18px; gap:0;
    box-shadow:0 14px 28px rgba(0,0,0,.3);
  }
  .pmg-mh.is-compact.is-nav-open .pmg-mh__nav{ display:flex; }
  .pmg-mh.is-compact .pmg-mh__nav .pmg-mh__tw{ display:block; width:100%; }
  .pmg-mh.is-compact .pmg-mh__nav .pmg-mh__tab{ display:block; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .pmg-mh.is-compact .pmg-mh__nav .pmg-mh__drop{ display:block; position:static; box-shadow:none; border:none; background:transparent; padding:0 0 8px 14px; }
  .pmg-mh.is-compact .pmg-mh__nav .pmg-mh__drop a{ padding:7px 0; color:rgba(255,255,255,.7); }
  .pmg-mh.is-compact .pmg-mh__social{ display:none; }
  .pmg-mh.is-compact .pmg-mh__burger{ display:inline-block; }
  .pmg-mh.is-compact .pmg-mh__nav-cta{ display:block; margin-top:14px; text-align:center; text-decoration:none;
    font-weight:700; font-size:14px; padding:12px 18px; color:#0b3e27;
    background:linear-gradient(135deg, #E9D9B4 0%, #B8975A 42%, #8C6D3F 100%); }

  /* ---- the old fixed mobile header is not rendered on these pages ----------
     site.css:204 and components/header.css:117 pad the body by 53px under 999px
     to clear it. Here that padding is a white strip above the header. Scoped to
     .pmg-site (set by head.php) so the legal pages, which still carry the old
     header, keep theirs. */
  @media screen and (max-width: 999px){
    body.pmg-site{ padding-top:0; }
  }

/* -----------------------------------------------------------------------------
   The looping hero video, Cyprus landing page only (includes/site-routes.php).
   .hero is already position:relative + overflow:hidden, so the layer just fills it.
   -------------------------------------------------------------------------- */
.cy-np .hero { isolation: isolate; }
.cy-np .pv-hero-media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-size: cover;        /* the poster, painted immediately, so there is
                                    never a black box while the video loads */
  background-position: center;
}
.cy-np .pv-hero-media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s ease;   /* faded in from the poster on canplay */
}
.cy-np .pv-hero-media video.on { opacity: 1; }

/* The scrim. The footage is bright and the hero copy is cream — without this the
   headline is unreadable. Angled so it is heaviest behind the text. */
.cy-np .pv-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(11, 62, 39, .90) 0%, rgba(11, 62, 39, .70) 40%, rgba(11, 62, 39, .28) 100%);
}
/* The decorative leaf is a line drawing meant for the flat green hero; over the
   film it just sits on top of the picture. Off wherever there is footage. */
.cy-np .hero.hero-video::before { content: none; }

.cy-np .hero::before { z-index: 1; }          /* the decorative leaf */
.cy-np .hero-inner { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .cy-np .pv-hero-media video { display: none; }   /* keep the poster, drop the motion */
}