/* ========================================================================== 
   Z191 :: INTERIOLOGY ACTION SYSTEM + ARCHITECTURAL CURSOR
   Typography, hover, press and menu-control refinement only.
   ========================================================================== */

:root{
  --io-action-track:.32em;
  --io-action-fg:#f4f2ec;
  --io-action-muted:rgba(244,242,236,.68);
  --io-action-line:rgba(244,242,236,.34);
  --io-action-line-strong:rgba(244,242,236,.78);
  --io-action-ease:cubic-bezier(.16,1,.3,1);
}

/* 320 tracking across all client-facing actions. */
:where(
  .btn,
  .btn-wa,
  .fcta,
  .el-explore,
  .cta,
  .frange-link,
  .brand-action,
  .io-gallery-toggle,
  .hero-cta,
  .wa-float,
  .form-side form button,
  .modal form button:not(.x),
  section.contact form button,
  .contact form button,
  form button[type="submit"]
){
  font-family:var(--font-brand)!important;
  font-weight:400!important;
  font-style:normal!important;
  text-transform:uppercase!important;
  letter-spacing:var(--io-action-track)!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-wrap:nowrap!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
  hyphens:none!important;
  -webkit-font-smoothing:antialiased;
}

/* SOLID / OUTLINED ACTIONS: precise frame, moving registration marks, no white flash. */
:where(
  .btn,
  .btn-wa,
  .hero-cta,
  .io-gallery-toggle,
  .form-side form button,
  .modal form button:not(.x),
  section.contact form button,
  .contact form button,
  form button[type="submit"]
):not(#mnav-pill){
  --io-btn-fg:var(--io-action-fg);
  --io-btn-bg:rgba(244,242,236,.025);
  --io-btn-border:var(--io-action-line);
  position:relative!important;
  isolation:isolate;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:50px!important;
  padding:0 30px!important;
  border:1px solid var(--io-btn-border)!important;
  border-radius:1px!important;
  background-color:var(--io-btn-bg)!important;
  background-image:
    linear-gradient(var(--io-btn-fg),var(--io-btn-fg)),
    linear-gradient(var(--io-btn-fg),var(--io-btn-fg));
  background-repeat:no-repeat!important;
  background-position:left 10px top -1px,right 10px bottom -1px!important;
  background-size:18px 1px,18px 1px!important;
  color:var(--io-btn-fg)!important;
  text-decoration:none!important;
  font-size:9.5px!important;
  overflow:hidden!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0),0 0 0 rgba(0,0,0,0)!important;
  transform:translate3d(0,0,0);
  transition:
    transform .55s var(--io-action-ease),
    color .45s ease,
    border-color .55s var(--io-action-ease),
    background-color .55s var(--io-action-ease),
    background-size .65s var(--io-action-ease),
    box-shadow .65s var(--io-action-ease)!important;
  -webkit-tap-highlight-color:transparent!important;
}

:where(
  .btn,
  .btn-wa,
  .hero-cta,
  .io-gallery-toggle,
  .form-side form button,
  .modal form button:not(.x),
  section.contact form button,
  .contact form button,
  form button[type="submit"]
):not(#mnav-pill)::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  top:-35%!important;
  bottom:-35%!important;
  left:-48%!important;
  width:30%!important;
  background:linear-gradient(90deg,transparent,rgba(244,242,236,.16),transparent)!important;
  transform:skewX(-18deg) translateX(0)!important;
  transform-origin:center!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:transform .9s var(--io-action-ease),opacity .25s ease!important;
}

:where(
  .btn,
  .btn-wa,
  .hero-cta,
  .io-gallery-toggle,
  .form-side form button,
  .modal form button:not(.x),
  section.contact form button,
  .contact form button,
  form button[type="submit"]
):not(#mnav-pill)::after{
  content:""!important;
  position:absolute!important;
  inset:4px!important;
  z-index:-1!important;
  border:1px solid rgba(244,242,236,0)!important;
  pointer-events:none!important;
  transition:border-color .55s var(--io-action-ease),inset .55s var(--io-action-ease)!important;
}

@media(hover:hover) and (pointer:fine){
  :where(
    .btn,
    .btn-wa,
    .hero-cta,
    .io-gallery-toggle,
    .form-side form button,
    .modal form button:not(.x),
    section.contact form button,
    .contact form button,
    form button[type="submit"]
  ):not(#mnav-pill):hover{
    color:var(--io-action-fg)!important;
    border-color:var(--io-action-line-strong)!important;
    background-color:rgba(244,242,236,.075)!important;
    background-size:42px 1px,42px 1px!important;
    box-shadow:inset 0 0 0 1px rgba(244,242,236,.045),0 14px 36px rgba(0,0,0,.28)!important;
    transform:translate3d(0,-2px,0)!important;
  }
  :where(
    .btn,
    .btn-wa,
    .hero-cta,
    .io-gallery-toggle,
    .form-side form button,
    .modal form button:not(.x),
    section.contact form button,
    .contact form button,
    form button[type="submit"]
  ):not(#mnav-pill):hover::before{
    opacity:1!important;
    transform:skewX(-18deg) translateX(520%)!important;
  }
  :where(
    .btn,
    .btn-wa,
    .hero-cta,
    .io-gallery-toggle,
    .form-side form button,
    .modal form button:not(.x),
    section.contact form button,
    .contact form button,
    form button[type="submit"]
  ):not(#mnav-pill):hover::after{
    inset:5px!important;
    border-color:rgba(244,242,236,.10)!important;
  }
}

:where(
  .btn,
  .btn-wa,
  .hero-cta,
  .io-gallery-toggle,
  .form-side form button,
  .modal form button:not(.x),
  section.contact form button,
  .contact form button,
  form button[type="submit"]
):not(#mnav-pill):active,
:where(
  .btn,
  .btn-wa,
  .hero-cta,
  .io-gallery-toggle,
  .form-side form button,
  .modal form button:not(.x),
  section.contact form button,
  .contact form button,
  form button[type="submit"]
):not(#mnav-pill).io-activated{
  transform:translate3d(0,1px,0) scale(.975)!important;
  border-color:rgba(244,242,236,.9)!important;
  background-color:rgba(244,242,236,.105)!important;
  box-shadow:inset 0 0 0 1px rgba(244,242,236,.09),0 3px 10px rgba(0,0,0,.22)!important;
  transition-duration:.12s!important;
}

/* TEXT ACTIONS: a moving architectural rail rather than a generic underline. */
:where(.fcta,.el-explore,.cta,.brand-action):not(.btn):not(.btn-wa){
  position:relative!important;
  isolation:isolate;
  display:inline-flex!important;
  align-items:center!important;
  min-height:38px!important;
  padding:8px 2px 9px 31px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--io-action-fg)!important;
  text-decoration:none!important;
  font-size:9.5px!important;
  transform:translate3d(0,0,0);
  transition:color .4s ease,transform .6s var(--io-action-ease),opacity .4s ease!important;
  -webkit-tap-highlight-color:transparent!important;
}
:where(.fcta,.el-explore,.cta,.brand-action):not(.btn):not(.btn-wa)::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:50%!important;
  width:18px!important;
  height:1px!important;
  background:currentColor!important;
  opacity:.72!important;
  transform:translateY(-50%)!important;
  transform-origin:left center!important;
  transition:width .65s var(--io-action-ease),opacity .4s ease!important;
}
:where(.fcta,.el-explore,.cta,.brand-action):not(.btn):not(.btn-wa)::after{
  content:""!important;
  position:absolute!important;
  left:31px!important;
  right:2px!important;
  bottom:2px!important;
  height:1px!important;
  background:currentColor!important;
  opacity:.42!important;
  transform:scaleX(.22)!important;
  transform-origin:left center!important;
  transition:transform .75s var(--io-action-ease),opacity .4s ease!important;
}
@media(hover:hover) and (pointer:fine){
  :where(.fcta,.el-explore,.cta,.brand-action):not(.btn):not(.btn-wa):hover{
    color:#fff!important;
    transform:translate3d(4px,0,0)!important;
  }
  :where(.fcta,.el-explore,.cta,.brand-action):not(.btn):not(.btn-wa):hover::before{
    width:24px!important;
    opacity:1!important;
  }
  :where(.fcta,.el-explore,.cta,.brand-action):not(.btn):not(.btn-wa):hover::after{
    transform:scaleX(1)!important;
    opacity:.86!important;
  }
}
:where(.fcta,.el-explore,.cta,.brand-action):not(.btn):not(.btn-wa):active,
:where(.fcta,.el-explore,.cta,.brand-action):not(.btn):not(.btn-wa).io-activated{
  transform:translate3d(2px,1px,0) scale(.985)!important;
  opacity:.78!important;
  transition-duration:.12s!important;
}

/* Range controls retain a framed architectural language. */
.frange-link{
  position:relative!important;
  isolation:isolate;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:0 18px!important;
  border:1px solid rgba(244,242,236,.20)!important;
  border-radius:1px!important;
  background:rgba(244,242,236,.018)!important;
  color:rgba(244,242,236,.72)!important;
  font-size:8px!important;
  text-decoration:none!important;
  overflow:hidden!important;
  transform:none!important;
  transition:color .45s ease,border-color .55s var(--io-action-ease),background-color .55s var(--io-action-ease),transform .55s var(--io-action-ease)!important;
}
.frange-link::before{
  content:""!important;
  position:absolute!important;
  inset:auto 12px 0 12px!important;
  height:1px!important;
  background:#f4f2ec!important;
  transform:scaleX(0)!important;
  transform-origin:center!important;
  transition:transform .65s var(--io-action-ease)!important;
  z-index:-1!important;
}
.frange-link::after{content:none!important}
@media(hover:hover) and (pointer:fine){
  .frange-link:hover{
    color:#fff!important;
    border-color:rgba(244,242,236,.56)!important;
    background:rgba(244,242,236,.065)!important;
    transform:translateY(-2px)!important;
  }
  .frange-link:hover::before{transform:scaleX(1)!important}
}
.frange-link:active,.frange-link.io-activated{transform:translateY(0) scale(.975)!important}

/* WhatsApp action remains recognisable, but joins the same material language. */
.wa-float{
  border:1px solid rgba(244,242,236,.22)!important;
  background:rgba(9,9,9,.92)!important;
  color:var(--io-action-fg)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.34)!important;
  transition:transform .55s var(--io-action-ease),border-color .5s ease,background-color .5s ease!important;
}
@media(hover:hover) and (pointer:fine){
  .wa-float:hover{transform:translateY(-3px)!important;border-color:rgba(244,242,236,.62)!important;background:rgba(20,20,20,.96)!important}
}
.wa-float:active{transform:translateY(0) scale(.96)!important}

/* MENU CONTROL: icon anchored, label optically centred, always black. */
#mnav-pill{
  position:fixed!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:164px!important;
  height:52px!important;
  padding:0 22px!important;
  border:1px solid rgba(244,242,236,.20)!important;
  border-radius:2px!important;
  background:rgba(8,8,8,.94)!important;
  background-image:
    linear-gradient(rgba(244,242,236,.72),rgba(244,242,236,.72)),
    linear-gradient(rgba(244,242,236,.72),rgba(244,242,236,.72))!important;
  background-repeat:no-repeat!important;
  background-position:left 13px top -1px,right 13px bottom -1px!important;
  background-size:20px 1px,20px 1px!important;
  color:var(--io-action-fg)!important;
  font-family:var(--font-brand)!important;
  font-size:9.5px!important;
  font-weight:400!important;
  letter-spacing:var(--io-action-track)!important;
  line-height:1!important;
  text-transform:uppercase!important;
  overflow:hidden!important;
  box-shadow:0 12px 30px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.018)!important;
  transform:translate3d(0,0,0)!important;
  transition:transform .55s var(--io-action-ease),border-color .55s var(--io-action-ease),background-color .55s ease,background-size .65s var(--io-action-ease),box-shadow .55s ease!important;
  -webkit-tap-highlight-color:transparent!important;
}
#mnav-pill .mnp-ic{
  position:absolute!important;
  left:21px!important;
  top:50%!important;
  width:18px!important;
  margin:0!important;
  gap:5px!important;
  transform:translateY(-50%)!important;
}
#mnav-pill .mnp-ic span{
  width:18px!important;
  height:1px!important;
  border-radius:0!important;
  background:rgba(244,242,236,.82)!important;
  background-image:none!important;
  transform-origin:center!important;
}
#mnav-pill .mnp-t{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:1px 0 0!important;
  color:var(--io-action-fg)!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  line-height:1!important;
  text-align:center!important;
  transform:none!important;
}
@media(hover:hover) and (pointer:fine){
  #mnav-pill:hover{
    background-color:rgba(16,16,16,.97)!important;
    color:#fff!important;
    border-color:rgba(244,242,236,.58)!important;
    background-size:44px 1px,44px 1px!important;
    box-shadow:0 16px 40px rgba(0,0,0,.38),inset 0 0 0 1px rgba(244,242,236,.04)!important;
    transform:translate3d(0,-2px,0)!important;
  }
}
#mnav-pill:active,#mnav-pill.io-activated{
  background-color:rgba(14,14,14,.98)!important;
  color:#fff!important;
  border-color:rgba(244,242,236,.76)!important;
  transform:translate3d(0,1px,0) scale(.982)!important;
  transition-duration:.12s!important;
}
body.imenu-open #mnav-pill .mnp-ic span:nth-child(1){transform:translateY(3px) rotate(45deg)!important}
body.imenu-open #mnav-pill .mnp-ic span:nth-child(2){transform:translateY(-3px) rotate(-45deg)!important}

@media(max-width:860px){
  #mnav-pill{
    left:16px!important;
    right:16px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-width:0!important;
    height:52px!important;
    padding:0 20px!important;
  }
  #mnav-pill .mnp-ic{left:20px!important}
  :where(
    .btn,.btn-wa,.hero-cta,.io-gallery-toggle,
    .form-side form button,.modal form button:not(.x),
    section.contact form button,.contact form button,form button[type="submit"]
  ):not(#mnav-pill){
    min-height:48px!important;
    padding-left:20px!important;
    padding-right:20px!important;
    font-size:8.8px!important;
  }
  :where(.fcta,.el-explore,.cta,.brand-action):not(.btn):not(.btn-wa){font-size:8.8px!important}
}

@media(max-width:360px){
  :where(
    .btn,.btn-wa,.hero-cta,.io-gallery-toggle,
    .form-side form button,.modal form button:not(.x),
    section.contact form button,.contact form button,form button[type="submit"]
  ):not(#mnav-pill){
    padding-left:16px!important;
    padding-right:16px!important;
    font-size:8.2px!important;
  }
  #mnav-pill{left:12px!important;right:12px!important}
}

/* Slim architectural cursor. The legacy dot is retired rather than layered. */
#cursor{display:none!important}
#io-cursor{
  position:fixed;
  top:0;
  left:0;
  z-index:100500;
  width:22px;
  height:22px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:difference;
  will-change:transform,width,height,border-radius,opacity;
  transition:width .22s var(--io-action-ease),height .22s var(--io-action-ease),border-radius .22s var(--io-action-ease),border-color .18s ease,background-color .18s ease,opacity .14s ease;
}
#io-cursor::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%) rotate(45deg);
  transition:width .2s var(--io-action-ease),height .2s var(--io-action-ease),border-radius .2s var(--io-action-ease),opacity .16s ease;
}
html.io-cursor-enabled #io-cursor.io-visible{opacity:1}
html.io-cursor-enabled #io-cursor.io-interactive{
  width:42px;
  height:14px;
  border-radius:999px;
  border-color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.055);
}
html.io-cursor-enabled #io-cursor.io-interactive::after{
  width:12px;
  height:1px;
  border-radius:0;
}
html.io-cursor-enabled #io-cursor.io-down{
  width:32px;
  height:10px;
  background:rgba(255,255,255,.15);
}
@media(hover:hover) and (pointer:fine){
  html.io-cursor-enabled *,html.io-cursor-enabled *::before,html.io-cursor-enabled *::after{cursor:none!important}
  html.io-cursor-enabled input,
  html.io-cursor-enabled textarea,
  html.io-cursor-enabled [contenteditable="true"]{cursor:text!important}
}
@media(hover:none),(pointer:coarse){#io-cursor{display:none!important}}

@media(prefers-reduced-motion:reduce){
  :where(.btn,.btn-wa,.fcta,.el-explore,.cta,.frange-link,.brand-action,#mnav-pill){transition-duration:.15s!important}
  #io-cursor{display:none!important}
}

/* Final cursor and focus tuning. */
#io-cursor{width:16px;height:16px;border-color:rgba(255,255,255,.62)}
html.io-cursor-enabled #io-cursor.io-interactive{width:28px;height:8px;background:transparent;border-color:rgba(255,255,255,.82)}
html.io-cursor-enabled #io-cursor.io-interactive::after{width:8px;height:1px}
html.io-cursor-enabled #io-cursor.io-down{width:22px;height:6px;background:rgba(255,255,255,.10)}
html.io-cursor-enabled #io-cursor.io-text{opacity:0!important}

:where(
  .btn,.btn-wa,.hero-cta,.io-gallery-toggle,
  .form-side form button,.modal form button:not(.x),
  section.contact form button,.contact form button,form button[type="submit"],
  .fcta,.el-explore,.cta,.brand-action,.frange-link,#mnav-pill,.wa-float
):focus-visible{
  outline:none!important;
  border-color:rgba(244,242,236,.92)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.92),0 0 0 2px rgba(244,242,236,.72)!important;
}

/* Specificity lock: legacy page CSS must not demote brand-action typography. */
html body :is(
  .btn,
  .btn-wa,
  .fcta,
  .el-explore,
  .cta,
  .frange-link,
  .brand-action,
  .io-gallery-toggle,
  .hero-cta,
  .wa-float,
  #mnav-pill,
  .form-side form button,
  .modal form button:not(.x),
  section.contact form button,
  .contact form button,
  form button[type="submit"]
){
  font-family:var(--font-brand)!important;
  font-weight:400!important;
  font-style:normal!important;
  text-transform:uppercase!important;
  letter-spacing:.32em!important;
  line-height:1!important;
}

/* Z195: exact frame-synchronised cursor tracking. Position never eases behind the pointer. */
#io-cursor{transform:translate3d(-100px,-100px,0) translate3d(-50%,-50%,0);contain:layout style paint;backface-visibility:hidden;}