/* XIRO HEADER
   Split from the user's supplied final header.
   Visual values/timings preserved.
   Generic selectors are scoped under .xiro only to prevent collisions.
*/

  .xiro, .xiro *{box-sizing:border-box}
  
  
  .xiro a{text-decoration:none;color:inherit}
  .xiro button{font:inherit}

  .xiro{position:relative;z-index:500;font-family:'Reem Kufi Ink',system-ui,sans-serif}
  .xiro *{box-sizing:border-box}
  .xiro .top{
    position:fixed;inset:0 0 auto;z-index:503;background:transparent!important;
    box-shadow:none!important;backdrop-filter:none!important;pointer-events:none
  }
  .xiro .bar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;padding:clamp(20px,4.4vh,44px) clamp(12px,3vw,40px) 12px
  }
  .xiro .brand,.xiro .controls{pointer-events:auto}
  .xiro .brand{
    color:#0b1a4a;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    font-size:clamp(14px,1.5vw,22px);white-space:nowrap
  }
  .xiro .controls{display:flex;align-items:center;gap:clamp(5px,1vw,12px)}
  .xiro .pill{
    height:clamp(36px,3.2vw,44px);padding:0 clamp(11px,1.3vw,18px);
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    border:1px solid rgba(0,0,0,.11);border-radius:999px;background:#e8ebf5;
    color:#20232d;font-size:clamp(10px,.85vw,14px);font-weight:600;
    letter-spacing:.025em;cursor:pointer;white-space:nowrap
  }
  .xiro .talk{background:#232630;color:#fff;border-color:#232630;overflow:hidden}
  .xiro .talk:hover{background:#0b1a4a}
  .xiro .menu{
    min-width:clamp(78px,7.8vw,112px);background:#e8ebf5;
    position:relative;z-index:505;
    transition:background .18s ease,border-color .18s ease
  }
  .xiro .menu[aria-expanded="true"],.xiro .menu.closing{
    background:transparent;border-color:transparent;box-shadow:none
  }
  .xiro .dots{font-family:Arial,sans-serif;font-size:17px;line-height:1;transform:translateY(-1px)}
  .xiro .brand,.xiro .controls>.pill{
    opacity:0;animation:topIn .72s cubic-bezier(.16,1,.3,1) forwards
  }
  .xiro .controls>.pill:nth-child(1){animation-delay:.09s}
  .xiro .controls>.pill:nth-child(2){animation-delay:.17s}

  .xiro .shade{
    position:fixed;inset:0;z-index:500;background:rgba(5,5,7,.82);
    opacity:0;pointer-events:none;transition:opacity .32s ease
  }
  .xiro .shade.open{opacity:1;pointer-events:auto}

  .xiro .morph{
    position:fixed;z-index:501;background:#fff;pointer-events:none;
    left:var(--fx,0px);top:var(--fy,0px);width:var(--fw,80px);height:var(--fh,40px);
    border-radius:999px;
    box-shadow:0 18px 55px rgba(0,0,0,.12);
    transition:
      left .72s cubic-bezier(.16,1,.3,1),
      top .72s cubic-bezier(.16,1,.3,1),
      width .72s cubic-bezier(.16,1,.3,1),
      height .72s cubic-bezier(.16,1,.3,1),
      border-radius .72s cubic-bezier(.16,1,.3,1),
      box-shadow .72s ease
  }
  .xiro .morph.open{
    left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th);
    border-radius:clamp(15px,1.4vw,20px);
    box-shadow:0 22px 65px rgba(0,0,0,.14)
  }

  .xiro .panel{
    position:fixed;top:clamp(6px,1vw,12px);right:clamp(6px,1vw,12px);z-index:502;
    width:min(clamp(430px,38vw,550px),calc(100vw - 12px));
    height:calc(100dvh - clamp(12px,2vw,24px));
    background:transparent;border-radius:clamp(15px,1.4vw,20px);
    overflow:auto;scrollbar-width:none;-ms-overflow-style:none;
    opacity:0;pointer-events:none;
    transition:opacity .20s ease .12s
  }
  .xiro .panel::-webkit-scrollbar{display:none;width:0;height:0}
  .xiro .panel.open{opacity:1;pointer-events:auto}
  .xiro .panel.closing{transition-delay:0s}
  .xiro .inside{
    min-height:100%;display:flex;flex-direction:column;
    padding:clamp(88px,11vh,116px) clamp(18px,3vw,40px) clamp(18px,3vh,32px)
  }

  .xiro .nav{margin-top:clamp(82px,14vh,160px)}
  .xiro .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
  .xiro .item{
    width:100%;min-height:clamp(46px,6vh,62px);
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:5px clamp(17px,2vw,24px) 5px clamp(19px,2.3vw,28px);
    border-radius:999px;color:#444;font-family:Arial,Helvetica,sans-serif;
    font-size:clamp(27px,min(3vw,5vh),41px);font-weight:400;
    letter-spacing:-.045em;line-height:1.06;
    opacity:0;transform:perspective(700px) translateY(30px) rotateX(-18deg) rotateZ(-1.5deg)
  }
  .xiro .panel.open .item{animation:rise .54s cubic-bezier(.16,1,.3,1) forwards}
  .xiro .list li:nth-child(1) .item{animation-delay:.14s}
  .xiro .list li:nth-child(2) .item{animation-delay:.20s}
  .xiro .list li:nth-child(3) .item{animation-delay:.26s}
  .xiro .list li:nth-child(4) .item{animation-delay:.32s}
  .xiro .list li:nth-child(5) .item{animation-delay:.38s}
  .xiro .item:hover,.xiro .item:focus-visible{background:#e8e8ff;color:#111;outline:none}
  .xiro .right{display:flex;align-items:center;justify-content:flex-end;flex:0 0 30px}
  .xiro .arrow{font-family:Arial,sans-serif;font-size:24px;opacity:0;transform:translate(-8px,3px) rotate(-8deg);transition:.28s}
  .xiro .item:not([aria-current="page"]):hover .arrow,.xiro .item:not([aria-current="page"]):focus-visible .arrow{
    opacity:1;transform:none
  }
  .xiro .dot{width:9px;height:9px;border-radius:50%;background:#000;opacity:0;transform:scale(.25);transition:.25s}
  .xiro .item[aria-current="page"] .arrow{display:none}
  .xiro .item[aria-current="page"] .dot{opacity:1;transform:scale(1)}

  .xiro .fold{display:inline-grid;overflow:hidden;perspective:520px;line-height:1.08}
  .xiro .fold>span{
    grid-area:1/1;display:block;white-space:nowrap;backface-visibility:hidden;
    transform-origin:50% 100%;transition:transform .44s cubic-bezier(.16,1,.3,1),opacity .22s
  }
  .xiro .fold-a{transform:none;opacity:1}
  .xiro .fold-b{transform:translateY(105%) rotateX(-78deg);opacity:0}
  .xiro .item:hover .fold-a{transform:translateY(-105%) rotateX(70deg);opacity:0}
  .xiro .item:hover .fold-b{transform:none;opacity:1}

  .xiro .foot{
    margin-top:auto;
    padding-top:clamp(10px,2vh,18px);
    font-family:Arial,Helvetica,sans-serif;
    transform:translateY(clamp(-54px,-5vh,-28px))
  }
  .xiro .labs{
    position:relative;
    top:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:clamp(30px,4vh,46px)
  }
  .xiro .lab{
    min-height:clamp(38px,5.4vh,50px);padding:0 clamp(10px,1.2vw,15px);
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    border:1px solid #111;border-radius:999px;background:#111;color:#fff;
    opacity:0;transform:translateY(28px) rotate(1.5deg);
    transition:background .25s,color .25s,border-color .25s,transform .25s
  }
  .xiro .panel.open .lab{animation:rise .54s cubic-bezier(.16,1,.3,1) forwards}
  .xiro .lab:nth-child(1){animation-delay:.48s}.xiro .lab:nth-child(2){animation-delay:.54s}
  .xiro .lab:nth-child(3){animation-delay:.60s}.xiro .lab:nth-child(4){animation-delay:.66s}
  .xiro .lab:hover,.xiro .lab:focus-visible{background:#fff;color:#111;border-color:#d6d6d6;outline:none;transform:translateY(-2px)}
  .xiro .lab-left{display:flex;align-items:center;gap:8px;min-width:0}
  .xiro .badge{
    width:22px;height:22px;flex:0 0 22px;border-radius:50%;
    display:grid;place-items:center;background:rgba(255,255,255,.14);
    font-size:10px;font-weight:700
  }
  .xiro .lab:hover .badge{background:#ececec;transform:rotate(-10deg) scale(1.05)}
  .xiro .badge{transition:background .25s,color .25s,transform .35s cubic-bezier(.16,1,.3,1)}
  .xiro .lab-name{
    display:inline-flex;align-items:center;
    font-size:clamp(9px,.9vw,12px);font-weight:600;letter-spacing:.03em;
    overflow:hidden
  }
  .xiro .lab-name .fold{line-height:1}
  .xiro .lab:hover .fold-a,.xiro .lab:focus-visible .fold-a{
    transform:translateY(-105%) rotateX(70deg);opacity:0
  }
  .xiro .lab:hover .fold-b,.xiro .lab:focus-visible .fold-b{
    transform:none;opacity:1
  }
  .xiro .lab-arrow{font-size:14px;opacity:0;transform:translate(-6px,2px) rotate(-10deg);transition:.28s cubic-bezier(.16,1,.3,1)}
  .xiro .lab:hover .lab-arrow,.xiro .lab:focus-visible .lab-arrow{opacity:1;transform:none}

  .xiro .social{opacity:0;transform:translateY(25px)}
  .xiro .panel.open .social{animation:rise .54s .72s cubic-bezier(.16,1,.3,1) forwards}
  .xiro .social-title{margin-bottom:6px;color:#aaa;font-size:11px;letter-spacing:.03em}
  .xiro .social-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;color:#555;font-size:clamp(13px,1.2vw,17px)}
  .xiro .social-grid a{width:max-content;transition:transform .22s,color .22s}
  .xiro .social-grid a:hover{color:#111;transform:translateX(4px)}

  body.lock{overflow:hidden}

  @keyframes topIn{
    0%{opacity:0;transform:perspective(700px) translateY(28px) rotateX(-18deg) rotateZ(-2deg)}
    70%{opacity:1;transform:perspective(700px) translateY(-2px) rotateX(1deg)}
    100%{opacity:1;transform:none}
  }
  @keyframes rise{
    0%{opacity:0;transform:perspective(700px) translateY(30px) rotateX(-18deg) rotateZ(-1.5deg)}
    70%{opacity:1;transform:perspective(700px) translateY(-2px) rotateX(1deg)}
    100%{opacity:1;transform:none}
  }

  @media(max-width:768px){
    .xiro .bar{padding:20px 12px 10px}
    .xiro .brand{font-size:clamp(11px,3.7vw,15px);letter-spacing:.08em}
    .xiro .pill{height:35px;padding:0 clamp(8px,2.4vw,11px);font-size:clamp(9px,2.5vw,11px)}
    .xiro .menu{min-width:72px}
    .xiro .panel{inset:6px;width:auto;height:calc(100dvh - 12px);border-radius:16px}
    .xiro .inside{padding:68px clamp(12px,4vw,20px) 14px}
    .xiro .nav{margin-top:clamp(18px,6vh,58px)}
    .xiro .item{
      min-height:clamp(36px,6vh,48px);
      padding:3px 15px 3px 17px;
      font-size:clamp(18px,min(7vw,5.2vh),29px)
    }
    .xiro .arrow{font-size:20px}.xiro .right{flex-basis:25px}
    .xiro .foot{
      padding-top:8px;
      transform:translateY(clamp(-38px,-4.8vh,-22px))
    }
    .xiro .labs{top:0;gap:7px;margin-bottom:clamp(24px,3.6vh,34px)}
    .xiro .lab{min-height:36px;padding:0 10px}
    .xiro .badge{width:20px;height:20px;flex-basis:20px}
    .xiro .lab-name{font-size:9.5px}
    .xiro .social-title{font-size:10px}
    .xiro .social-grid{font-size:clamp(11px,3.5vw,14px);gap:3px 16px}
  }
  @media(max-width:390px){
    .xiro .bar{padding-left:9px;padding-right:9px}
    .xiro .brand{font-size:11px}
    .xiro .pill{height:33px;padding:0 8px;font-size:8.5px}
    .xiro .menu{min-width:66px}
    .xiro .inside{padding-left:11px;padding-right:11px}
    .xiro .item{font-size:clamp(17px,6.8vw,24px)}
  }
  @media(max-width:768px) and (max-height:680px){
    .xiro .bar{padding-top:15px}
    .xiro .inside{padding-top:56px;padding-bottom:9px}
    .xiro .nav{margin-top:8px}
    .xiro .item{min-height:31px;font-size:clamp(16px,4.8vh,22px);padding-top:2px;padding-bottom:2px}
    .xiro .foot{transform:translateY(-16px)}
    .xiro .labs{top:0;margin-bottom:18px;gap:6px}
    .xiro .lab{min-height:31px}
    .xiro .social-title{display:none}
    .xiro .social-grid{font-size:11px;gap:2px 13px}
  }
  @media(max-width:768px) and (max-height:560px){
    .xiro .inside{padding-top:51px}
    .xiro .nav{margin-top:2px}
    .xiro .item{min-height:28px;font-size:clamp(15px,4.5vh,19px)}
    .xiro .foot{transform:translateY(-8px)}
    .xiro .lab{min-height:28px}.xiro .badge{width:18px;height:18px;flex-basis:18px}
  }
  @media(prefers-reduced-motion:reduce){
    .xiro .brand,.xiro .controls>.pill,.xiro .item,.xiro .lab,.xiro .social{animation:none!important;opacity:1!important;transform:none!important}
    .xiro .panel{transition:none}.xiro .fold>span{transition:none}
  }

/* Production isolation:
   the header has NO strip/background of its own.
   It floats directly above the page exactly as designed. */
.xiro .top,
.xiro .bar {
  background: transparent !important;
  background-color: transparent !important;
}


/* Menu open state:
   XIRO brand turns white over the dark shade, then returns to its original color. */
.xiro .brand {
  transition: color .28s ease;
}

.xiro.menu-open .brand {
  color: #ffffff;
}


/* V16 — slightly larger header proportions to match the supplied reference screenshot. */
.xiro .bar {
  padding:
    clamp(24px, 4.8vh, 48px)
    clamp(16px, 3.3vw, 46px)
    12px;
}

.xiro .brand {
  font-size: clamp(16px, 1.7vw, 24px);
}

.xiro .pill {
  height: clamp(39px, 3.5vw, 47px);
  padding: 0 clamp(13px, 1.45vw, 20px);
  font-size: clamp(11px, .95vw, 15px);
}

.xiro .menu {
  min-width: clamp(84px, 8.3vw, 118px);
}

@media(max-width:768px){
  .xiro .bar{
    padding:22px 14px 10px;
  }

  .xiro .brand{
    font-size:clamp(12px,4vw,16px);
  }

  .xiro .pill{
    height:37px;
    padding:0 clamp(9px,2.6vw,12px);
    font-size:clamp(9.5px,2.7vw,11.5px);
  }

  .xiro .menu{
    min-width:76px;
  }
}

@media(max-width:390px){
  .xiro .bar{
    padding-left:10px;
    padding-right:10px;
  }

  .xiro .brand{
    font-size:12px;
  }

  .xiro .pill{
    height:35px;
    padding:0 9px;
    font-size:9px;
  }

  .xiro .menu{
    min-width:70px;
  }
}


/* V23 — larger visible header elements */
.xiro .bar{
  padding:
    clamp(28px,5.2vh,54px)
    clamp(18px,3.6vw,52px)
    12px;
}

.xiro .brand{
  font-size:clamp(19px,2vw,28px);
  letter-spacing:.14em;
}

.xiro .controls{
  gap:clamp(8px,1.15vw,14px);
}

.xiro .pill{
  height:clamp(44px,3.9vw,52px);
  padding:0 clamp(16px,1.65vw,23px);
  font-size:clamp(12px,1.05vw,16px);
}

.xiro .menu{
  min-width:clamp(96px,9vw,126px);
}

.xiro .dots{
  font-size:19px;
}

@media(max-width:768px){
  .xiro .bar{
    padding:24px 15px 10px;
  }

  .xiro .brand{
    font-size:clamp(14px,4.5vw,18px);
  }

  .xiro .pill{
    height:40px;
    padding:0 clamp(11px,3vw,14px);
    font-size:clamp(10.5px,3vw,12.5px);
  }

  .xiro .menu{
    min-width:82px;
  }

  .xiro .dots{
    font-size:17px;
  }
}

@media(max-width:390px){
  .xiro .bar{
    padding-left:11px;
    padding-right:11px;
  }

  .xiro .brand{
    font-size:13px;
  }

  .xiro .pill{
    height:37px;
    padding:0 10px;
    font-size:9.5px;
  }

  .xiro .menu{
    min-width:74px;
  }
}


/* =========================================================
   V25 — MOBILE / iPHONE / SAFARI / WEBKIT STABILITY
   Desktop design remains unchanged.
   ========================================================= */

.xiro,
.xiro button,
.xiro a{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
}

.xiro .top{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

.xiro .controls{
  min-width:0;
  flex:0 0 auto;
}

.xiro .brand,
.xiro .pill,
.xiro .menu-text,
.xiro .dots{
  flex-shrink:0;
}

.xiro .pill{
  -webkit-appearance:none;
  appearance:none;
  touch-action:manipulation;
  line-height:1;
}

/* Fallback for Safari versions that do not support dvh. */
.xiro .panel{
  height:calc(100vh - clamp(12px,2vw,24px));
}
@supports (height:100dvh){
  .xiro .panel{
    height:calc(100dvh - clamp(12px,2vw,24px));
  }
}

@media(max-width:768px){
  .xiro .bar{
    min-height:76px;
    padding-top:max(18px,env(safe-area-inset-top));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:10px;
    padding-left:max(12px,env(safe-area-inset-left));
    gap:8px;
  }

  .xiro .brand{
    font-size:clamp(13px,3.8vw,16px);
    letter-spacing:.10em;
  }

  .xiro .controls{
    gap:6px;
  }

  .xiro .pill{
    height:38px;
    padding-left:clamp(10px,2.8vw,13px);
    padding-right:clamp(10px,2.8vw,13px);
    font-size:clamp(9.5px,2.65vw,11px);
    letter-spacing:.015em;
  }

  .xiro .talk{
    min-width:0;
  }

  .xiro .menu{
    min-width:78px;
  }

  .xiro .dots{
    font-size:16px;
  }

  .xiro .panel{
    top:max(6px,env(safe-area-inset-top));
    right:max(6px,env(safe-area-inset-right));
    bottom:max(6px,env(safe-area-inset-bottom));
    left:max(6px,env(safe-area-inset-left));
    width:auto;
    height:auto;
  }
}

@media(max-width:430px){
  .xiro .bar{
    padding-right:max(10px,env(safe-area-inset-right));
    padding-left:max(10px,env(safe-area-inset-left));
  }

  .xiro .brand{
    font-size:13px;
  }

  .xiro .pill{
    height:37px;
    padding-left:10px;
    padding-right:10px;
    font-size:9.5px;
  }

  .xiro .menu{
    min-width:74px;
  }
}

@media(max-width:360px){
  .xiro .bar{
    gap:5px;
    padding-left:max(8px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right));
  }

  .xiro .brand{
    font-size:12px;
    letter-spacing:.08em;
  }

  .xiro .controls{
    gap:5px;
  }

  .xiro .pill{
    height:35px;
    padding-left:8px;
    padding-right:8px;
    font-size:8.8px;
  }

  .xiro .menu{
    min-width:68px;
  }
}

/*
  iPhone/iPad browsers all use WebKit.
  Use the native Apple/system sans for the tiny fixed header controls there.
  This avoids external-font glyph/rendering problems while keeping desktop untouched.
*/
@supports (-webkit-touch-callout:none){
  @media(max-width:768px){
    .xiro,
    .xiro .brand,
    .xiro .pill{
      font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    }
  }
}


/* =========================================================
   V27 — RESTORE VISIBLE HEADER ENTRANCE
   The original topIn animation still existed, but it was completing
   behind the full-screen XIRO intro. This keeps the original motion
   and triggers it only when the real page becomes visible.
   ========================================================= */
.xiro .brand,
.xiro .controls > .pill{
  opacity:0;
  animation:none;
}

.xiro.xiro-header-enter .brand,
.xiro.xiro-header-enter .controls > .pill{
  animation:topIn .72s cubic-bezier(.16,1,.3,1) forwards;
}

.xiro.xiro-header-enter .controls > .pill:nth-child(1){
  animation-delay:.09s;
}

.xiro.xiro-header-enter .controls > .pill:nth-child(2){
  animation-delay:.17s;
}

@media(prefers-reduced-motion:reduce){
  .xiro .brand,
  .xiro .controls > .pill,
  .xiro.xiro-header-enter .brand,
  .xiro.xiro-header-enter .controls > .pill{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* =========================================================
   V28 — HEADER ENTRANCE
   XIRO / LET'S TALK / MENU emerge folded from below,
   rise slightly past their position, then settle cleanly.
   ========================================================= */

.xiro .brand,
.xiro .controls > .pill{
  opacity:0;
  visibility:hidden;
  transform-origin:50% 100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity;
  animation:none!important;
}

.xiro.xiro-header-enter .brand,
.xiro.xiro-header-enter .controls > .pill{
  visibility:visible;
  animation:xiroHeaderFoldUp .88s cubic-bezier(.16,1,.3,1) forwards!important;
}

.xiro.xiro-header-enter .brand{
  animation-delay:.02s!important;
}

.xiro.xiro-header-enter .controls > .pill:nth-child(1){
  animation-delay:.12s!important;
}

.xiro.xiro-header-enter .controls > .pill:nth-child(2){
  animation-delay:.22s!important;
}

@keyframes xiroHeaderFoldUp{
  0%{
    opacity:0;
    transform:
      perspective(760px)
      translateY(38px)
      rotateX(-74deg)
      rotateZ(-2deg)
      scaleY(.78);
  }
  44%{
    opacity:1;
    transform:
      perspective(760px)
      translateY(8px)
      rotateX(-18deg)
      rotateZ(-.5deg)
      scaleY(.97);
  }
  76%{
    opacity:1;
    transform:
      perspective(760px)
      translateY(-5px)
      rotateX(6deg)
      rotateZ(.15deg)
      scaleY(1.01);
  }
  100%{
    opacity:1;
    transform:none;
  }
}

/*
  No hidden white patch / shadow / morph surface before MENU is opened.
  The morph only becomes visible during the actual menu-open animation.
*/
.xiro .morph{
  opacity:0;
  visibility:hidden;
  box-shadow:none!important;
}

.xiro .morph.open{
  opacity:1;
  visibility:visible;
  box-shadow:0 22px 65px rgba(0,0,0,.14)!important;
}

/* Header canvas itself must remain completely transparent. */
.xiro .top,
.xiro .bar{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

@media(prefers-reduced-motion:reduce){
  .xiro .brand,
  .xiro .controls > .pill,
  .xiro.xiro-header-enter .brand,
  .xiro.xiro-header-enter .controls > .pill{
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}


/* =========================================================
   V31 — RESTORE ORIGINAL MENU MORPH OPEN/CLOSE
   Keep the original geometry transition alive in both directions.
   Closed state has no shadow patch; open state keeps the supplied panel shadow.
   ========================================================= */
.xiro .morph{
  opacity:1!important;
  visibility:visible!important;
  box-shadow:none!important;
}

.xiro .morph.open{
  opacity:1!important;
  visibility:visible!important;
  box-shadow:0 22px 65px rgba(0,0,0,.14)!important;
}

/* =========================================================
   V31 — TOP HEADER ELEMENTS +20%
   XIRO / LET'S TALK / MENU only.
   ========================================================= */

/* Desktop / laptop / tablet landscape */
@media(min-width:769px){
  .xiro .brand{
    font-size:clamp(22.8px,2.4vw,33.6px);
  }

  .xiro .pill{
    height:clamp(52.8px,4.68vw,62.4px);
    padding-left:clamp(19.2px,1.98vw,27.6px);
    padding-right:clamp(19.2px,1.98vw,27.6px);
    font-size:clamp(14.4px,1.26vw,19.2px);
  }

  .xiro .menu{
    min-width:clamp(115.2px,10.8vw,151.2px);
  }

  .xiro .dots{
    font-size:22.8px;
  }
}

/* Phones / portrait tablets */
@media(max-width:768px){
  .xiro .brand{
    font-size:clamp(15.6px,4.56vw,19.2px);
  }

  .xiro .pill{
    height:45.6px;
    padding-left:clamp(12px,3.36vw,15.6px);
    padding-right:clamp(12px,3.36vw,15.6px);
    font-size:clamp(11.4px,3.18vw,13.2px);
  }

  .xiro .menu{
    min-width:93.6px;
  }

  .xiro .dots{
    font-size:19.2px;
  }
}

@media(max-width:430px){
  .xiro .brand{
    font-size:15.6px;
  }

  .xiro .pill{
    height:44.4px;
    padding-left:12px;
    padding-right:12px;
    font-size:11.4px;
  }

  .xiro .menu{
    min-width:88.8px;
  }

  .xiro .dots{
    font-size:19px;
  }
}

@media(max-width:360px){
  .xiro .brand{
    font-size:14.4px;
  }

  .xiro .pill{
    height:42px;
    padding-left:9.6px;
    padding-right:9.6px;
    font-size:10.56px;
  }

  .xiro .menu{
    min-width:81.6px;
  }

  .xiro .dots{
    font-size:18px;
  }
}


/* ============================================================
   v52.1 — HEADER POSITION / HEIGHT ONLY
   Move the existing header slightly lower and give the white
   header band more vertical presence, matching the reference.
   No other header design/animation changes.
   ============================================================ */

#xiro-header-root{
  padding-top:clamp(26px,3.6vh,42px) !important;
  padding-bottom:clamp(24px,3.2vh,38px) !important;
  min-height:clamp(112px,13.5vh,142px) !important;
}

#xiro-header-root .xiro-header,
#xiro-header-root header{
  min-height:clamp(72px,8.5vh,88px) !important;
  align-items:center !important;
}

/* Keep the same visual proportions on tablet/mobile, only slightly taller. */
@media(max-width:900px){
  #xiro-header-root{
    padding-top:clamp(22px,3vh,32px) !important;
    padding-bottom:clamp(20px,2.8vh,30px) !important;
    min-height:clamp(102px,12vh,124px) !important;
  }

  #xiro-header-root .xiro-header,
  #xiro-header-root header{
    min-height:68px !important;
  }
}

@media(max-width:600px){
  #xiro-header-root{
    padding-top:20px !important;
    padding-bottom:18px !important;
    min-height:96px !important;
  }

  #xiro-header-root .xiro-header,
  #xiro-header-root header{
    min-height:62px !important;
  }
}