/* ArtInSight — shared shell: navigation, footer, page furniture.
   Used by index.html (header only) and the products / solutions sub-pages. */

:root{
  --ais-bg:#f6f2ef;
  --ais-bg-warm:#f4efe9;
  --ais-bg-cool:#eef1f1;
  --ais-ink:#211d18;
  --ais-red:#f23e1e;
  --ais-rust:#9c4a21;
  --ais-gold:#cf8f5a;
  --ais-muted:#5c554a;
  --ais-dim:#948b7c;
  --ais-dark:#1c1813;
  --ais-darker:#211d18;
  --ais-cream:#f5f1e8;
  --ais-dark-muted:#a89e8c;
  --ais-serif:'Cormorant Garamond','Noto Serif TC',serif;
  --ais-serif-tc:'Noto Serif TC','Cormorant Garamond',serif;
  --ais-sans:'Inter',system-ui,-apple-system,'Noto Sans TC',sans-serif;
}

/* ─────────────────────────── NAV ─────────────────────────── */

.ais-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:18px clamp(18px,4vw,56px);
  font-family:var(--ais-sans);
  background:transparent;
}
.ais-nav-brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none;}
.ais-nav-brand img{height:26px;width:auto;display:block;transition:opacity .3s ease;}
.ais-nav-brand:hover img{opacity:.72;}

/* links sit dead-centre of the viewport, independent of logo / control widths */
.ais-nav-links{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);
}
.ais-nav-links a{
  position:relative;padding:6px 0;text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ais-muted);transition:color .3s ease;white-space:nowrap;
}
.ais-nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--ais-red);transition:right .35s cubic-bezier(.2,.7,.2,1);
}
.ais-nav-links a:hover{color:var(--ais-ink);}
.ais-nav-links a:hover::after,
.ais-nav-links a.is-active::after{right:0;}
.ais-nav-links a.is-active{color:var(--ais-ink);}

.ais-nav-right{display:flex;align-items:center;gap:10px;flex:none;}

.ais-lang-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:1px solid rgba(33,29,24,.28);border-radius:999px;
  background:rgba(255,253,248,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--ais-sans);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--ais-ink);cursor:pointer;transition:border-color .3s ease,background .3s ease;
}
.ais-lang-btn:hover{border-color:var(--ais-ink);}
.ais-lang-dot{width:6px;height:6px;border-radius:50%;background:var(--ais-red);flex:none;}

.ais-nav-cta{
  display:inline-flex;align-items:center;padding:9px 20px;border-radius:999px;
  background:var(--ais-ink);color:var(--ais-cream);text-decoration:none;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background .3s ease,transform .3s ease;white-space:nowrap;
}
.ais-nav-cta:hover{background:var(--ais-red);transform:translateY(-1px);}

.ais-burger{
  display:none;width:40px;height:40px;border:1px solid rgba(33,29,24,.28);border-radius:999px;
  background:rgba(255,253,248,.55);cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.ais-burger span{display:block;width:15px;height:1.5px;background:var(--ais-ink);transition:transform .3s ease,opacity .3s ease;}
.ais-burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.ais-burger.is-open span:nth-child(2){opacity:0;}
.ais-burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

.ais-drawer{
  position:fixed;inset:0;z-index:190;background:var(--ais-bg);
  padding:96px clamp(22px,7vw,64px) 40px;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;pointer-events:none;transform:translateY(-12px);
  transition:opacity .32s ease,transform .4s cubic-bezier(.2,.7,.2,1);
}
.ais-drawer.is-open{opacity:1;pointer-events:auto;transform:none;}
.ais-drawer a{
  padding:18px 0;border-bottom:1px solid rgba(33,29,24,.12);text-decoration:none;
  font-family:var(--ais-serif-tc);font-weight:600;font-size:28px;color:var(--ais-ink);
  transition:color .25s ease,padding-left .3s cubic-bezier(.2,.7,.2,1);
}
.ais-drawer a:hover{color:var(--ais-red);padding-left:8px;}
.ais-drawer .ais-drawer-cta:hover{color:var(--ais-cream);background:var(--ais-red);padding-left:0;}
/* footer link lists written inline on index.html */
.ais-foot-link{transition:color .3s ease;}
.ais-foot-link:hover{color:#f5f1e8!important;}
.ais-drawer .ais-drawer-cta{
  margin-top:26px;border:0;text-align:center;border-radius:999px;
  background:var(--ais-ink);color:var(--ais-cream);font-size:16px;letter-spacing:.08em;padding:18px 0;
}

/* adaptive contrast — ais-nav-contrast.js puts .on-dark on whichever nav group
   is currently sitting over a dark band. Groups flip independently. */
.ais-nav-brand img{transition:opacity .3s ease,filter .35s ease;}
.ais-nav-brand.on-dark img{filter:brightness(0) invert(1);}

.ais-nav-links.on-dark a{color:rgba(245,241,232,.74);}
.ais-nav-links.on-dark a:hover,
.ais-nav-links.on-dark a.is-active{color:var(--ais-cream);}
.ais-nav-links.on-dark a::after{background:var(--ais-gold);}

.ais-nav-right.on-dark .ais-lang-btn{
  border-color:rgba(245,241,232,.34);background:rgba(28,24,19,.42);color:var(--ais-cream);
}
.ais-nav-right.on-dark .ais-lang-btn:hover{border-color:var(--ais-cream);}
.ais-nav-right.on-dark .ais-nav-cta{background:var(--ais-cream);color:var(--ais-ink);}
.ais-nav-right.on-dark .ais-nav-cta:hover{background:var(--ais-red);color:var(--ais-cream);}
.ais-nav-right.on-dark .ais-burger{border-color:rgba(245,241,232,.34);background:rgba(28,24,19,.42);}
.ais-nav-right.on-dark .ais-burger span{background:var(--ais-cream);}

@media (max-width:960px){
  .ais-nav-links{display:none;}
  .ais-nav-cta{display:none;}
  .ais-burger{display:flex;}
}
@media (min-width:961px){.ais-drawer{display:none;}}

/* ─────────────────────── PAGE FURNITURE ─────────────────────── */

.ais-page{background:var(--ais-bg);color:var(--ais-ink);font-family:var(--ais-sans);}
.ais-prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ais-red);z-index:300;}

.ais-sec{position:relative;padding:clamp(74px,11vh,140px) clamp(20px,6vw,110px);overflow:hidden;}
.ais-sec--warm{background:var(--ais-bg-warm);}
.ais-sec--cool{background:var(--ais-bg-cool);}
.ais-sec--dark{background:var(--ais-dark);color:var(--ais-cream);}
.ais-sec--ink{background:var(--ais-darker);color:var(--ais-cream);}
.ais-wrap{position:relative;max-width:1180px;margin:0 auto;}

.ais-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ais-rust);
}
.ais-sec--dark .ais-eyebrow,.ais-sec--ink .ais-eyebrow{color:var(--ais-gold);}
.ais-rule{display:block;width:30px;height:1px;background:currentColor;opacity:.55;}

.ais-h1{
  font-family:var(--ais-serif);font-weight:600;
  font-size:clamp(40px,7vw,96px);line-height:.98;letter-spacing:-.02em;
}
.ais-h2{
  font-family:var(--ais-serif);font-weight:600;
  font-size:clamp(30px,4.4vw,62px);line-height:1.04;letter-spacing:-.015em;
}
.ais-h3{font-family:var(--ais-serif);font-weight:600;font-size:24px;line-height:1.2;}
.ais-lead{font-size:15px;line-height:1.9;color:var(--ais-muted);max-width:62ch;}
.ais-sec--dark .ais-lead,.ais-sec--ink .ais-lead{color:var(--ais-dark-muted);}
.ais-body{font-size:13.5px;line-height:1.8;color:var(--ais-muted);}
.ais-sec--dark .ais-body,.ais-sec--ink .ais-body{color:var(--ais-dark-muted);}
.ais-quote{font-family:var(--ais-serif);font-style:italic;font-size:19px;line-height:1.55;color:var(--ais-muted);}

/* module rows: text + panel, alternating */
.ais-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,74px);
  align-items:center;padding:clamp(40px,6vw,70px) 0;
  border-top:1px solid rgba(33,29,24,.12);
}
.ais-sec--dark .ais-row,.ais-sec--ink .ais-row{border-top-color:rgba(245,241,232,.14);}
.ais-row:first-of-type{border-top:0;}
.ais-row--flip .ais-row-media{order:-1;}
.ais-row-num{
  font-family:var(--ais-serif);font-size:13px;letter-spacing:.2em;
  color:var(--ais-gold);margin-bottom:14px;display:block;
}
.ais-row h3{margin-bottom:14px;}
.ais-row-media{
  position:relative;border:1px solid rgba(33,29,24,.14);
  background:rgba(255,255,255,.5);padding:clamp(20px,3vw,34px);min-height:210px;
  display:flex;flex-direction:column;justify-content:center;gap:12px;
}
.ais-sec--dark .ais-row-media,.ais-sec--ink .ais-row-media{
  border-color:rgba(245,241,232,.16);background:rgba(245,241,232,.04);
}

/* the little "spec chips" inside a media panel */
.ais-chips{display:flex;flex-wrap:wrap;gap:8px;}
.ais-chip{
  padding:7px 13px;border-radius:999px;border:1px solid rgba(33,29,24,.2);
  font-size:11px;letter-spacing:.08em;color:var(--ais-muted);white-space:nowrap;
  transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.ais-chip:hover{border-color:var(--ais-red);color:var(--ais-ink);}
.ais-sec--dark .ais-chip,.ais-sec--ink .ais-chip{border-color:rgba(245,241,232,.22);color:var(--ais-dark-muted);}
.ais-sec--dark .ais-chip:hover,.ais-sec--ink .ais-chip:hover{border-color:var(--ais-gold);color:var(--ais-cream);}

/* mock UI blocks */
.ais-mock{font-family:var(--ais-sans);font-size:12px;line-height:1.6;}
.ais-mock-line{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(33,29,24,.1);
}
.ais-sec--dark .ais-mock-line,.ais-sec--ink .ais-mock-line{border-bottom-color:rgba(245,241,232,.12);}
.ais-mock-line:last-child{border-bottom:0;}
.ais-mock-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ais-dim);}
.ais-mock-v{font-family:var(--ais-serif);font-size:17px;}
.ais-sec--dark .ais-mock-v,.ais-sec--ink .ais-mock-v{color:var(--ais-cream);}

/* card grids */
.ais-grid{display:grid;gap:clamp(16px,2vw,26px);}
.ais-grid--3{grid-template-columns:repeat(3,1fr);}
.ais-grid--2{grid-template-columns:repeat(2,1fr);}
.ais-card{
  padding:clamp(22px,2.4vw,32px);border:1px solid rgba(33,29,24,.14);
  background:rgba(255,255,255,.46);transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s ease,background .35s ease;
}
.ais-card:hover{transform:translateY(-4px);border-color:rgba(242,62,30,.4);background:rgba(255,255,255,.72);}
.ais-sec--dark .ais-card,.ais-sec--ink .ais-card{
  border-color:rgba(245,241,232,.16);background:rgba(245,241,232,.03);
}
.ais-sec--dark .ais-card:hover,.ais-sec--ink .ais-card:hover{background:rgba(245,241,232,.07);border-color:rgba(207,143,90,.5);}
.ais-card-icon{
  width:34px;height:34px;border-radius:50%;border:1px solid currentColor;
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ais-rust);
}
.ais-sec--dark .ais-card-icon,.ais-sec--ink .ais-card-icon{color:var(--ais-gold);}
.ais-card h3{margin:14px 0 10px;}

/* problem → answer pairing used on the solutions page */
.ais-pair{display:grid;grid-template-columns:1fr;gap:0;}
.ais-pair-problem{
  padding:16px 18px;border-left:2px solid rgba(242,62,30,.5);
  background:rgba(242,62,30,.05);font-size:13px;line-height:1.75;color:var(--ais-muted);
}
.ais-sec--dark .ais-pair-problem,.ais-sec--ink .ais-pair-problem{
  background:rgba(242,62,30,.09);color:var(--ais-dark-muted);
}
.ais-list{list-style:none;margin:16px 0 0;padding:0;}
.ais-list li{
  position:relative;padding:0 0 11px 20px;font-size:13.5px;line-height:1.75;color:var(--ais-muted);
}
.ais-list li::before{
  content:"";position:absolute;left:0;top:10px;width:7px;height:1px;background:var(--ais-red);
}
.ais-sec--dark .ais-list li,.ais-sec--ink .ais-list li{color:var(--ais-dark-muted);}
.ais-list li strong{color:inherit;font-weight:600;}
.ais-sec--dark .ais-list li strong,.ais-sec--ink .ais-list li strong{color:var(--ais-cream);}

/* sub-page hero */
.ais-hero-sub{
  position:relative;padding:clamp(140px,20vh,220px) clamp(20px,6vw,110px) clamp(60px,9vh,110px);
  background:var(--ais-bg);overflow:hidden;
}
.ais-hero-ghost{
  position:absolute;left:50%;top:-4%;transform:translateX(-50%);
  font-family:var(--ais-serif);font-weight:600;font-size:clamp(190px,36vw,540px);line-height:1;
  color:rgba(242,62,30,.055);pointer-events:none;user-select:none;white-space:nowrap;
}

/* CTA + footer */
.ais-cta-btn{
  display:inline-flex;align-items:center;padding:17px 36px;border-radius:999px;
  border:1px solid rgba(245,241,232,.4);color:var(--ais-cream);text-decoration:none;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s ease;
}
.ais-cta-btn:hover{background:rgba(245,241,232,.1);}

.ais-foot{
  background:var(--ais-darker);color:var(--ais-cream);
  padding:clamp(60px,9vh,100px) clamp(20px,6vw,110px) 40px;
}
/* lead flush left, link columns flush right, both tops on the same line */
.ais-foot-top{
  max-width:1180px;margin:0 auto clamp(40px,6vh,70px);
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(34px,6vw,90px);flex-wrap:wrap;
}
.ais-foot-lead{text-align:left;flex:0 1 auto;}
.ais-foot-lead .ais-body{margin:16px 0 0;max-width:40ch;}
.ais-foot-lead .ais-nav-cta{margin-top:22px;}
/* three link columns keep their own text left-aligned inside the right-hand group */
.ais-foot-grid{
  display:grid;grid-template-columns:repeat(3,max-content);gap:clamp(26px,5vw,84px);
  justify-content:end;justify-items:start;text-align:left;
}
.ais-foot h4{
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ais-gold);margin-bottom:16px;
}
.ais-foot a{
  display:block;padding:6px 0;text-decoration:none;font-size:12.5px;
  color:var(--ais-dark-muted);transition:color .3s ease;
}
.ais-foot a:hover{color:var(--ais-cream);}
.ais-foot-bar{
  max-width:1180px;margin:clamp(40px,6vh,72px) auto 0;padding-top:24px;
  border-top:1px solid rgba(245,241,232,.16);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ais-dim);
}
.ais-foot-bar img{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.92;}

/* ──────────────────── PAGE TRANSITION (tab switching) ────────────────────
   assets/ais-transition.js puts .ais-tx on <html> before first paint, then
   .ais-tx-in on arrival and .ais-tx-out just before it leaves.

   The screen is never covered by one slab. Two banks of seven columns sweep
   across it left to right, each column a beat behind its neighbour and topped
   with a shallow arc, so the edge crossing the viewport is a soft wave rather
   than a hard horizon. A dim pass leads the wave in and a plate carrying the
   grain, vignette and wordmark fades over the top once the ink has landed:

     .ais-tx-dim          low ink wash — starts before anything moves
     .ais-tx-bank--paper  seven cream / warm-cream columns
     .ais-tx-bank--ink    seven ink columns, a beat behind the paper
     .ais-tx-plate        grain + vignette + destination wordmark
     html::before         cream backing sheet (also the pre-paint flash guard)

   Nothing here is in the document flow: the stage is position:fixed, so it
   never shifts layout, and no ancestor of the page content gains a transform
   that would re-parent the fixed nav or disturb the sticky hero.             */

html.ais-tx::before{
  content:"";position:fixed;inset:-1px 0;z-index:9000;pointer-events:none;
  background:var(--ais-bg);
  transform:translateY(0);
  will-change:transform;
}

.ais-tx-stage{
  position:fixed;inset:0;z-index:9010;pointer-events:none;overflow:hidden;
  contain:layout paint style;
}

.ais-tx-dim{
  position:absolute;inset:0;background:rgba(28,24,19,.34);opacity:0;
}

/* the columns hang past both edges of the viewport, so their arcs only ever
   show while a bank is travelling — once it lands the cover is seamless */
.ais-tx-bank{position:absolute;inset:-16vh 0;display:flex;}
.ais-tx-col{
  flex:1 1 0;margin:0 -1px;transform:translateY(0);
  border-radius:50% 50% 50% 50% / 7vh 7vh 7vh 7vh;
  will-change:transform;backface-visibility:hidden;
}
.ais-tx-bank--paper .ais-tx-col{background:var(--ais-cream);}
.ais-tx-bank--paper .ais-tx-col:nth-child(even){background:var(--ais-bg-warm);}
.ais-tx-bank--ink .ais-tx-col{
  background:var(--ais-dark);
  box-shadow:0 22px 60px rgba(0,0,0,.34);
}
.ais-tx-bank--ink .ais-tx-col:nth-child(even){background:#171410;}

.ais-tx-plate{
  position:absolute;inset:0;opacity:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 82% at 50% 46%, transparent 42%, rgba(0,0,0,.55) 100%);
}
.ais-tx-plate::after{
  content:"";position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 38%, rgba(245,241,232,.075) 50%, transparent 62%);
  transform:translateX(-38%);
}
.ais-tx-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* destination wordmark, centred on the plate */
.ais-tx-label{
  position:relative;z-index:2;text-align:center;padding:0 24px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.ais-tx-kicker{
  font-family:var(--ais-sans);font-size:10px;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ais-gold);
  padding-left:.42em;
}
.ais-tx-title{
  font-family:var(--ais-serif-tc);font-weight:600;
  font-size:clamp(30px,5.6vw,68px);line-height:1;letter-spacing:.01em;
  color:var(--ais-cream);
}
.ais-tx-rule{
  display:block;width:74px;height:1px;background:var(--ais-red);
  transform:scaleX(0);transform-origin:50% 50%;
}

/* ── arriving: the wave rolls off the top, ink bank leading ──
   The wordmark is the slowest thing in the sequence on purpose: it reads for
   ~0.3s at the end of the exit, survives the document swap, and holds another
   ~0.4s on arrival before the columns start to travel.

   Column stagger is 55ms; --i is set per column by ais-transition.js so the
   sweep runs left to right without seven hand-written selectors.            */
html.ais-tx.ais-tx-in .ais-tx-bank--ink .ais-tx-col{
  animation:ais-col-lift .74s cubic-bezier(.62,.02,.24,1) forwards;
  animation-delay:calc(.34s + var(--i) * .045s);
}
html.ais-tx.ais-tx-in .ais-tx-bank--paper .ais-tx-col{
  animation:ais-col-lift .78s cubic-bezier(.62,.02,.24,1) forwards;
  animation-delay:calc(.46s + var(--i) * .045s);
}
html.ais-tx.ais-tx-in::before{animation:ais-col-lift .70s .72s cubic-bezier(.62,.02,.24,1) forwards;}
html.ais-tx.ais-tx-in .ais-tx-dim{animation:ais-tx-fade-out .60s .66s ease both;}
html.ais-tx.ais-tx-in .ais-tx-plate{animation:ais-tx-fade-out .50s .34s ease both;}
html.ais-tx.ais-tx-in .ais-tx-plate::after{animation:ais-tx-sheen 1.4s cubic-bezier(.3,.6,.2,1) forwards;}
/* `both`, not `forwards`: the rule is authored at scaleX(0), and the arriving
   page has to show it already drawn for the whole hold, exactly as the page
   before it left off. */
html.ais-tx.ais-tx-in .ais-tx-label{animation:ais-tx-label-out .46s .34s cubic-bezier(.6,0,.3,1) both;}
html.ais-tx.ais-tx-in .ais-tx-rule{animation:ais-tx-rule-out .36s .28s cubic-bezier(.6,0,.3,1) both;}

/* ── leaving: the dim leads, then the wave sweeps up from below ── */
html.ais-tx.ais-tx-out .ais-tx-dim{animation:ais-tx-fade-in .30s ease both;}
html.ais-tx.ais-tx-out::before{animation:ais-col-cover .48s cubic-bezier(.4,.02,.28,1) forwards;}
html.ais-tx.ais-tx-out .ais-tx-bank--paper .ais-tx-col{
  animation:ais-col-cover .52s cubic-bezier(.4,.02,.28,1) forwards;
  animation-delay:calc(.04s + var(--i) * .038s);
}
html.ais-tx.ais-tx-out .ais-tx-bank--ink .ais-tx-col{
  animation:ais-col-cover .54s cubic-bezier(.4,.02,.28,1) forwards;
  animation-delay:calc(.12s + var(--i) * .038s);
}
html.ais-tx.ais-tx-out .ais-tx-plate{animation:ais-tx-fade-in .30s .46s ease both;}
html.ais-tx.ais-tx-out .ais-tx-label{animation:ais-tx-label-in .34s .48s cubic-bezier(.2,.7,.2,1) forwards;}
html.ais-tx.ais-tx-out .ais-tx-rule{animation:ais-tx-rule-in .36s .56s cubic-bezier(.2,.7,.2,1) forwards;}

@keyframes ais-col-lift{
  0%{transform:translateY(0);}
  100%{transform:translateY(-118%);}
}
@keyframes ais-col-cover{
  0%{transform:translateY(118%);}
  100%{transform:translateY(0);}
}
@keyframes ais-tx-fade-in{0%{opacity:0;}100%{opacity:1;}}
@keyframes ais-tx-fade-out{0%{opacity:1;}100%{opacity:0;}}
@keyframes ais-tx-sheen{
  0%{transform:translateX(-38%);opacity:0;}
  30%{opacity:1;}
  100%{transform:translateX(38%);opacity:0;}
}
@keyframes ais-tx-label-out{
  0%{opacity:1;transform:translateY(0);filter:blur(0);}
  100%{opacity:0;transform:translateY(-16px);filter:blur(5px);}
}
@keyframes ais-tx-label-in{
  0%{opacity:0;transform:translateY(14px);filter:blur(5px);}
  100%{opacity:1;transform:translateY(0);filter:blur(0);}
}
@keyframes ais-tx-rule-out{
  0%{transform:scaleX(1);opacity:1;}
  100%{transform:scaleX(0);opacity:0;}
}
@keyframes ais-tx-rule-in{
  0%{transform:scaleX(0);opacity:0;}
  100%{transform:scaleX(1);opacity:1;}
}

/* the stack clears bottom-first, so the nav lands last, one element at a time */
html.ais-tx.ais-tx-in .ais-nav-brand,
html.ais-tx.ais-tx-in .ais-nav-links a,
html.ais-tx.ais-tx-in .ais-nav-right > *{
  animation:ais-nav-settle .74s cubic-bezier(.2,.7,.2,1) both;
}
html.ais-tx.ais-tx-in .ais-nav-brand{animation-delay:1.25s;}
html.ais-tx.ais-tx-in .ais-nav-links a:nth-child(1){animation-delay:1.32s;}
html.ais-tx.ais-tx-in .ais-nav-links a:nth-child(2){animation-delay:1.38s;}
html.ais-tx.ais-tx-in .ais-nav-links a:nth-child(3){animation-delay:1.44s;}
html.ais-tx.ais-tx-in .ais-nav-right > *:nth-child(1){animation-delay:1.36s;}
html.ais-tx.ais-tx-in .ais-nav-right > *:nth-child(2){animation-delay:1.42s;}
html.ais-tx.ais-tx-in .ais-nav-right > *:nth-child(3){animation-delay:1.42s;}

@keyframes ais-nav-settle{
  0%{opacity:0;transform:translateY(-10px);}
  100%{opacity:1;transform:none;}
}

/* the active tab draws its own underline once the page has landed */
html.ais-tx.ais-tx-in .ais-nav-links a.is-active::after{
  animation:ais-ink-draw .78s 1.60s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ais-ink-draw{
  0%{right:100%;}
  100%{right:0;}
}

/* the sub-page hero rises as the stack passes over it: the oversized ghost
   word drifts and settles a beat before the type it sits behind */
html.ais-tx.ais-tx-in .ais-hero-sub > *{
  animation:ais-hero-rise .95s 1.14s cubic-bezier(.2,.7,.2,1) both;
}
html.ais-tx.ais-tx-in .ais-hero-sub > *:nth-child(2){animation-delay:1.22s;}
html.ais-tx.ais-tx-in .ais-hero-sub > *:nth-child(3){animation-delay:1.28s;}
html.ais-tx.ais-tx-in .ais-hero-sub > *:nth-child(4){animation-delay:1.34s;}
html.ais-tx.ais-tx-in .ais-hero-ghost{
  animation:ais-ghost-drift 1.5s 1.04s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes ais-hero-rise{
  0%{opacity:0;transform:translateY(20px);}
  100%{opacity:1;transform:none;}
}
@keyframes ais-ghost-drift{
  0%{opacity:0;transform:translateX(-50%) translateY(26px) scale(1.05);}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}

/* reveal */
[data-rev]{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1);}
[data-rev].is-in{opacity:1;transform:none;}

/* shared motion */
@keyframes ais-wave{0%{transform:scaleY(.32)}100%{transform:scaleY(1)}}
@keyframes ais-breathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.02);}}
@keyframes ais-ring{0%{transform:scale(.85);opacity:.5;}100%{transform:scale(1.5);opacity:0;}}
@keyframes ais-unveil{
  0%{opacity:0;transform:scale(1.06);filter:blur(14px) saturate(.6);clip-path:inset(0 0 100% 0);}
  100%{opacity:1;transform:scale(1);filter:blur(0) saturate(1);clip-path:inset(0 0 0 0);}
}

@media (max-width:900px){
  .ais-row{grid-template-columns:1fr;gap:26px;}
  .ais-row--flip .ais-row-media{order:0;}
  .ais-grid--3,.ais-grid--2{grid-template-columns:1fr;}
  .ais-foot-grid,.ais-foot-cols{grid-template-columns:1fr!important;}
}
@media (prefers-reduced-motion:reduce){
  .ais-nav,.ais-card,.ais-drawer,[data-rev]{transition-duration:.01ms!important;}
  [data-rev]{opacity:1;transform:none;}
  html.ais-tx::before,.ais-tx-stage{display:none!important;}
  html.ais-tx .ais-nav-brand,html.ais-tx .ais-nav-links a,html.ais-tx .ais-nav-right > *,
  html.ais-tx .ais-hero-sub > *{animation:none!important;opacity:1!important;transform:none!important;}
  html.ais-tx .ais-hero-ghost{animation:none!important;opacity:1!important;transform:translateX(-50%)!important;}
}