/* i3Automations - NueyStyle
   Base: reset, type scale, buttons, header, mobile nav, footer, reveal. */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,video,svg,canvas{ display:block; max-width:100%; }
[hidden]{ display:none !important; }

button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,dl,dd,blockquote{ margin:0; }
table{ border-collapse:collapse; width:100%; }

::selection{ background:var(--cyan-light); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--accent-ink,#2C6396);
  outline-offset:2px;
  border-radius:4px;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--paper);
  color:var(--ink);
  padding:14px 22px;
  border-radius:var(--radius-full);
  font-weight:500;
}
.skip-link:focus{ left:20px; top:20px; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.band{
  background:var(--surface);
  color:var(--on);
  padding-block:var(--section-y);
  position:relative;
}

.sheet{
  margin-inline:8px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding-block:var(--section-y-sheet);
}
@media (min-width:1024px){
  .sheet{ margin-inline:16px; border-radius:var(--radius-xl); }
}

/* Type -------------------------------------------------------------------- */

.display{
  font-family:var(--font-display);
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  font-weight:500;
}
.h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--tr-h1); font-weight:500; }
.h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--tr-h2); font-weight:500; }
.h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--tr-h3); font-weight:500; }
.h4{ font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--tr-h4); font-weight:500; }
.lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); letter-spacing:var(--tr-lead); font-weight:400; }
.small{ font-size:var(--fs-small); line-height:1.55; }

.muted{ color:var(--on-muted); }
.faint{ color:var(--on-faint); }
.mono{ font-family:var(--font-mono); font-size:.92em; letter-spacing:.01em; }
.nowrap{ white-space:nowrap; }

.metric{
  font-size:var(--fs-metric);
  line-height:1;
  letter-spacing:var(--tr-display);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

.eyebrow{
  display:inline-block;
  font-size:var(--fs-eyebrow);
  line-height:1.2;
  letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;
  font-weight:500;
  color:var(--on-muted);
}

.measure{ max-width:62ch; }
em.soft{ font-style:normal; color:var(--on-muted); }

.prose p + p{ margin-top:var(--space-4); }
.prose a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }

/* Buttons ----------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:16px;
  height:60px;
  padding:0 8px 0 28px;
  border-radius:var(--radius-full);
  font-size:var(--fs-body);
  font-weight:500;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}

.btn-ic{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
  transition:transform var(--base) var(--ease),background var(--fast) var(--ease);
}
.btn-ic svg{ width:16px; height:16px; }

.btn-primary{ background:var(--btn-bg); color:var(--btn-fg); }
.btn-primary .btn-ic{ background:var(--btn-ic-bg); color:var(--btn-ic-fg); }
.btn-primary:hover .btn-ic{ transform:translateX(3px); }
.b-white .btn-primary:hover,.b-light .btn-primary:hover{ background:var(--navy-deep); }
.b-dark .btn-primary:hover{ background:#E9F0F6; }

.btn-secondary{
  background:var(--raised);
  color:var(--on);
  border:1px solid var(--hairline-strong);
}
.btn-secondary .btn-ic{ background:var(--on); color:var(--raised); }
.btn-secondary:hover .btn-ic{ transform:translateX(3px); }

.btn-sm{ height:48px; padding:0 6px 0 22px; gap:12px; }
.btn-sm .btn-ic{ width:36px; height:36px; }
.btn-sm .btn-ic svg{ width:14px; height:14px; }

.btn-text{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  font-size:var(--fs-small);
  color:var(--on);
  position:relative;
  padding-bottom:3px;
}
.btn-text svg{ width:14px; height:14px; transition:transform var(--fast) var(--ease); }
.btn-text::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:1px;width:100%;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--base) var(--ease);
}
.btn-text:hover::after{ transform:scaleX(1); }
.btn-text:hover svg{ transform:translateX(3px); }

.actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* Chips and tags ---------------------------------------------------------- */

.tag-list{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 18px;
  border-radius:var(--radius-full);
  background:var(--sunken);
  font-size:var(--fs-small);
  color:var(--on-muted);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.b-dark .tag{ background:rgba(255,255,255,.07); }
.tag:hover{ background:var(--ink); color:#FFFFFF; }
.b-dark .tag:hover{ background:rgba(255,255,255,.16); color:#FFFFFF; }
.tag--certified{ color:var(--on); font-weight:500; }
.tag--certified::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}

/* Frost ------------------------------------------------------------------- */

.frost{
  background:var(--frost-solid);
  border:1px solid var(--frost-edge);
  color:var(--frost-fg);
}
@supports (backdrop-filter:blur(1px)){
  .frost{
    background:var(--frost-tint);
    -webkit-backdrop-filter:var(--frost);
    backdrop-filter:var(--frost);
  }
}

/* Header ------------------------------------------------------------------ */

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  padding:14px var(--gutter);
  pointer-events:none;
  transition:transform var(--base) var(--ease-glide),opacity var(--base) var(--ease-glide);
}
.site-header > *{ pointer-events:auto; }
.site-header[data-hidden="true"]{
  transform:translateY(-140%);
  opacity:0;
  visibility:hidden;
}

.header-bar{
  max-width:var(--container);
  margin-inline:auto;
  height:64px;
  padding:0 10px 0 20px;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  gap:24px;
  transition:background var(--base) var(--ease-glide),border-color var(--base) var(--ease-glide),box-shadow var(--base) var(--ease-glide);
}
.site-header[data-scrolled="true"] .header-bar{
  --frost-tint:rgba(255,255,255,.82);
  box-shadow:var(--shadow-2);
}

.header-logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  color:var(--ink);
}
.header-logo img{ height:22px; width:auto; }
.header-wordmark{
  display:flex;
  flex-direction:column;
  line-height:1.06;
  font-weight:500;
  letter-spacing:-.02em;
  font-size:1rem;
}
.header-wordmark span{
  font-size:.5625rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--text-muted);
}

.header-nav{
  display:none;
  margin-inline:auto;
  gap:26px;
  align-items:center;
}
.header-nav a{
  font-size:var(--fs-small);
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--ink);
  position:relative;
  padding-block:6px;
  transform:translateY(var(--dock-lift,0px)) scale(var(--dock-scale,1));
  transform-origin:50% 60%;
  transition:color var(--base) var(--ease-glide),opacity var(--fast) var(--ease);
}
.header-nav a::after{
  content:"";
  position:absolute;
  left:50%;bottom:0;
  width:4px;height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:currentColor;
  opacity:var(--dock-dot,0);
  transform:scale(var(--dock-dot,0));
}
.header-nav a[aria-current="page"]{ color:var(--navy); }
.header-nav a[aria-current="page"]::after{
  opacity:1;
  transform:scale(1);
  background:var(--cyan);
}
@media (prefers-reduced-motion:reduce){
  .header-nav a{ transform:none; }
  .header-nav a::after{ display:none; }
  .header-nav a:hover{ opacity:.7; }
}

.header-cta{
  margin-left:auto;
  display:none;
  height:44px;
  padding:0 22px;
  align-items:center;
  border-radius:var(--radius-full);
  background:var(--navy);
  color:#FFFFFF;
  font-size:var(--fs-small);
  font-weight:500;
  letter-spacing:-.01em;
  transition:background var(--fast) var(--ease);
}
.header-cta:hover{ background:var(--navy-deep); }

.header-toggle{
  margin-left:auto;
  width:44px;height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--paper);
  color:var(--ink);
  flex:none;
}
.header-toggle svg{ width:18px; height:18px; }

@media (min-width:1024px){
  .header-nav{ display:flex; }
  .header-cta{ display:inline-flex; }
  .header-toggle{ display:none; }
  .site-header{ padding-top:20px; }
  .header-bar{ padding-left:24px; }
}

/* Mobile navigation ------------------------------------------------------- */

.mobile-nav{
  position:fixed;
  inset:0;
  z-index:70;
  visibility:hidden;
  transition:visibility var(--base);
}
.mobile-nav[data-open="true"]{ visibility:visible; }

.mobile-nav-scrim{
  position:absolute;
  inset:0;
  background:rgba(6,36,64,.46);
  opacity:0;
  transition:opacity var(--base) var(--ease-glide);
}
.mobile-nav[data-open="true"] .mobile-nav-scrim{ opacity:1; }

.mobile-nav-sheet{
  --frost-tint:rgba(255,255,255,.84);
  position:absolute;
  top:14px;
  left:var(--gutter);
  right:var(--gutter);
  max-height:calc(100dvh - 28px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);
  padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom));
  color:var(--on);
  opacity:0;
  transform:translateY(-10px) scale(.98);
  transform-origin:50% 0;
  transition:opacity var(--base) var(--ease-glide),transform var(--base) var(--ease-glide);
}
.mobile-nav[data-open="true"] .mobile-nav-sheet{ opacity:1; transform:none; }

.mobile-nav-top{
  height:64px;
  flex:none;
  padding:0 10px 0 20px;
  display:flex;
  align-items:center;
  gap:10px;
}
.mobile-nav-top img{ height:22px; width:auto; }
.mobile-nav-close{
  margin-left:auto;
  width:44px;height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--sunken);
  color:var(--on);
  flex:none;
}
.mobile-nav-close svg{ width:18px; height:18px; }

.mobile-nav-links{
  display:flex;
  flex-direction:column;
  padding:var(--space-4) 20px 0;
}
.mobile-nav-links a{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:500;
  letter-spacing:var(--tr-h3);
  line-height:1.2;
  color:var(--on);
  padding-block:11px;
  opacity:0;
  transform:translateY(10px);
  transition:
    opacity var(--base) var(--ease) calc(var(--nav-index,0) * 40ms + 70ms),
    transform var(--base) var(--ease) calc(var(--nav-index,0) * 40ms + 70ms),
    color var(--fast) var(--ease);
}
.mobile-nav[data-open="true"] .mobile-nav-links a{ opacity:1; transform:none; }
.mobile-nav-links a:active{ color:var(--accent-ink); }
.mobile-nav-links a[aria-current="page"]{ color:var(--accent-ink); }

.mobile-nav-cta{ margin:var(--space-5) 20px 0; justify-content:space-between; }

@media (prefers-reduced-motion:reduce){
  .mobile-nav-links a{ opacity:1; transform:none; transition:color var(--fast) var(--ease); }
  .mobile-nav-sheet{ transition:opacity var(--base) var(--ease-glide); }
}
@media (max-height:560px){
  .mobile-nav-links{ padding-top:var(--space-2); }
  .mobile-nav-links a{ font-size:var(--fs-h4); padding-block:8px; }
  .mobile-nav-cta{ margin-top:var(--space-4); }
}

/* Mobile sticky call bar -------------------------------------------------- */

.mobile-cta-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:55;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  --frost-edge:rgba(6,36,64,.08);
  border-radius:0;
  border:0;
  border-top:1px solid var(--frost-edge);
  display:flex;
  gap:10px;
  transform:translateY(100%);
  transition:transform var(--base) var(--ease-glide);
}
.mobile-cta-bar[data-visible="true"]{ transform:translateY(0); }
.mobile-cta-bar a{
  flex:1;
  height:52px;
  border-radius:var(--radius-full);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-small);
  font-weight:500;
}
.mobile-cta-bar .cta-primary{ background:var(--navy); color:#FFFFFF; }
.mobile-cta-bar .cta-secondary{ border:1px solid var(--line); color:var(--ink); flex:0 0 52px; }
.mobile-cta-bar .cta-secondary svg{ width:20px; height:20px; }
@media (min-width:1024px){ .mobile-cta-bar{ display:none; } }

/* Footer ------------------------------------------------------------------ */

.site-footer{
  background:var(--ink);
  color:var(--text-invert);
  padding-block:var(--space-9) var(--space-6);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  overflow:hidden;
}
@media (min-width:1024px){
  .site-footer{ border-radius:var(--radius-xl) var(--radius-xl) 0 0; }
}
main:has(> .closing:last-child) + .site-footer{ border-radius:0; }

.footer-top{
  display:grid;
  gap:var(--space-8);
  margin-bottom:var(--space-9);
}
@media (min-width:768px){
  .footer-top{ grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr)); gap:var(--space-6); }
}
.footer-brand{ display:flex; flex-direction:column; gap:var(--space-5); align-items:flex-start; }
.footer-brand img{ height:36px; width:auto; }
.footer-brand p{ color:var(--text-invert-muted); max-width:34ch; }
.footer-col h2{
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;
  font-weight:500;
  color:var(--text-invert-muted);
  margin-bottom:var(--space-5);
}
.footer-col li + li{ margin-top:4px; }
.footer-col li{ font-size:var(--fs-small); color:rgba(255,255,255,.86); }
.footer-col a{
  display:inline-block;
  padding-block:4px;
  font-size:var(--fs-small);
  color:rgba(255,255,255,.86);
  transition:color var(--fast) var(--ease);
}
.footer-col a:hover{ color:var(--cyan-light); }
.footer-col .mono{ color:var(--text-invert-muted); }

.footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  justify-content:space-between;
  align-items:center;
  font-size:var(--fs-small);
  color:var(--text-invert-muted);
}
.footer-meta a{ transition:color var(--fast) var(--ease); }
.footer-meta a:hover{ color:var(--cyan-light); }
.footer-legal{ display:flex; gap:var(--space-5); }

.footer-wordmark{
  margin-top:var(--space-8);
  font-size:clamp(1.25rem,7vw,6.5rem);
  white-space:nowrap;
  line-height:1;
  letter-spacing:-.05em;
  font-weight:500;
  color:var(--navy);
  user-select:none;
  overflow:hidden;
  margin-bottom:calc(var(--space-6) * -1);
}

/* Storage notice ---------------------------------------------------------- */

.notice{
  position:fixed;
  left:var(--gutter);
  right:var(--gutter);
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:58;
  max-width:640px;
  margin-inline:auto;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
  padding:var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--base) var(--ease-glide),transform var(--base) var(--ease-glide);
}
.notice[data-visible="true"]{ opacity:1; transform:none; }
.notice p{ font-size:var(--fs-small); color:var(--ink); }
.notice b{ font-weight:500; }
.notice-actions{ display:flex; align-items:center; gap:var(--space-5); }
.notice-actions a{ font-size:var(--fs-small); color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.notice-actions button{
  margin-left:auto;
  height:40px;
  padding:0 20px;
  border-radius:var(--radius-full);
  background:var(--navy);
  color:#FFFFFF;
  font-size:var(--fs-small);
  font-weight:500;
}
@media (min-width:768px){
  .notice{ flex-direction:row; align-items:center; gap:var(--space-6); }
  .notice-actions{ margin-left:auto; flex:none; }
}
@media (max-width:1023px){
  .notice{ bottom:calc(76px + env(safe-area-inset-bottom)); }
}

/* Reveal ------------------------------------------------------------------ */

.reveal{
  --reveal-rise:24px;
  --reveal-scale:1;
  --reveal-duration:var(--slow);
  --reveal-delay:0ms;
  opacity:0;
}
.reveal[data-visible="true"]{
  animation:reveal-in var(--reveal-duration) var(--ease) var(--reveal-delay) both;
}
@keyframes reveal-in{
  from{ opacity:0; transform:translate3d(0,var(--reveal-rise),0) scale(var(--reveal-scale)); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; animation:none !important; }
}

@media (prefers-reduced-transparency:reduce){
  .frost{
    background:var(--frost-solid) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}