/* ============ Wise Floww — landing page ============ */
/* Fluid system: the whole 1440px Figma design is reproduced as a proportional
   zoom. The root font-size scales with the viewport width (1.111vw = 16px @1440),
   and EVERY dimension below is expressed in rem, so type, spacing and imagery
   all scale together and keep the Figma proportions at any width. */
:root{
  --ink:#0E1B2A;          /* near-black navy: big headings */
  --teal:#284E46;         /* intro dark-teal text (matches green hero) */
  --navy:#14202E;         /* headings / strong text */
  --muted:#6C7682;        /* body copy */
  --muted-2:#9AA0A8;      /* faint labels */
  --lime:#D0FF00;         /* accent */
  --green:#16A34A;        /* security badges */
  --line:#E5E5E5;         /* hairlines / borders */
  --line-soft:#ECECEC;
  --band:#FAFAFA;         /* light section band */
  --ph:#F5F3F1;           /* warm image placeholder */
  --ph-2:#F5F5F5;         /* cool image placeholder */
  --hero-1:#0c1a28;
  --hero-2:#0a1421;
  --side:11.25rem;        /* 180px @1440 — proportional page margin */
}

/* 13px floor (≤1170px) · 16px @1440 · grows to 30px (≈2700px) — proportional */
html{font-size:clamp(13px, 1.1111vw, 30px);-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

*{box-sizing:border-box;}
body,button,input,select,textarea{
  font-family:"Rules Trial",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
body{
  margin:0;
  color:var(--navy);
  background:#fff;
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.container{width:100%;margin:0 auto;padding:0 var(--side);}
/* fixed-nav offset so anchored sections aren't hidden under the bar */
#solutions,#security,#faq,#contact{scroll-margin-top:6rem;}

/* ---------- shared type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;
  font-size:.40625rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:#00272E;
  border:1px solid #A2C600;border-radius:.3125rem;
  padding:.5625rem 1rem;line-height:1;white-space:nowrap;
  background:#D0FF00;
}
.h2{
  font-size:2.375rem;line-height:1.1;font-weight:400;letter-spacing:-.022em;
  color:var(--ink);margin:0;text-wrap:balance;
}
.lead{
  font-size:.875rem;line-height:1.62;color:var(--muted);margin:0;max-width:47.5rem;
}
.section{padding:7.5rem 0;}

/* ---------- nav / hero ---------- */
.hero{
  position:relative;color:#fff;overflow:hidden;
  min-height:100vh;display:flex;flex-direction:column;
  background:
    linear-gradient(180deg, rgba(6,21,15,.55) 0%, rgba(6,21,15,.10) 28%, rgba(3,14,10,.30) 50%, rgba(3,14,10,.66) 78%, rgba(3,14,10,.90) 100%),
    url("hero-bg.png") center/cover no-repeat,
    linear-gradient(180deg,#06150F 0%,#030E0A 100%);
}
.hero::after{ /* faint vignette */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140% 120% at 50% -10%, rgba(255,255,255,.03), rgba(0,0,0,0) 45%);
}
.hero .container{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.7rem var(--side);
  transition:background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, padding .35s ease;
}
/* frosted glass + dark text once you scroll out of the hero — also slims down */
.nav.scrolled{
  background:rgba(244,244,242,.72);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 0 rgba(20,32,46,.07);
  padding-top:1.02rem;padding-bottom:1.02rem;
}
.nav.scrolled .brand{color:var(--navy);}
.nav.scrolled .nav-links a{color:rgba(20,32,46,.82);}
.nav.scrolled .nav-links a:hover{color:var(--navy);}
.nav.scrolled .nav-links>a::after{background:var(--navy);}
.nav.scrolled .lang a{color:rgba(20,32,46,.42);}
.nav.scrolled .lang a.active{color:var(--navy);}
.nav.scrolled .lang .sep{color:rgba(20,32,46,.26);}
.nav.scrolled .nav-toggle span{background:var(--navy);}
.brand{display:flex;align-items:center;gap:0;margin-top:0;}
.brand svg{display:block;height:1.2rem;width:auto;}
.nav-links{display:flex;align-items:center;gap:2.4rem;}
.nav-links a{font-size:.78125rem;color:rgba(255,255,255,.92);}
.nav-links a:hover{color:#fff;}
.nav-links>a{position:relative;padding-bottom:.35rem;}
.nav-links>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.nav-links>a:hover::after{transform:scaleX(1);}
.lang{display:flex;align-items:center;gap:.5rem;margin-left:1.5rem;font-size:.375rem;letter-spacing:.05em;}
.lang a{color:rgba(255,255,255,.42);}
.lang a.active{color:#fff;font-weight:600;}
.lang a:hover{color:#fff;}
.lang .sep{color:rgba(255,255,255,.28);}
/* hamburger — hidden on desktop, only shows in the mobile media queries below */
.nav-toggle{
  display:none;width:2.6rem;height:2.6rem;padding:0;margin:-.5rem -.5rem -.5rem 0;
  flex-direction:column;align-items:center;justify-content:center;gap:.36rem;
  background:none;border:0;cursor:pointer;position:relative;z-index:60;
}
.nav-toggle span{display:block;width:1.55rem;height:1.6px;border-radius:2px;background:#fff;
  transition:transform .3s ease,opacity .2s ease;}

.hero-inner{margin-top:auto;padding-bottom:12.5vh;position:relative;}
.hero h1{
  font-size:2.65rem;line-height:1.14;font-weight:600;letter-spacing:-.03em;
  margin:0;max-width:44rem;color:#fff;
}
.hero h1 .lime{color:var(--lime);}
.hero-sub{
  position:relative;margin:1.9rem 0 0;max-width:39rem;
  font-size:1rem;line-height:1.62;color:#fff;
}
.hero-rule{ /* white line from the left screen edge, aligned to subtitle top */
  position:absolute;top:.62em;right:100%;margin-right:2.5rem;
  width:100vw;height:1px;background:#fff;
}
.hero-actions{display:flex;align-items:center;gap:1.9rem;margin-top:5rem;}
.link-underline{
  position:relative;font-size:1rem;color:#fff;padding-bottom:.5625rem;
}
.link-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(1);transform-origin:left center;transition:transform .34s ease;
}
@keyframes underline-sweep{0%{transform:scaleX(0);}100%{transform:scaleX(1);}}
.link-underline:hover::after{transform:scaleX(0);}

/* ---------- intro ---------- */
.intro{padding-top:8.125rem;padding-bottom:7.5rem;overflow:hidden;}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:5.5rem;align-items:start;}
.intro .left{position:relative;}
.intro-rule{ /* dark line from the left screen edge, aligned to heading top */
  position:absolute;top:1rem;right:100%;margin-right:2.5rem;
  width:100vw;height:1px;background:#2E5249;
}
.intro h2{
  font-size:1.6875rem;line-height:1.32;font-weight:400;letter-spacing:-.016em;color:#00272E;margin:0;
}
.intro .right{padding-top:0;display:flex;flex-direction:column;align-items:flex-start;padding-left:6rem;}
.intro .right p{font-size:.9375rem;line-height:1.62;color:#00272E;margin:0;max-width:44rem;}
.intro .right .link-dark{display:inline-block;margin-top:3rem;}
.link-dark{position:relative;font-size:.875rem;color:#00272E;padding-bottom:.4rem;}
.link-dark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#00272E;transform:scaleX(1);transform-origin:left center;transition:transform .34s ease;}
.link-dark:hover::after{transform:scaleX(0);}

/* ---------- problem cards ---------- */
.reality{padding-top:2rem;}
.reality .head{max-width:66rem;margin-bottom:4.625rem;}
.reality .eyebrow{margin-bottom:1.875rem;}
.reality h2{margin-bottom:1.375rem;max-width:66rem;}
.reality .lead{max-width:61rem;text-wrap:balance;}
.cards-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;margin-left:-1.75rem;margin-right:-1.75rem;}
.pcard{padding:0 1.75rem;border-left:1px solid var(--line);display:flex;flex-direction:column;}
.pcard:first-child{border-left:0;}
.thumb{
  position:relative;width:100%;aspect-ratio:227/124;background:var(--ph);
  border-radius:.5625rem;overflow:hidden;margin-bottom:1.625rem;
}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.thumb:has(img)::before{display:none;}
.thumb::before{ /* subtle hatch */
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.025) 0 1px,transparent 1px 9px);
}
.pcard h3{font-size:.9375rem;font-weight:600;letter-spacing:-.012em;color:var(--navy);margin:0 0 .75rem;line-height:1.3;min-height:2.6em;}
.pcard p{font-size:.8125rem;line-height:1.55;color:var(--muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  height:calc(.8125rem * 1.55 * 3);}

/* ---------- connected system (band) ---------- */
.possible{background:var(--band);padding:7.5rem 0;}
.possible h2{max-width:60rem;margin-bottom:2.5rem;}
.possible .eyebrow{margin-bottom:1.875rem;}
.possible-cols{display:grid;grid-template-columns:1fr 1fr;gap:5rem;margin-bottom:2.5rem;align-items:start;}
.possible-cols h4{font-size:.9375rem;font-weight:600;color:var(--navy);margin:0 0 .75rem;letter-spacing:-.01em;}
.possible-cols p{font-size:.8125rem;line-height:1.55;color:var(--muted);margin:0;}
.feature-box{
  background:#F5F5F5;border:1px solid var(--line);border-radius:.875rem;padding:.875rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.8125rem;
}
.feature-box image-slot{width:100%;aspect-ratio:518/294;display:block;}

/* ---------- solutions ---------- */
.solutions .head{max-width:55rem;margin-bottom:4rem;}
.solutions .eyebrow{margin-bottom:1.875rem;}
.solutions h2{margin-bottom:1.375rem;}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.scard{
  border:1px solid var(--line);border-radius:.875rem;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
  transition:border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.scard:hover{border-color:#d4d4d4;box-shadow:0 1.125rem 2.5rem -1.75rem rgba(14,27,42,.35);transform:translateY(-3px);}
.scard .pic{
  position:relative;width:100%;aspect-ratio:347/150;background:var(--ph);overflow:hidden;
}
.scard .pic::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.025) 0 1px,transparent 1px 9px);}
.scard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.scard .pic:has(img)::before{display:none;}
.scard .body{padding:1.375rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1;}
.scard h3{font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--navy);margin:0 0 .625rem;}
.scard p{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:0 0 1.25rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  height:calc(.8125rem * 1.5 * 3);}
.scard .tag{
  margin-top:auto;padding-top:.9375rem;border-top:1px solid var(--line-soft);
  font-size:.75rem;color:var(--muted-2);letter-spacing:.005em;
}

/* ---------- security ---------- */
.security{padding:6rem 0;}
.sec-grid{display:grid;grid-template-columns:1fr .4fr;gap:3.25rem;align-items:stretch;}
.security .eyebrow{margin-bottom:1.5rem;}
.security h2{font-size:2.375rem;line-height:1.1;font-weight:400;letter-spacing:-.022em;margin:0 0 1.125rem;}
.security .lead{margin-bottom:2.5rem;font-size:.875rem;max-width:33rem;}
.sec-points{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.point{padding:1.5rem 1.15rem;}
.point:nth-child(odd){padding-left:0;}
.point:nth-child(1),.point:nth-child(2){padding-top:0;}
.point:nth-child(1),.point:nth-child(3){position:relative;}
.point:nth-child(1),.point:nth-child(2),.point:nth-child(3),.point:nth-child(4){border-bottom:1px solid var(--line);}
.sec-points .full{grid-column:1 / -1;display:flex;flex-direction:column;padding-bottom:0;}
.sec-points .full p{max-width:40rem;}
.point .num{
  width:1.25rem;height:1.25rem;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.5625rem;font-weight:600;
  margin-bottom:.8125rem;letter-spacing:0;
}
.point h4{font-size:.875rem;font-weight:600;color:var(--navy);margin:0 0 .4375rem;}
.point p{font-size:.78125rem;line-height:1.52;color:var(--muted);margin:0;max-width:17.25rem;}
.sec-right{margin-right:calc(-1 * var(--side));margin-top:3rem;}
.sec-panel{
  position:relative;width:100%;height:100%;min-height:22rem;background:var(--ph-2);
  border-radius:1rem 0 0 1rem;overflow:hidden;
}
.sec-panel::before{
  content:"";position:absolute;inset:0;opacity:.5;z-index:0;
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.022) 0 1px,transparent 1px 10px);
}
.sec-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;}

/* ---------- systems we connect ---------- */
.systems{padding:7.5rem 0;}
.systems .top{max-width:47.5rem;margin-bottom:4rem;}
.systems .eyebrow{margin-bottom:1.875rem;}
.systems h2{font-size:2.375rem;line-height:1.12;font-weight:400;margin:0 0 1.5rem;}
.connect-card{
  border:1px solid var(--line);border-radius:1.125rem;padding:3rem 3.25rem 3.25rem;background:#F5F5F3;
}
.connect-card .ch{margin-bottom:.5rem;}
.connect-card .ck{font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin:0 0 .875rem;}
.connect-card h3{font-size:1.6875rem;font-weight:500;letter-spacing:-.018em;color:var(--ink);margin:0 0 .875rem;}
.connect-card .sub{font-size:.875rem;line-height:1.6;color:var(--muted);margin:0 0 2.75rem;max-width:28rem;}
.int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:.5rem;overflow:hidden;}
.int-cell{padding:1.625rem 1.5rem;border-bottom:1px solid var(--line);border-right:1px solid var(--line);background:#fff;transition:background .18s ease;}
.int-cell:hover{background:#F5F5F3;}
.int-grid .int-cell:nth-child(4n){border-right:0;}
.int-grid .int-cell:nth-last-child(-n+3){border-bottom:0;}
.int-cell .k{font-size:.5625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:0 0 .5625rem;}
.int-cell .v{font-size:.8125rem;color:var(--navy);margin:0;font-weight:400;}
.int-cell.cta{display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.int-cell.cta .v{color:var(--navy);}
.int-cell.cta .arrow{font-size:.9375rem;color:var(--navy);transition:transform .2s ease;}
.int-cell.cta:hover .arrow{transform:translateX(.25rem);}

/* ---------- CTA ---------- */
.cta-wrap{background:var(--band);padding:6rem 0 6.875rem;}
.cta-card{
  position:relative;border-radius:1.375rem;overflow:hidden;text-align:center;
  padding:4.5rem 1.25rem 4.75rem;color:#fff;
  background:
    linear-gradient(135deg,rgba(20,40,34,.28),rgba(20,40,34,.05) 45%,rgba(12,28,24,.34)),
    url("contact-bg.png?v=1") center/cover no-repeat,
    linear-gradient(135deg,#3a5a4e,#1d332b);
}
.cta-card::before{
  content:"";position:absolute;left:0;top:0;width:8.125rem;height:8.125rem;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0));
}
.cta-card .inner{position:relative;z-index:2;}
.cta-tag{display:inline-flex;align-items:center;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.6);border-radius:.3125rem;padding:.5rem 1rem;font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 1.75rem;}
.cta-card h2{
  font-size:3rem;line-height:1.08;font-weight:600;letter-spacing:-.025em;color:#fff;margin:0 auto 3.25rem;max-width:38.75rem;
  text-shadow:0 2px 30px rgba(40,46,56,.25);
}
.btn{
  display:inline-block;background:#fff;color:var(--ink);font-size:.90625rem;font-weight:500;
  padding:.875rem 1.875rem;border-radius:2rem;transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 .625rem 1.875rem -.75rem rgba(20,30,45,.5);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 1rem 2.125rem -.75rem rgba(20,30,45,.6);}

/* ---------- FAQ ---------- */
.faq{background:var(--band);padding:.625rem 0 8.125rem;}
.faq-inner{width:60vw;max-width:100%;margin:0 auto;}
.faq .eyebrow{margin-bottom:1.875rem;}
.faq h2{font-size:2.375rem;font-weight:400;letter-spacing:-.022em;color:var(--ink);margin:0 0 3.125rem;}
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;
  display:flex;align-items:center;justify-content:space-between;gap:1.875rem;
  padding:1.625rem .25rem;font-size:.9375rem;font-weight:400;color:var(--navy);
}
.faq-q .ic{position:relative;width:.9375rem;height:.9375rem;flex:none;}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--navy);transition:transform .25s ease,opacity .25s ease;}
.faq-q .ic::before{left:0;right:0;top:.4375rem;height:1.4px;}
.faq-q .ic::after{top:0;bottom:0;left:.4375rem;width:1.4px;}
.faq-item.open .ic::after{transform:scaleY(0);opacity:0;}
.faq-a{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.faq-a .inner{padding:0 .25rem 1.75rem;max-width:47.5rem;font-size:.875rem;line-height:1.65;color:var(--muted);}

/* ---------- footer ---------- */
.footer{padding:5.25rem 0 3.75rem;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1.5fr .8fr .9fr;gap:2rem;}
.foot-brand .logo{margin-bottom:1.125rem;}
.foot-brand .logo svg{height:1.25rem;width:auto;}
.foot-brand p{font-size:.8125rem;line-height:1.6;color:var(--muted);margin:0;max-width:15.625rem;}
.fcol .ck{font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin:0 0 1.125rem;}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;}
.fcol a{font-size:.78125rem;color:var(--muted);white-space:nowrap;}
.fcol a:hover{color:var(--navy);}
.fsoc{display:flex;gap:.875rem;margin-top:.375rem;}
.fsoc a{color:var(--navy);display:inline-flex;}
.fsoc svg{width:1.0625rem;height:1.0625rem;}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:3rem;border-top:1px solid var(--line);padding-top:1.75rem;}
.foot-bottom .cp{display:flex;align-items:center;gap:.4375rem;font-size:.6875rem;color:var(--muted-2);}
.foot-bottom .cp .sq{width:.5625rem;height:.5625rem;background:var(--ink);display:inline-block;}
.foot-bottom .url{font-size:.6875rem;letter-spacing:.08em;color:var(--muted-2);text-transform:uppercase;}

/* ============ responsive ============ */
/* Tablet & below: ease the proportional margins and boost the base size a
   touch for readability, then start collapsing multi-column layouts. */
@media(max-width:1080px){
  html{font-size:clamp(14px, 1.7vw, 19px);}
  :root{--side:6%;}
  .intro-grid{grid-template-columns:1fr;gap:3rem;}
  .possible-cols{gap:3rem;}
  .sec-points{gap:2.5rem 2rem;}
  .point{padding:0;border:0 !important;}
  .point:nth-child(odd){padding-left:0;}
  .sec-grid{grid-template-columns:1fr;gap:3.5rem;}
  .sec-right{margin-right:0;margin-top:0;}
  .sec-panel{aspect-ratio:16/10;height:auto;min-height:0;border-radius:1rem;}
  .hero-inner{padding-bottom:9vh;}
  .section,.intro,.possible,.security,.systems{padding-top:6rem;padding-bottom:6rem;}
}
@media(max-width:760px){
  html{font-size:clamp(14px, 3.4vw, 18px);}
  :root{--side:6.5%;}
  /* ---- mobile hamburger menu ---- */
  .nav-toggle{display:flex;}
  .nav-open .nav-toggle span:nth-child(1){transform:translateY(.49rem) rotate(45deg);}
  .nav-open .nav-toggle span:nth-child(2){opacity:0;}
  .nav-open .nav-toggle span:nth-child(3){transform:translateY(-.49rem) rotate(-45deg);}
  .nav-links{
    position:absolute;top:calc(100% + .7rem);left:auto;right:var(--side);
    width:min(72vw,16rem);
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(245,245,243,.97);
    backdrop-filter:blur(18px) saturate(1.4);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid rgba(20,32,46,.08);border-radius:.85rem;padding:.4rem;
    box-shadow:0 1.5rem 3rem -1rem rgba(20,32,46,.22);
    opacity:0;visibility:hidden;transform:translateY(-.5rem);
    transition:opacity .26s ease,transform .26s ease,visibility .26s;
  }
  .nav-open .nav-links{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-links>a{width:100%;padding:.85rem 1rem;font-size:.95rem;border-radius:.55rem;color:var(--navy);}
  .nav-links>a::after{display:none;}
  .nav-links>a:hover{background:rgba(20,32,46,.05);color:var(--navy);}
  .lang{margin-left:0;width:100%;padding:.85rem 1rem;margin-top:.25rem;gap:.6rem;
    font-size:.9rem;border-top:1px solid rgba(20,32,46,.1);}
  .lang a{color:rgba(20,32,46,.45);}
  .lang a.active{color:var(--navy);}
  .lang .sep{color:rgba(20,32,46,.25);}
  /* a touch larger logo so the wordmark reads cleanly at phone sizes */
  .brand svg{height:1.32rem;}
  /* ---- standardized mobile type scale ---- */
  /* H1 (hero) — largest */
  .hero h1{font-size:1.7rem;}
  /* H2 — section titles unified to one size + ink color, a touch more line spacing */
  .h2{font-size:1.75rem;line-height:1.2;}
  .security h2,.systems h2{font-size:1.75rem;color:var(--ink);}
  .faq h2{font-size:1.75rem;line-height:1.2;}
  .connect-card h3{font-size:1.45rem;max-width:20rem;line-height:1.15;}
  /* raise the whole hero block (title, subtitle, CTAs) a little */
  .hero-inner{padding-bottom:10vh;}
  /* hero CTAs sit a touch higher */
  .hero-actions{margin-top:3.25rem;}
  /* mobile: entrance ease-in removed below (after the keyframe defs so it wins) */
  /* standardized vertical rhythm between sections — wider, even spacing */
  .section,.intro,.possible,.security,.systems,.cta-wrap{padding-top:5rem;padding-bottom:5rem;}
  /* contact rectangle: slightly shorter; tag + button drawn in toward the centered heading */
  .cta-card{display:flex;min-height:26.5rem;padding:2.6rem 1.25rem;}
  .cta-card .inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1.7rem;width:100%;padding:2rem 0;}
  .cta-tag{margin:0;}
  .cta-card h2{font-size:1.75rem;margin:0;}
  /* larger eyebrow "tag" pills */
  .eyebrow{font-size:.62rem;padding:.55rem 1rem;}
  /* raise Current Reality up toward the intro above */
  .reality{padding-top:3rem;}
  .reality .head{margin-bottom:3rem;}
  /* wider, unbalanced lead so it uses the full content width */
  .reality .lead{max-width:100%;text-wrap:normal;}
  .pcard h3{font-size:1.18rem;min-height:0;}
  .pcard p{font-size:.95rem;line-height:1.5;-webkit-line-clamp:unset;display:block;height:auto;}
  /* standardized Current Reality card type + more breathing room to the dividers */
  .reality .pcard h3{font-size:1.18rem;margin-bottom:.5rem;}
  .reality .pcard p{font-size:.95rem;}
  /* gray separators between security items */
  .sec-points{grid-template-columns:1fr;gap:0;}
  .point{padding:1.7rem 0 !important;border-bottom:1px solid var(--line) !important;}
  .point:first-child{padding-top:0 !important;}
  .point:last-child{border-bottom:0 !important;padding-bottom:0 !important;}
  .lead{font-size:.95rem;line-height:1.6;}
  /* intro: let the title flow naturally and keep paragraph + button flush left below */
  .intro h2{font-size:1.35rem;line-height:1.3;}
  .intro h2 br{display:none;}
  .intro .right{padding-left:0;}
  .intro .right p{font-size:.95rem;}
  /* tighten the gap so both texts sit higher; bigger CTA, closer up */
  .intro-grid{gap:1.75rem;}
  .intro .right .link-dark{margin-top:1.75rem;font-size:1.05rem;}
  /* section titles flow across the full available width (within margins) */
  .h2{text-wrap:normal;}
  .reality h2 br{display:none;}
  /* ES/PT hero title is longer than EN — drop the forced break so it flows
     naturally instead of leaving a word stranded on its own line */
  html[lang="es"] .hero h1 br,
  html[lang="pt"] .hero h1 br{display:none;}
  /* ES/PT hero on mobile: full width like EN, but a slightly smaller title,
     and a slightly narrower subtitle */
  html[lang="es"] .hero h1,
  html[lang="pt"] .hero h1{max-width:100%;font-size:1.55rem;line-height:1.3;}
  html[lang="es"] .hero-sub,
  html[lang="pt"] .hero-sub{max-width:95%;}
  /* headings span the full content width */
  .h2,.hero h1,.intro h2,.security h2,.systems h2,.faq h2,.cta-card h2{max-width:100%;width:auto;}
  /* stack the two "What's possible now" columns + slightly larger copy */
  .possible-cols{grid-template-columns:1fr;gap:1.5rem;}
  .possible-cols h4{font-size:1.12rem;}
  .possible-cols p{font-size:.95rem;line-height:1.55;}
  /* larger, fully-shown solution card copy */
  .scard h3{font-size:1.18rem;}
  .scard p{font-size:.95rem;line-height:1.5;-webkit-line-clamp:unset;display:block;height:auto;}
  /* match the desktop solution card: taller image, no tag divider, medium tag */
  .scard .pic{aspect-ratio:347/200;}
  .scard .tag{font-size:.8125rem;border-top:0;padding-top:.5rem;font-weight:500;}
  /* larger security item copy + numbers to the left of the titles, a touch more spacing */
  .sec-points .point{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-items:center;}
  .point .num{margin-bottom:0;}
  .point h4{font-size:1.1rem;margin:0;grid-column:2;}
  .point p{font-size:1rem;line-height:1.55;max-width:none;grid-column:1 / -1;margin-top:.6rem;}
  .faq-inner{width:100%;}
  /* standardized FAQ spacing to match the section rhythm */
  .faq{padding-top:5rem;padding-bottom:5rem;}
  /* single column with soft gray dividers; first card sits up by the subtitle */
  .cards-4{grid-template-columns:1fr;gap:0;margin:0;}
  .pcard{border-left:0;border-top:1px solid var(--line);padding:2.75rem 0;}
  .pcard:first-child{border-top:0;padding-top:0;}
  .cards-3{grid-template-columns:1fr;}
  /* solutions heading uses the full content width */
  .solutions .head{max-width:100%;}
  .solutions h2{max-width:100%;width:100%;text-wrap:normal;}
  .int-grid{grid-template-columns:1fr 1fr;}
  .int-cell.cta{grid-column:span 2 !important;border-right:0;}
  .int-grid .int-cell:nth-child(2n){border-right:0;}
  /* restore the divider line under Automation & Enterprise Systems */
  .int-grid .int-cell:nth-last-child(2),
  .int-grid .int-cell:nth-last-child(3){border-bottom:1px solid var(--line);}
  .feature-box{grid-template-columns:1fr;}
  /* security: hide the image entirely on mobile */
  .sec-right{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:3rem 2rem;}
  .connect-card{padding:2.25rem 1.75rem;}
  /* lift the whole Tools & Systems rectangle up a touch */
  .systems .top{margin-bottom:2.25rem;}
}
@media(max-width:480px){
  .cards-4,.sec-points,.int-grid{grid-template-columns:1fr;}
  .int-cell.cta{grid-column:auto !important;}
  /* single-column Tools & Systems: every cell keeps its bottom divider */
  .int-grid .int-cell{border-right:0 !important;border-bottom:1px solid var(--line) !important;}
  .int-grid .int-cell:last-child{border-bottom:0 !important;}
  .hero-actions{gap:1.5rem;}
  /* footer: brand + solutions full width, then Company | Contact side by side */
  .foot-grid{grid-template-columns:1fr 1fr;gap:2.5rem 2rem;}
  .foot-brand,.fcol-solutions{grid-column:1 / -1;}
  /* align Field/Finance/Custom column with the Contact column */
  .fcol-solutions > div{grid-template-columns:1fr 1fr !important;gap:.75rem 2rem !important;justify-content:stretch !important;}
  .foot-bottom{flex-direction:column;gap:1rem;align-items:flex-start;}
}

/* ============ preloader + hero reveal (all viewports) ============ */
.loader{
  position:fixed;inset:0;z-index:1000;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .55s ease;
}
.loader.done{opacity:0;pointer-events:none;}
.loader-count{
  font-family:"Rules Trial",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:600;font-size:.8125rem;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;
}
.loader-pct{margin-left:.1em;}

/* visible end-state is the base */
.hero h1,.hero-sub,.hero-actions{opacity:1;transform:none;}
.nav{
  transition:background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, padding .35s ease;
}
/* keep everything hidden until the loader hands off */
.preload .hero h1,
.preload .hero-sub,
.preload .hero-actions{opacity:0;transform:translateY(20px);}
.preload .nav{opacity:0;transform:translateY(-12px);}
/* fire each piece as its own keyframe animation (more reliable than a
   class-swap transition, which a browser can batch away in one frame) */
@keyframes heroIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@keyframes navIn{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
.revealed .nav{animation:navIn .55s cubic-bezier(.22,.61,.36,1) both .02s;}
.revealed .hero h1{animation:heroIn .62s cubic-bezier(.22,.61,.36,1) both .10s;}
.revealed .hero-sub{animation:heroIn .62s cubic-bezier(.22,.61,.36,1) both .26s;}
.revealed .hero-actions{animation:heroIn .62s cubic-bezier(.22,.61,.36,1) both .42s;}
@media(prefers-reduced-motion:reduce){
  .preload .hero h1,.preload .hero-sub,.preload .hero-actions,.preload .nav{opacity:1;transform:none;}
  .revealed .nav,.revealed .hero h1,.revealed .hero-sub,.revealed .hero-actions{animation:none;}
  .hero-sub{opacity:1!important;transform:none!important;transition:none!important;}
}

/* static feature images (replaces the upload slots) */
.feature-box img{
  width:100%;aspect-ratio:518/294;display:block;object-fit:cover;border-radius:.5625rem;
}

/* darker tag color on solution cards */
.scard .tag{color:var(--muted);}

/* hero CTA: desktop shows "See it live", mobile keeps "Contact" */
.link-mob{display:none;}

/* ============ desktop-only refinements (>760px) ============ */
@media(min-width:761px){
  /* 1 — hero subtitle: a touch wider + slightly larger */
  .hero-sub{font-size:.9rem;max-width:35.5rem;}
  /* 2 — standardized, slightly smaller spacing between sections */
  .intro{padding-top:5.5rem;padding-bottom:5.5rem;}
  .reality{padding:2.5rem 0 5.5rem;}
  .possible{padding:7rem 0 5.5rem;}
  .solutions{padding:5.5rem 0;}
  .security{padding:5.5rem 0;}
  .systems{padding:5.5rem 0;}
  .cta-wrap{padding:5.5rem 0;}
  .faq{padding-top:5.5rem;padding-bottom:5.5rem;}
  .footer{padding-top:5.5rem;}
  /* intro paragraph offset */
  .intro .right{padding-left:4.75rem;}
  /* 4 — Current Reality: taller images push titles down; smaller titles */
  .thumb{aspect-ratio:227/150;}
  /* Current Reality card dividers: same soft gray weight as Security's lines */
  .reality .pcard{border-left-color:var(--line-soft);}
  /* 5 — card body copy sits closer to its title */
  .pcard h3{font-size:.875rem;margin-bottom:.25rem;min-height:2.2em;}
  /* 6 — "Build the centralized management view" column nudged right a touch */
  .possible-cols > div:nth-child(2){margin-left:-2.1rem;}
  /* 6 — Solutions: cards sit a touch lower beneath the heading */
  .solutions .head{margin-bottom:3.25rem;}
  /* 7 — Solutions section subtitle a touch narrower */
  .solutions .lead{max-width:42rem;}
  /* nudge the EN / ES / PT switcher up a touch */
  .lang{transform:translateY(-.2rem);}
  /* 3 — Systems We Connect: wider top lead; slightly wider card sub */
  .systems .lead{max-width:42rem;}
  .connect-card .sub{max-width:32rem;}
  /* 8 — See it live card: phrase narrower + lower, button lower */
  .cta-card{padding:5.25rem 1.25rem 4.25rem;}
  .cta-tag{font-size:.5rem;padding:.4rem .85rem;margin-bottom:2.25rem;}
  /* phrase sits higher in the card */
  .cta-card h2{font-size:2.6rem;max-width:33rem;margin-top:1.25rem;margin-bottom:3.25rem;}
  /* ES / PT contact heading is longer than EN — widen so it lands in two lines */
  html[lang="es"] .cta-card h2,
  html[lang="pt"] .cta-card h2{max-width:44rem;}
  /* ES "Current Reality" heading is longer than EN — widen so it isn't cramped */
  html[lang="es"] .reality .h2{max-width:84rem;}
  .cta-card .btn{font-size:.8125rem;padding:.75rem 1.65rem;}
  /* 2 — Solutions cards: taller image, no top divider on the tag,
     same gray as the body copy but in Rules Trial Medium */
  .scard .pic{aspect-ratio:347/200;}
  .scard .tag{border-top:0;padding-top:.5rem;color:var(--muted);font-weight:500;}
  /* 9 — footer: shift Company column left for even spacing */
  .fcol-company{padding-left:1.5rem;}
  /* footer: Company links order — Security / Contact / FAQ */
  .fcol-company li:nth-child(1){order:1;}
  .fcol-company li:nth-child(2){order:3;}
  .fcol-company li:nth-child(3){order:2;}
  /* footer column titles darker */
  .fcol .ck{color:#3d4856;}
  /* smaller footer logo */
  .foot-brand .logo svg{height:1.05rem;}
  /* footer social icons lower */
  .fsoc{margin-top:1.25rem;}
  /* 5 — Tools & Systems card bg matches the What's Possible Now band */
  .connect-card{background:var(--band);}
  .int-cell:hover{background:var(--band);}
}
/* 7 — security divider: move only the vertical line left (desktop layout) */
@media(min-width:1081px){
  .point:nth-child(1)::after,
  .point:nth-child(3)::after{
    content:"";position:absolute;top:0;bottom:0;right:1.4rem;width:1px;background:var(--line);
  }
  /* desktop only: nudge the CTA heading up a touch */
  .cta-card h2{transform:translateY(-0.4rem);}
}
@media(max-width:760px){
  .link-desk{display:none;}
  .link-mob{display:inline;}
  /* mobile: NO entrance animation on hero items — show them immediately and
     hard-disable every transition/animation so nothing can glitch on load */
  .preload .hero h1,.preload .hero-sub,.preload .hero-actions{opacity:1 !important;transform:none !important;}
  .revealed .hero h1,.revealed .hero-sub,.revealed .hero-actions{animation:none !important;}
  .hero h1,.hero-sub,.hero-actions,.hero-sub.sub-in{
    opacity:1 !important;transform:none !important;transition:none !important;animation:none !important;
  }
  /* footer column titles: same dark tone as desktop (default is the faint --muted-2) */
  .fcol .ck{color:#3d4856;}
}