/* Remint chrome: wordmark, header, phone menu, bottom bar, WhatsApp float, lead form. Owner: A1. Uses base.css tokens. */

/* wordmark */
.wordmark{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;text-decoration:none;font-size:28px;font-weight:800;font-stretch:112%;letter-spacing:-.03em;line-height:1;-webkit-tap-highlight-color:transparent}
.wordmark img{width:34px;height:34px;flex:none}
.wordmark span{display:block;padding-bottom:3px}

/* header: transparent over the hero, a solid ink pill after 80px of scroll */
.site-header{position:fixed;left:0;right:0;top:0;z-index:60;padding:14px var(--gutter) 0;pointer-events:none;transition:transform .45s var(--ease-out)}
.site-header.is-hidden{transform:translateY(-140%)}
.site-header__bar{position:relative;pointer-events:auto;display:flex;align-items:center;gap:32px;max-width:var(--maxw);height:64px;margin-inline:auto;padding:0;border-radius:14px;background-color:transparent;transition:max-width .4s var(--ease-out),padding .4s var(--ease-out),background-color .3s,box-shadow .3s}
.site-header.is-pill .site-header__bar{max-width:1180px;padding:0 10px 0 20px;background-color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 14px 34px rgba(8,11,20,.42)}
.site-nav{display:flex;gap:4px;margin-left:auto}
.site-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:rgba(244,241,234,.82);font-size:.98rem;font-weight:580;font-stretch:104%;text-decoration:none;transition:color .2s}
.site-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:2px;border-radius:1px;background:var(--mint);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease-out)}
.site-nav a.is-active{color:#fff}
.site-nav a.is-active::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.site-nav a:hover{color:#fff}.site-nav a:hover::after{transform:scaleX(1)}}
.site-header__cta{flex:none}
.menu-btn,.menu-scrim,.site-menu{display:none}

/* phones and tablets: slim solid bar, compact menu, bottom bar */
@media (max-width:899.98px){
  .site-header{padding:0}
  .site-header.is-hidden{transform:none}
  .site-header__bar{max-width:none;height:calc(64px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));gap:12px;border-radius:0;background-color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.08)}
  .site-header.is-pill .site-header__bar{max-width:none;padding:env(safe-area-inset-top,0px) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));box-shadow:0 1px 0 rgba(255,255,255,.08)}
  .wordmark{font-size:24px}
  .wordmark img{width:32px;height:32px}
  .site-nav,.site-header__cta{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;margin-left:auto;min-height:44px;padding:0 14px 0 16px;border-radius:var(--r-md);color:#fff;font-size:.98rem;font-weight:640;font-stretch:104%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24);-webkit-tap-highlight-color:transparent;transition:background-color .2s,transform .35s var(--ease-spring)}
  .menu-btn:active{transform:scale(.97)}
  .menu-btn[aria-expanded=true]{background-color:rgba(255,255,255,.1)}
  .menu-btn__icon{position:relative;width:18px;height:12px}
  .menu-btn__icon i{position:absolute;left:0;right:0;height:2px;border-radius:1px;background-color:currentColor;transition:transform .35s var(--ease-out)}
  .menu-btn__icon i:first-child{top:1px}
  .menu-btn__icon i:last-child{bottom:1px}
  .menu-btn[aria-expanded=true] .menu-btn__icon i:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-btn[aria-expanded=true] .menu-btn__icon i:last-child{transform:translateY(-4px) rotate(-45deg)}
  .menu-scrim{display:block;position:fixed;left:0;right:0;bottom:0;top:calc(64px + env(safe-area-inset-top,0px));pointer-events:auto;background-color:rgba(8,11,20,.62);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
  .site-menu{display:block;position:fixed;left:12px;right:12px;top:calc(64px + env(safe-area-inset-top,0px) + 8px);max-height:calc(100dvh - 64px - 24px - env(safe-area-inset-top,0px));overflow:auto;pointer-events:auto;padding:4px 18px 18px;border-radius:var(--r-lg);background-color:var(--ink-2);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 48px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s,transform .3s var(--ease-out),visibility 0s .3s}
  .site-header.menu-open .menu-scrim{opacity:1;visibility:visible;transition-delay:0s}
  .site-header.menu-open .site-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .site-menu__link{position:relative;display:flex;align-items:center;min-height:56px;color:#fff;font-size:1.2rem;font-weight:650;font-stretch:106%;letter-spacing:-.01em;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1);transition:padding-left .3s var(--ease-out),color .2s}
  .site-menu__link::before{content:"";position:absolute;left:-18px;top:50%;width:4px;height:0;margin-top:0;border-radius:2px;background-color:var(--mint);transition:height .25s var(--ease-out),margin-top .25s var(--ease-out)}
  .site-menu__link:active{padding-left:8px;color:var(--mint)}
  .site-menu__link:active::before{height:24px;margin-top:-12px}
  .site-menu__actions{display:grid;gap:10px;margin-top:18px}
  .bottom-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left));background-color:var(--ink);box-shadow:0 -1px 0 rgba(255,255,255,.1);transform:translateY(110%);visibility:hidden;transition:transform .4s var(--ease-out),visibility 0s .4s}
  .bottom-bar.is-on{transform:none;visibility:visible;transition-delay:0s}
  .bottom-bar .btn{min-height:48px;padding:0 10px;font-size:.96rem}
}
.bottom-bar{display:none}
@media (max-width:899.98px){.bottom-bar{display:grid}}

/* WhatsApp float (desktop only, hidden until a number is set in config.js) */
.wa-float{display:none}
@media (min-width:900px){
  .wa-float{position:fixed;right:24px;bottom:24px;z-index:50;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background-color:var(--mint);color:var(--ink);box-shadow:0 10px 28px rgba(8,11,20,.32);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .45s var(--ease-spring)}
  .wa-float .ico{width:28px;height:28px}
  .wa-float:active{transform:scale(.95)}
}
@media (hover:hover) and (pointer:fine){.wa-float:hover{transform:translateY(-3px)}}

/* lead form (used in the hero, the join block and on subpages) */
.lead-form{width:100%;container-type:inline-size}
.lead-form__fields{display:grid}
.lead-form .phone-field{min-height:58px}
.lead-form .phone-field select{min-height:58px}
.lead-form .phone-field input{min-height:58px}
.lead-form .field{min-height:58px}
.lead-form__email{display:block;margin-top:12px}
.lead-form .check{margin-top:14px}
@media (max-width:899.98px){.lead-form .check a{padding-block:13px}}
.lead-form .btn{margin-top:14px;min-height:56px}
.lead-form .btn[aria-busy=true]{opacity:.8;pointer-events:none}
.lead-form .btn[aria-busy=true] span::after{content:"";display:inline-block;width:.9em;height:.9em;margin-left:10px;vertical-align:-.12em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lf-spin .7s linear infinite}
@keyframes lf-spin{to{transform:rotate(360deg)}}
.lead-form .is-invalid .phone-field,.lead-form .phone-field.is-invalid,.lead-form .field[aria-invalid=true]{border-color:var(--coral)}
.lead-form .phone-field[aria-invalid=true]{border-color:var(--coral)}
.lead-form .check input[aria-invalid=true]{border-color:var(--coral);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 30%,transparent)}
.lead-form .field-error{margin-top:8px}
@container (min-width:520px){
  .lead-form__fields{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:12px}
  .lead-form__fields .phone-field{grid-column:1;grid-row:1}
  .lead-form__fields .lead-form__email{grid-column:2;grid-row:1;margin-top:0}
  .lead-form__fields [data-err=whatsapp]{grid-column:1/-1;grid-row:2}
  .lead-form__fields .check{grid-column:1/-1;grid-row:3}
  .lead-form__fields [data-err=consent]{grid-column:1/-1;grid-row:4}
  .lead-form__fields .btn{grid-column:1/-1;grid-row:5}
}
/* success and error messages: always an ink panel so they read on any ground */
.lead-form [data-msg=success],.lead-form [data-msg=error]{position:relative;padding:18px 20px 18px 58px;border-radius:var(--r-md);background-color:var(--ink);color:#fff;font-weight:560;line-height:1.45;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);outline:none}
.lead-form [data-msg=success]::before,.lead-form [data-msg=error]::before{content:"";position:absolute;left:18px;top:18px;width:26px;height:26px;border-radius:7px;background-color:var(--mint)}
.lead-form [data-msg=success]::after{content:"";position:absolute;left:26px;top:25px;width:11px;height:6px;border-left:2.4px solid var(--ink);border-bottom:2.4px solid var(--ink);transform:rotate(-45deg)}
.lead-form [data-msg=error]::before{background-color:var(--coral)}
.lead-form [data-msg=error]::after{content:"";position:absolute;left:29.5px;top:24px;width:3px;height:9px;border-radius:2px;background-color:var(--ink);box-shadow:0 12px 0 0 var(--ink)}
.lead-form [data-msg=error] a{color:var(--mint);font-weight:640}
.lead-form [data-msg=success]:focus-visible{outline:2px solid var(--mint);outline-offset:3px}