/* =============================================================================
   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; }
  /* A menu point with a submenu says so: same triangle as the selector pill. */
  .pmg-mh__tw > .pmg-mh__tab::after{ content:""; display:inline-block; margin-left:6px;
    vertical-align:middle; width:0; height:0; border-left:3.5px solid transparent;
    border-right:3.5px solid transparent; border-top:4px solid currentColor; opacity:.7;
    transition:transform .18s ease, opacity .18s ease; }
  .pmg-mh__tw:hover > .pmg-mh__tab::after,
  .pmg-mh__tw:focus-within > .pmg-mh__tab::after{ transform:rotate(180deg); opacity:1; }
  .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; }
  /* The selector owns its own shape (08.09.2026). It used to inherit the pill's
     radius, its shadow and `position:relative` from components/header.css - the OLD
     header's component - which the standalone pages do not load. There the local
     reset above (border-radius:0 on .pmg-mh *) was the last word and the pill came
     out square while the country pages showed it round. The chrome must not depend
     on another component's stylesheet. */
  .pmg-mh .lang-dd-wrap{ position:relative; }
  .pmg-mh .current-lang{ position:relative; border-radius:8px; cursor:pointer;
    box-shadow:0 1px 2px rgba(20,30,50,.08); transition:border-color .15s ease; }
  .pmg-mh .current-lang:hover{ border-color:rgba(238,214,163,.75); }
  .pmg-mh .lang-dd{ border-radius:8px; }
  .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 + .geo-group{ border-top:1px solid rgba(238,214,163,.16); margin-top:8px; padding-top:10px; }
  .pmg-mh .geo-group__label{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:6px; padding:0 9px; }
  /* Two options per group, laid out as a two-column grid so Cyprus/Dubai sit
     over EN/ES and every check mark lands on the same x. site.css appends the
     tick with .geo-opt.is-active::after in --brand-green, which is invisible on
     this dark panel — it is re-coloured and pushed to the end of the cell. */
  .pmg-mh .geo-group{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 6px; }
  .pmg-mh .geo-group__label{ grid-column:1 / -1; }
  .pmg-mh .geo-opt{ display:flex; align-items:center; justify-content:flex-start; gap:7px;
    margin:0; padding:7px 9px; font-size:13px; font-weight:700; color:rgba(255,255,255,.85);
    text-decoration:none; border-radius:6px; }
  .pmg-mh .geo-opt:hover{ background:rgba(238,214,163,.1); color:#fff; }
  .pmg-mh .geo-opt.is-active{ color:#eed6a3; background:rgba(238,214,163,.08); }
  .pmg-mh .geo-opt.is-active::after{ content:"✓"; color:#eed6a3; font-size:10px; line-height:1; opacity:.9; }

  .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-flex; align-items:center; height:35px; text-decoration:none; font-weight:700; font-size:12.5px; letter-spacing:.02em; padding:0 20px; border-radius:8px; 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); }

  /* ---- the disclaimer band ------------------------------------------------
     Moved out of pages/<lang>/<country>.html on 08.09.2026 together with the
     markup (site-nav.php holds the four wordings now), so it renders on every
     URL instead of only on the twenty-four country routes. Same declarations,
     with the .cy-np scope dropped — the band is no longer inside that wrapper.
     -------------------------------------------------------------------------- */
  .pmg-disclaimer{ background:#0b3e27; border-top:1px solid rgba(238,214,163,.14); border-bottom:1px solid rgba(238,214,163,.14); }
  .pmg-disclaimer .wrap{ max-width:1080px; margin:0 auto; padding:10px 32px; }
  .pmg-disc summary{ display:inline-flex; align-items:center; gap:7px; list-style:none; cursor:pointer;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:#eed6a3; }
  .pmg-disc summary::-webkit-details-marker{ display:none; }
  .pmg-disc summary::after{ content:'\25be'; font-size:9px; letter-spacing:0; transition:transform .18s ease; }
  .pmg-disc[open] summary::after{ transform:rotate(180deg); }
  .pmg-disc summary:hover{ color:#fff; }
  .pmg-disc summary:focus-visible{ outline:1px solid rgba(238,214,163,.5); outline-offset:2px; }
  .pmg-disc p{ margin:10px 0 2px; font-size:12.5px; line-height:1.65; color:rgba(238,214,163,.85); }
  @media (max-width:900px){
    .pmg-disclaimer .wrap{ padding:9px 20px; }
    .pmg-disc p{ font-size:12px; }
  }

  .pmg-mh__burger{ display:none; background:transparent; border:1px solid rgba(238,214,163,.4); border-radius:8px; 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{ height:33px; padding:0 14px; font-size:12px; }
  }

  @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; border-radius:8px; 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; border-radius:8px; 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. Neutral and
   light on purpose (Denys, 12.09.2026): the earlier green wash at .90/.70/.28
   read as "murky" and killed the natural colour of the footage. */
.cy-np .pv-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .32) 40%, rgba(0, 0, 0, .05) 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; }

/* The sound control: two small round buttons, green = sound on, red = off,
   fixed at the right edge, vertically centred (Denys, 14.09.2026). The one to
   press is in full colour, the current state sits dimmed. Rendered by
   pmg_site_hero_video() and shown only when the page carries a soundtrack. */
.cy-np .pv-sound {
  position: fixed; top: 50%; right: 14px; transform: translateY(-50%); z-index: 900;   /* right edge, vertically centred */
  display: flex; flex-direction: column; gap: 6px; align-items: center;   /* stacked: on above off */
  padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,30,20,.2), 0 0 0 1px rgba(184,151,90,.35);
}
.cy-np .pv-sound[hidden] { display: none; }
.cy-np .pv-sound__btn {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.18);
  transition: transform .15s ease, opacity .2s ease, filter .2s ease;
}
.cy-np .pv-sound__btn svg { width: 19px; height: 19px; display: block; }
.cy-np .pv-sound__btn--on  { background: radial-gradient(circle at 35% 30%, #8dc46a, #4c9a2a 65%, #3a7f1f); }
.cy-np .pv-sound__btn--off { background: radial-gradient(circle at 35% 30%, #f07c6c, #d93a2b 65%, #b8291c); }
.cy-np .pv-sound__btn:hover, .cy-np .pv-sound__btn:focus-visible { transform: scale(1.08); outline: none; }
.cy-np .pv-sound .pv-sound__btn--off,
.cy-np .pv-sound.is-on .pv-sound__btn--on { opacity: .45; filter: saturate(.5); transform: scale(.88); }
.cy-np .pv-sound.is-on .pv-sound__btn--off { opacity: 1; filter: none; transform: none; }
.cy-np .pv-sound.is-on .pv-sound__btn--on:hover { transform: scale(.88); }
@media (max-width: 768px) {
  .cy-np .pv-sound { right: 8px; }
}

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