/* =========================================================
   Nawani Worldwide Trading LLC — Landing page
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --blue:#1138B8;
  --blue-deep:#0D2F9D;
  --blue-700:#0E2E9E;
  --sky:#B9E1FA;

  --ink:#1A1A1C;
  --body:#3C3C40;
  --muted:#6A6A72;

  --grey-bg:#EDEDEF;
  --grey-card:#D3D6DB;
  --grey-foot:#C6CAD3;
  --white:#fff;

  /* product-range category accents (used by the Products section).
     --c-personal / --c-beverage predate the category rename; they are
     Body Care and Confectionery. Keep in step with style-option2.css. */
  --c-home:#1C8F5E;      /* Home Care     */
  --c-personal:#BB337A;  /* Body Care     */
  --c-hair:#6E45B8;      /* Hair Care     */
  --c-oral:#D23A2C;      /* Oral Care     */
  --c-beverage:#A5640A;  /* Confectionery */

  --display:'Marcellus',"Times New Roman",Georgia,serif;
  --ui:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --text:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;

  --shell:1660px;
  --gut:clamp(20px,5vw,64px);

  --fs-hero:clamp(2.35rem,4.1vw,4.75rem);
  --fs-h2:clamp(1.9rem,3.35vw,3.875rem);
  --fs-h2-lg:clamp(2.2rem,4.9vw,5.75rem);
  --fs-h3:clamp(1.15rem,1.72vw,2rem);
  --fs-body:clamp(1rem,1.26vw,1.5rem);
  --fs-sm:clamp(.9rem,1.06vw,1.25rem);
  --fs-btn:clamp(.85rem,.97vw,1.125rem);

  --r-lg:28px;
  --r-md:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--grey-bg);
  color:var(--body);
  font-family:var(--text);
  font-size:var(--fs-body);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,figure,address{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
address{font-style:normal}

::selection{background:var(--blue);color:#fff}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:200;background:#fff;color:var(--blue);
  padding:10px 16px;border-radius:999px;font-family:var(--ui);font-weight:600;transition:top .2s;
}
.skip-link:focus{top:16px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.center{text-align:center}
.section{padding-block:clamp(56px,7vw,120px)}

/* ---------- type ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--fs-h2);
  line-height:1.16;
  color:var(--blue);
  letter-spacing:.004em;
}
.display--light{color:#fff}
.eyebrow{
  font-family:var(--ui);font-weight:600;color:var(--blue);
  font-size:var(--fs-sm);margin-bottom:.4em;
}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;pointer-events:none}
.scroll-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--blue),#5B8CF5);
  box-shadow:0 1px 10px rgba(17,56,184,.45);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:clamp(10px,1.1vw,20px);
  transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease);
}
.site-header.is-stuck{
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  box-shadow:0 8px 32px rgba(10,30,90,.1);
  padding-block:8px;
}
.site-header.is-hidden{transform:translateY(-110%)}
.site-header{transition:transform .5s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease)}
.header__inner{display:flex;align-items:center;gap:clamp(16px,2vw,40px);position:relative}
.nav__cta{display:none}

.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand__mark{
  width:clamp(42px,3vw,56px);height:auto;border-radius:12px;
  box-shadow:0 6px 18px rgba(12,38,120,.22);
}
.brand__text{display:grid;line-height:1.05;font-family:var(--ui);color:var(--blue)}
.brand__text strong{font-size:clamp(.82rem,1.08vw,1.2rem);font-weight:800;letter-spacing:.01em}
.brand__text em{
  font-style:normal;font-weight:400;opacity:.85;
  font-size:clamp(.6rem,.78vw,.86rem);letter-spacing:.14em;
}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:clamp(14px,1.7vw,34px)}
.nav__link{
  font-family:var(--ui);font-weight:500;color:var(--blue);
  font-size:clamp(.86rem,1.04vw,1.25rem);
  position:relative;padding-block:6px;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}

.header__actions{display:flex;align-items:center;gap:clamp(10px,1.1vw,20px)}
.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;color:var(--blue);
  border-radius:50%;transition:background .3s var(--ease),transform .3s var(--ease);
}
.icon-btn svg{width:22px;height:22px;stroke-width:2}
.icon-btn:hover{background:rgba(17,56,184,.1);transform:scale(1.06)}

/* bars are laid out by flex, not absolute tops, so the two gaps stay
   identical after device-pixel rounding */
.burger{
  display:none;width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.burger span{
  display:block;width:22px;height:2px;border-radius:2px;
  background:var(--blue);
  transition:transform .4s var(--ease),opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.burger:hover{background:rgba(17,56,184,.1)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--blue);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--ui);font-weight:600;font-size:var(--fs-btn);
  padding:.72em 1.25em;border-radius:999px;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease);
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:currentColor;opacity:0;transform:scale(.4);
  transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(12,38,120,.22)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:.85em 1.45em}
.btn--primary{--bg:var(--blue);--fg:#fff}
.btn--light{--bg:#fff;--fg:var(--blue)}
.btn--outline{--bg:transparent;--fg:var(--blue);--bd:var(--blue)}
.btn--ghost-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.9)}
.btn--ghost-dark{--bg:transparent;--fg:var(--blue);--bd:var(--blue)}
.btn--pill{--bg:transparent;--fg:#1A1A1C;--bd:#9A9DA6;font-weight:500;padding:.6em 1.15em}
.btn--pill:hover{--bg:var(--blue);--fg:#fff;--bd:var(--blue)}

.btn__chev{
  width:1.55em;height:1.55em;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:currentColor;
  transition:transform .4s var(--ease);
}
.btn__chev::after{
  content:"";width:.34em;height:.34em;
  border-right:2px solid var(--bg);border-top:2px solid var(--bg);
  transform:rotate(45deg) translate(-1px,1px);
}
.btn--primary .btn__chev,.btn--ghost-light .btn__chev{background:#fff}
.btn--primary .btn__chev::after,.btn--ghost-light .btn__chev::after{border-color:var(--blue)}
.btn--light .btn__chev,.btn--outline .btn__chev,.btn--ghost-dark .btn__chev{background:var(--blue)}
.btn--light .btn__chev::after,.btn--outline .btn__chev::after,.btn--ghost-dark .btn__chev::after{border-color:#fff}
.btn:hover .btn__chev{transform:translateX(3px)}

/* =========================================================
   SEARCH
   ========================================================= */
.search{
  position:fixed;inset:0;z-index:150;
  display:grid;justify-items:center;align-content:start;
  padding:clamp(70px,10vh,140px) var(--gut) 24px;
  background:rgba(10,24,64,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease);
}
.search[hidden]{display:none}
.search.is-open{opacity:1}
.search__panel{
  width:min(720px,100%);background:#fff;border-radius:20px;
  box-shadow:0 40px 90px -40px rgba(8,24,70,.7);
  overflow:hidden;
  transform:translateY(-14px) scale(.98);
  transition:transform .4s var(--ease);
}
.search.is-open .search__panel{transform:none}
.search__bar{display:flex;align-items:center;gap:12px;padding:16px 16px 16px 20px;border-bottom:1px solid #E3E4E8}
.search__bar>svg{width:22px;height:22px;color:var(--blue);stroke-width:2;flex:0 0 auto}
.search__bar input{
  flex:1 1 auto;min-width:0;border:0;outline:0;background:none;
  font-family:var(--ui);font-size:clamp(1rem,1.3vw,1.18rem);color:var(--ink);
}
.search__bar input::placeholder{color:#8A8D96}
.search__bar input::-webkit-search-cancel-button{display:none}
.search__close{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--blue);
  transition:background .3s var(--ease);flex:0 0 auto;
}
.search__close svg{width:18px;height:18px;stroke-width:2}
.search__close:hover{background:rgba(17,56,184,.1)}

.search__results{max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain}
.search__results:empty{display:none}
.search__results li{border-bottom:1px solid #F0F0F2}
.search__results li:last-child{border-bottom:0}
.search__results button{
  width:100%;display:flex;align-items:baseline;gap:12px;text-align:left;
  padding:14px 20px;font-family:var(--ui);
  transition:background .2s var(--ease);
}
.search__results button:hover,.search__results li.is-cursor button{background:#F2F5FD}
.search__results strong{font-weight:600;font-size:1rem;color:var(--ink);flex:1 1 auto}
.search__results strong mark{background:#D8E2FF;color:var(--blue);border-radius:3px;padding:0 1px}
.search__results span{font-size:.82rem;color:var(--blue);font-weight:600;white-space:nowrap;opacity:.8}
.search__note{padding:16px 20px 20px;font-family:var(--ui);font-size:.92rem;color:#6A6A72}
.search__note b{color:var(--blue);font-weight:600}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:min(100svh,980px);
  display:flex;align-items:flex-start;
  padding-block:clamp(110px,11vw,170px) clamp(60px,9vw,140px);
  overflow:hidden;background:var(--sky);
}
.hero__media{position:absolute;inset:-6% 0 -6% 0;z-index:0}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transform:scale(1.06);
  transition:opacity 1.3s var(--ease),transform 1.6s var(--ease);
}
.hero__slide.is-active{opacity:1;transform:scale(1)}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(185,225,250,.55) 0%,rgba(185,225,250,.18) 34%,rgba(185,225,250,0) 52%);
}
.hero__3d{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__3d canvas{display:block;width:100%;height:100%}
.hero__inner{position:relative;z-index:2}
.hero__title{
  font-family:var(--display);font-weight:400;
  font-size:var(--fs-hero);line-height:1.17;color:var(--blue);
  max-width:16ch;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:clamp(12px,1.1vw,20px);margin-top:clamp(26px,3.4vw,58px)}

.hero__scroller{
  position:absolute;right:clamp(16px,2.4vw,46px);top:50%;transform:translateY(-50%);
  z-index:2;display:grid;justify-items:center;gap:14px;color:var(--blue);
}
.hero__arrow{
  width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(17,56,184,.5);
  display:grid;place-items:center;
}
.hero__arrow svg{width:18px;height:18px;stroke-width:1.6}
.hero__rail{display:block;width:1.5px;height:clamp(120px,16vh,220px);background:rgba(17,56,184,.3);position:relative;overflow:hidden}
.hero__rail i{position:absolute;inset:0 0 auto 0;height:36%;background:var(--blue);animation:railRun 2.6s var(--ease) infinite}
@keyframes railRun{0%{transform:translateY(-110%)}60%,100%{transform:translateY(300%)}}

/* ---------- line reveal ---------- */
[data-anim="lines"] .line{display:block;overflow:hidden}
[data-anim="lines"] .line>span{
  display:block;transform:translateY(110%);
  transition:transform 1s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-anim="lines"].is-in .line>span{transform:translateY(0)}

[data-anim="rise"],[data-anim="note"]{
  opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-anim="rise"].is-in{opacity:1;transform:none}

/* =========================================================
   ABOUT + STATS
   ========================================================= */
.about{background:var(--grey-bg)}
.about__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
  gap:clamp(28px,5vw,96px);align-items:start;
}
.about__title{font-size:clamp(1.9rem,3.25vw,3.875rem)}
.about__copy{display:grid;gap:1.6em;max-width:72ch;color:var(--body)}
.about__more{display:flex;justify-content:center;margin-top:clamp(36px,5vw,76px)}

.stats{
  margin-top:clamp(34px,4.4vw,66px);
  background:linear-gradient(115deg,#4a2a94 0%,#6E45B8 45%,#a23a86 100%);border-radius:var(--r-lg);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:clamp(26px,3.2vw,52px) clamp(16px,2vw,32px);
  color:#fff;
  box-shadow:0 26px 60px -30px rgba(110,69,184,.85);
}
.stat{text-align:center;padding-inline:clamp(8px,1.4vw,24px);position:relative}
.stat+.stat::before{
  content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:rgba(255,255,255,.34);
}
.stat__num{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,4.4vw,5.75rem);line-height:1.05;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.stat__label{display:block;margin-top:.45em;font-family:var(--ui);font-weight:500;font-size:var(--fs-sm)}

/* =========================================================
   PRODUCTS CAROUSEL
   ========================================================= */
.products{background:var(--grey-bg);padding-bottom:clamp(60px,8vw,130px)}
.products__head{display:grid;justify-items:center;text-align:center;gap:.65em}
.products__head .display{max-width:22ch}

.carousel{
  --cw:clamp(224px,29vw,551px);
  --ch:calc(var(--cw) * 682 / 551);
  margin-top:clamp(34px,4.6vw,70px);position:relative;
}
.carousel__stage{
  position:relative;
  height:calc(var(--ch) + clamp(58px,6.4vw,116px));
  perspective:1600px;
  perspective-origin:50% 44%;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.carousel__stage:active{cursor:grabbing}
.carousel__stage.is-dragging,
.carousel__stage.is-dragging .pcard,
.carousel__stage.is-dragging .pcard figure{transition:none !important}

.pcard{
  position:absolute;left:50%;top:0;
  width:var(--cw);height:var(--ch);
  margin-left:calc(var(--cw) / -2);
  text-align:center;
  transform-origin:50% 50%;
  perspective:1100px;
  /* JS drives transform every frame, so no transition on it here */
  transition:opacity .5s var(--ease);
  will-change:transform;
}
.pcard figure{
  position:relative;width:100%;height:100%;
  overflow:hidden;border-radius:var(--r-md);
  transform-origin:50% 50%;
  box-shadow:0 18px 44px -26px rgba(10,30,90,.55);
  transition:box-shadow .6s var(--ease);
  backface-visibility:hidden;
}
.pcard figure::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:#9FA6B4;opacity:var(--dim,0);pointer-events:none;
}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
/* the label is exactly as wide as its own card, so it can never run under a
   neighbour and get painted behind it */
.pcard h3{
  position:absolute;left:0;right:0;top:100%;
  transform:translateY(clamp(14px,1.5vw,26px));
  font-family:var(--ui);font-weight:500;
  font-size:var(--fs-h3);color:var(--ink);line-height:1.25;
  transition:color .45s var(--ease);
}
.pcard.is-active{z-index:5}
.pcard.is-active figure{box-shadow:0 34px 70px -34px rgba(10,30,90,.68)}
.pcard.is-active h3{color:var(--blue);font-weight:700}
.pcard.is-active:hover img{transform:scale(1.05)}

.carousel__nav{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.5vw,26px);margin-top:clamp(26px,3vw,48px)}
.round-btn{
  width:clamp(42px,3.1vw,56px);aspect-ratio:1;border-radius:50%;
  border:1.4px solid rgba(17,56,184,.45);color:var(--blue);
  display:grid;place-items:center;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.round-btn svg{width:20px;height:20px;stroke-width:1.6}
.round-btn:hover{background:var(--blue);color:#fff;transform:scale(1.07)}
.carousel__bar{width:clamp(140px,19vw,290px);height:2px;background:rgba(17,56,184,.22);border-radius:2px;overflow:hidden}
.carousel__bar span{display:block;height:100%;width:20%;background:var(--blue);border-radius:2px;transition:transform .55s var(--ease),width .55s var(--ease)}

/* =========================================================
   PARTNER / WHY
   ========================================================= */
.partner{
  position:relative;overflow:hidden;color:#fff;
  padding-block:clamp(60px,8vw,130px);
  background:var(--blue-deep);
}
.partner__bg{position:absolute;inset:-8% 0;z-index:0}
.partner__bg img{width:100%;height:100%;object-fit:cover;object-position:center right}
.partner__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,#0D2F9D 0%,rgba(13,47,157,.92) 34%,rgba(13,47,157,.25) 62%,rgba(13,47,157,0) 86%);
}
.partner__3d{position:absolute;inset:0;z-index:1;pointer-events:none}
.partner__3d canvas{display:block;width:100%;height:100%}
.partner__inner{position:relative;z-index:2}
.partner .display{max-width:20ch}
.features{margin-top:clamp(30px,4vw,62px);display:grid;gap:clamp(20px,2.4vw,38px);max-width:620px}
.feature{display:flex;gap:clamp(14px,1.3vw,24px);align-items:flex-start}
.feature img{width:clamp(38px,3.1vw,56px);height:auto;flex:0 0 auto}
.feature h3{font-family:var(--ui);font-weight:700;font-size:var(--fs-h3);color:#fff;margin-bottom:.3em}
.feature p{font-size:var(--fs-sm);color:rgba(255,255,255,.88);max-width:44ch}

/* =========================================================
   INDUSTRIES
   ========================================================= */
.industries{background:var(--grey-bg)}
.industries .display{max-width:24ch;margin-inline:auto}
.ind-grid{
  margin-top:clamp(32px,4.4vw,70px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,34px);
}
.ind figure{
  overflow:hidden;border-radius:var(--r-md);aspect-ratio:306/372;
  box-shadow:0 16px 40px -26px rgba(10,30,90,.55);
}
.ind img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ind h3{
  margin-top:.9em;text-align:center;font-family:var(--ui);font-weight:500;
  font-size:var(--fs-h3);color:var(--ink);transition:color .4s var(--ease),font-weight .3s;
}
.ind:hover img{transform:scale(1.07)}
.ind:hover h3,.ind.is-active h3{color:var(--blue);font-weight:700}

/* =========================================================
   SOLUTIONS
   ========================================================= */
.solutions{background:var(--grey-bg);padding-top:0}
.solutions .display{max-width:26ch;margin-inline:auto}
.sol-grid{
  margin-top:clamp(30px,3.8vw,60px);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,36px);
}
.sol{
  border-radius:var(--r-lg);padding:clamp(24px,2.6vw,46px);
  display:grid;align-content:start;gap:.85em;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.sol:hover{transform:translateY(-6px)}
.sol h3{font-family:var(--ui);font-weight:700;font-size:clamp(1.3rem,2.2vw,2.625rem)}
.sol p{font-size:var(--fs-sm);max-width:52ch}
.sol .btn{margin-top:.9em;justify-self:start}
.sol--blue{background:var(--blue);color:#fff;box-shadow:0 26px 60px -34px rgba(17,56,184,.9)}
.sol--blue p{color:rgba(255,255,255,.9)}
.sol--grey{background:var(--grey-foot);color:var(--blue)}
.sol--grey p{color:#2F3F7A}

/* =========================================================
   APPROACH / STICKY NOTES
   ========================================================= */
/* A scroll runway: the section is (steps + 1) viewports tall, and the stage
   inside it pins while you scroll through. JS writes one number, --p, and the
   CSS below does all the animating off it. */
.approach{
  --steps:4;--p:0;
  position:relative;
  height:calc((var(--steps) + 1) * 100svh);
  background:#56B9F2;
}
.approach__stage{
  position:sticky;top:0;
  height:100svh;
  overflow:hidden;              /* clipping lives here, not on the section —
                                   overflow on an ancestor would kill sticky */
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(20px,4vh,54px);
  padding-block:clamp(48px,7vh,100px);
}
.approach__bg{position:absolute;inset:-10% 0;z-index:0}
.approach__bg img{width:100%;height:100%;object-fit:cover}
.approach__3d{position:absolute;inset:0;z-index:1;pointer-events:none}
.approach__3d canvas{display:block;width:100%;height:100%}
.approach__inner{position:relative;z-index:2}
.approach .display{font-size:var(--fs-h2)}

.notes{
  position:relative;margin-top:clamp(34px,4.6vw,76px);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,30px);align-items:start;
  /* one shared vanishing point, so the four cards read as one pinboard */
  perspective:1400px;
  perspective-origin:50% 38%;
  /* defaults live here so each note can override them without a fight */
  --rx:0deg;--ry:0deg;--tz:0px;--sc:1;
}
.approach__inner .notes{margin-top:0}
/* the dashed route marches forward as the steps land */
.notes__path path{stroke-dashoffset:calc(var(--p) * -260px)}
.notes__path{
  position:absolute;inset:-6% 2% auto 2%;height:48%;width:96%;
  z-index:0;pointer-events:none;
}
.notes__path path{stroke:#0E2E9E;stroke-width:2;stroke-dasharray:7 9;opacity:.75}

.note{
  position:relative;z-index:1;
  transform-style:preserve-3d;
  --rotNow:var(--rot,0deg);
}
.note__card{
  position:relative;
  background:var(--note);
  padding:clamp(18px,1.7vw,32px) clamp(18px,1.6vw,30px) clamp(26px,2.2vw,40px);
  color:#fff;
  filter:drop-shadow(0 18px 30px rgba(10,40,110,.28));
  transition:filter .55s var(--ease);
}
.note--1{--rot:-.6deg;margin-top:0}
.note--2{--rot:.8deg;margin-top:clamp(28px,3.6vw,74px)}
.note--3{--rot:-.4deg;margin-top:clamp(10px,1.4vw,26px)}
.note--4{--rot:1deg;margin-top:clamp(40px,5.2vw,106px)}
/* Every note transform is composed from these four variables — the entrance,
   the pointer tilt and the hover lift all just rewrite variables, so they
   never fight over the `transform` property. */
/* --t is this note's own slice of the runway, 0 → 1. It deals the card up
   from below the fold and stands it upright; --rx/--ry are the live pointer
   tilt and --tz/--sc the hover lift, all composed into one transform. */
.note{
  --t:1;
  transform:
    translateY(calc((1 - var(--t)) * 46vh))
    rotateX(calc(var(--rx) + (1 - var(--t)) * 15deg))
    rotateY(var(--ry))
    translateZ(var(--tz))
    rotateZ(var(--rotNow))
    scale(calc(var(--sc) * (0.9 + var(--t) * 0.1)));
  opacity:calc(var(--t) * 1.6);
  transition:transform .14s linear;
  will-change:transform,opacity;
}

/* lift the note off the board and straighten it, as if pulled forward */
.note:hover,.note:focus-within{--tz:42px;--sc:1.03;--rotNow:calc(var(--rot,0deg) * .2);z-index:3}
.note:hover .note__card,.note:focus-within .note__card{filter:drop-shadow(0 34px 48px rgba(10,40,110,.4))}

/* the pin sits proud of the card surface, so it parallaxes against it */
.note__pin{transform:translateZ(34px)}
.note__pin svg{transition:transform .55s var(--ease)}
.note:hover .note__pin svg{transform:rotate(-14deg) scale(1.12)}
.note__num{transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.note:hover .note__num{transform:scale(1.1);box-shadow:0 6px 16px rgba(10,40,110,.25)}
.note h3,.note p{transition:transform .55s var(--ease)}
.note:hover h3{transform:translateX(3px)}

.note__pin{position:absolute;top:-10px;right:14px;width:clamp(26px,2.2vw,38px);display:block}
.note__pin svg{width:100%;height:auto;stroke:none}
.note__num{
  display:grid;place-items:center;width:clamp(32px,2.6vw,46px);aspect-ratio:1;
  border-radius:50%;background:#fff;color:var(--note);
  font-family:var(--ui);font-weight:700;font-size:clamp(.7rem,.95vw,1.125rem);
}
.note h3{
  margin-top:clamp(14px,1.5vw,26px);
  font-family:var(--ui);font-weight:700;font-size:var(--fs-h3);line-height:1.22;
}
.note p{margin-top:.7em;font-size:var(--fs-sm);color:rgba(255,255,255,.95)}
.note__tear{position:absolute;left:0;right:0;bottom:-24px;width:100%;height:26px;display:block;stroke:none}

/* =========================================================
   BRANDS MARQUEE
   ========================================================= */
.brands{background:#fff;padding-block:clamp(48px,6vw,96px)}
.brands .display{margin-bottom:clamp(26px,3.4vw,54px)}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__group{
  display:flex;align-items:center;
  gap:clamp(40px,5vw,96px);padding-inline:clamp(20px,2.5vw,48px);
}
.marquee__group li{flex:0 0 auto}
.marquee__group img{
  height:auto;width:auto;object-fit:contain;
  max-height:clamp(34px,3.2vw,58px);
  max-width:clamp(104px,11.5vw,210px);
  transition:transform .45s var(--ease),filter .45s var(--ease);
}
.marquee__group li.is-tall img{max-height:clamp(52px,5vw,92px)}
.marquee__group img:hover{transform:scale(1.07);filter:saturate(1.15)}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.tst{background:var(--grey-bg)}
.tst-grid{
  margin-top:clamp(28px,3.6vw,58px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,30px);
}
.tst-card{
  background:var(--grey-card);border-radius:var(--r-md);
  padding:clamp(20px,2vw,36px);
  display:grid;grid-template-rows:auto 1fr auto;gap:1.1em;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),background .4s var(--ease);
}
.tst-card:hover{transform:translateY(-8px);box-shadow:0 26px 48px -30px rgba(10,30,90,.6);background:#DDE0E6}
.stars{color:var(--blue);font-size:clamp(1rem,1.3vw,1.5rem);letter-spacing:.12em}
.tst-card p{color:var(--ink);font-size:var(--fs-sm);line-height:1.55}
.tst-card footer{display:grid;gap:.2em}
.tst-card strong{font-family:var(--ui);font-weight:700;color:var(--blue);font-size:var(--fs-sm)}
.tst-card span{font-family:var(--ui);font-size:clamp(.78rem,.92vw,1.06rem);color:#4A4A50}

/* =========================================================
   BLOGS
   ========================================================= */
.blogs{background:var(--grey-bg);padding-top:0}
.blogs__head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.blogs__grid{
  margin-top:clamp(24px,3vw,48px);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(20px,3vw,56px);align-items:start;
}
.blog-hero{
  position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:705/628;
  box-shadow:0 22px 50px -32px rgba(10,30,90,.6);
}
.blog-hero img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.blog-hero:hover img{transform:scale(1.06)}
.blog-hero__body{
  position:absolute;inset:auto 0 0 0;padding:clamp(18px,2vw,34px);
  color:#fff;background:linear-gradient(transparent,rgba(12,22,46,.72) 55%);
}
.blog-hero__body .meta{color:rgba(255,255,255,.9)}
.blog-hero__body h3{font-family:var(--ui);font-weight:600;font-size:var(--fs-h3);line-height:1.25;margin-top:.3em}

.blog-list{display:grid}
.blog-list li{padding-block:clamp(16px,1.7vw,30px);border-bottom:1px solid #C9CACE}
.blog-list li:last-child{border-bottom:0}
.meta{font-family:var(--ui);font-size:clamp(.78rem,.92vw,1.06rem);color:#55555C}
.blog-list h3{
  font-family:var(--ui);font-weight:500;color:var(--ink);
  font-size:var(--fs-h3);line-height:1.28;margin:.35em 0 .8em;
  transition:color .35s var(--ease);
}
.blog-list li:hover h3{color:var(--blue)}

/* =========================================================
   CTA
   ========================================================= */
.cta{
  background:var(--blue);color:#fff;
  padding-block:clamp(64px,8.6vw,150px);
  position:relative;overflow:hidden;
}
.cta::after{
  content:"";position:absolute;width:60vw;aspect-ratio:1;border-radius:50%;
  left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%);
  pointer-events:none;
}
.cta__title{font-size:var(--fs-h2-lg);line-height:1.12;margin-bottom:clamp(26px,3.3vw,56px)}
.cta .shell{position:relative;z-index:1}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--grey-foot);color:var(--blue);padding-block:clamp(44px,5.4vw,90px) clamp(24px,2.4vw,40px)}
.footer__top{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.brand--footer .brand__mark{width:clamp(58px,4.6vw,88px);border-radius:14px}
.brand--footer .brand__text strong{font-size:clamp(1rem,1.44vw,1.65rem)}
.brand--footer .brand__text em{font-size:clamp(.7rem,1.02vw,1.15rem)}
.footer__tagline{
  text-align:right;font-size:clamp(1.3rem,2.6vw,3.2rem);line-height:1.2;color:var(--blue);
}

.contact-bar{
  margin-top:clamp(26px,3.2vw,52px);
  background:var(--blue);border-radius:10px;color:#fff;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.contact-bar li{position:relative}
.contact-bar li+li::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.4)}
.contact-bar a{
  display:flex;align-items:center;justify-content:center;gap:.7em;
  padding:clamp(14px,1.5vw,26px) 10px;
  font-family:var(--display);font-size:clamp(.95rem,1.6vw,2rem);
  transition:background .35s var(--ease);
  border-radius:10px;
}
.contact-bar a:hover{background:rgba(255,255,255,.1)}
.contact-bar svg{width:1.15em;height:1.15em;flex:0 0 auto;stroke-width:1.6}

.footer__cols{
  margin-top:clamp(30px,3.6vw,58px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px);
}
.footer__cols h4{font-family:var(--ui);font-weight:700;font-size:var(--fs-h3);margin-bottom:.7em}
.footer__cols ul{display:grid;gap:.55em}
.footer__cols a{font-family:var(--ui);font-size:var(--fs-sm);position:relative;transition:opacity .3s}
.footer__cols a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.footer__cols a:hover::after{transform:scaleX(1);transform-origin:left}
.footer__address address{font-family:var(--ui);font-size:var(--fs-sm);line-height:1.7}

.footer__bottom{
  margin-top:clamp(28px,3.2vw,52px);padding-top:clamp(16px,1.6vw,26px);
  border-top:1px solid rgba(17,56,184,.3);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.footer__bottom p{font-family:var(--ui);font-size:clamp(.78rem,.9vw,1.06rem)}
.socials{display:flex;gap:clamp(12px,1.2vw,22px)}
.socials a{display:grid;place-items:center;width:30px;height:30px;transition:transform .35s var(--ease)}
.socials svg{width:24px;height:24px}
svg.solid{fill:currentColor;stroke:none}
.socials a:hover{transform:translateY(-3px) scale(1.08)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .ind-grid,.tst-grid{grid-template-columns:repeat(2,1fr)}
  .footer__cols{grid-template-columns:repeat(2,1fr)}
  .notes{grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,44px) clamp(14px,2vw,30px)}
  .notes__path{display:none}
  .note--2,.note--3,.note--4{margin-top:0}
}

@media (max-width:980px){
  .nav{
    position:fixed;inset:0 0 auto 0;margin:0;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    padding:92px var(--gut) 34px;
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform .55s var(--ease),opacity .4s var(--ease),visibility .4s;
    box-shadow:0 24px 60px -30px rgba(10,30,90,.5);
  }
  .nav.is-open{transform:translateY(0);opacity:1;visibility:visible}
  .nav__list{flex-direction:column;align-items:flex-start;gap:18px}
  .nav__link{font-size:1.3rem}
  .nav__cta{display:block;margin-top:10px}
  .nav__cta .btn{font-size:1rem}
  .brand,.header__actions{position:relative;z-index:2}
  .burger{display:flex}
  .header__actions>.btn{display:none}
  .about__grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .stat:nth-child(3)::before{display:none}
  .sol-grid{grid-template-columns:1fr}
  .blogs__grid{grid-template-columns:1fr}
  .footer__tagline{text-align:left}
  .hero__scroller{display:none}
}

/* Below 760px the stage un-pins: four notes plus a heading will not sit in
   one viewport, so the section returns to normal flow and each note scrubs
   off its own position instead of a shared runway. */
@media (max-width:760px){
  .approach{height:auto;overflow:hidden;padding-block:clamp(60px,7.4vw,120px) clamp(70px,9vw,150px)}
  .approach__stage{position:static;height:auto;padding-block:0;overflow:visible;display:block}
  .approach__inner .notes{margin-top:clamp(34px,4.6vw,76px)}
  .note{
    transform:
      translateY(calc((1 - var(--t)) * 12vh))
      rotateZ(var(--rotNow))
      scale(calc(var(--sc) * (0.94 + var(--t) * 0.06)));
  }
}

@media (max-width:680px){
  .ind-grid,.tst-grid{grid-template-columns:1fr}
  .notes{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .footer__cols h4{font-size:1.05rem}
  .contact-bar{grid-template-columns:1fr}
  .contact-bar li+li::before{left:12%;right:12%;top:0;bottom:auto;width:auto;height:1px}
  .contact-bar a{justify-content:flex-start;padding-inline:20px}
  .hero{min-height:min(88svh,760px);padding-block:120px 60px;align-items:flex-start}
  .hero__slide img{object-position:68% center}
  .hero__veil{background:linear-gradient(176deg,rgba(185,225,250,.96) 12%,rgba(185,225,250,.72) 44%,rgba(185,225,250,.08) 78%)}
  .hero__title{max-width:none}
  .hero__cta .btn{flex:1 1 100%;justify-content:center}
  .stats{grid-template-columns:1fr;gap:22px}
  .stat+.stat::before{display:none}
  .blogs__head{flex-direction:column;align-items:flex-start}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-anim]{opacity:1 !important;transform:none !important}
  [data-anim="lines"] .line>span{transform:none !important}
  .note{transform:rotate(var(--rot,0deg)) !important}
}

/* =========================================================
   PRODUCTS — tabbed categories, 3 products each (shared)
   ========================================================= */
.prodx{margin-top:clamp(30px,4vw,64px)}

.prodx__tabs{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(8px,1vw,16px);
}
.prodx__tab{
  font-family:var(--ui);font-weight:600;font-size:var(--fs-sm);
  color:var(--ink);background:#fff;
  border:1.5px solid rgba(28,32,41,.16);border-radius:999px;
  padding:.62em 1.35em;line-height:1;white-space:nowrap;
  transition:color .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.prodx__tab:hover{border-color:var(--c);color:var(--c);transform:translateY(-2px)}
.prodx__tab.is-active{
  background:var(--c);border-color:var(--c);color:#fff;
  box-shadow:0 12px 26px -12px var(--c);
}

.prodx__panels{margin-top:clamp(28px,3.6vw,56px);position:relative}
.prodx__panel{display:none}
.prodx__panel.is-active{display:block;animation:prodxIn .5s var(--ease) both}
@keyframes prodxIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.prodx__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,36px);
}
.prodx__panel--one .prodx__grid{
  grid-template-columns:minmax(0,clamp(260px,32vw,380px));
  justify-content:center;
}

.prod{display:grid}
.prod__shot{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;
  background:radial-gradient(130% 92% at 50% 0%, color-mix(in srgb,var(--c) 20%, #fff) 0%, #F2F1ED 72%);
  display:grid;place-items:center;
  box-shadow:0 18px 46px -28px rgba(10,20,40,.42);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.prod:hover .prod__shot{
  transform:translateY(-7px);
  box-shadow:0 34px 64px -30px color-mix(in srgb,var(--c) 55%, transparent);
}
.prod__shot img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:14%;opacity:0;
  transition:opacity .45s var(--ease),transform 1s var(--ease);
}
.prod__shot.has-img{background:#fff}
.prod__shot.has-img img{opacity:1}
.prod:hover .prod__shot.has-img img{transform:scale(1.05)}
.prod__glyph{color:var(--c);opacity:.5;transition:opacity .35s var(--ease)}
.prod__glyph svg{width:clamp(46px,6vw,84px);height:auto;stroke-width:1.6}
.prod__shot.has-img .prod__glyph{opacity:0}

.prod__name{
  margin-top:.85em;text-align:center;
  font-family:var(--display);font-weight:400;
  font-size:var(--fs-h3);color:var(--ink);line-height:1.2;
}

@media (max-width:760px){
  .prodx__tabs{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scrollbar-width:none;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .prodx__tabs::-webkit-scrollbar{display:none}
  .prodx__tab{flex:0 0 auto}
  .prodx__grid{grid-template-columns:repeat(2,1fr)}
  .prodx__panel--one .prodx__grid{grid-template-columns:minmax(0,300px)}
}
@media (max-width:460px){
  .prodx__grid{grid-template-columns:1fr;max-width:320px;margin-inline:auto}
}

/* =========================================================
   PRODUCTS — ecodry-style CATEGORY SHOWCASE (choose → themed featured products)
   ========================================================= */
.show-wrap{margin-top:clamp(28px,3.6vw,56px)}
.show{
  position:relative;overflow:hidden;border-radius:30px;
  min-height:clamp(480px,50vw,600px);display:flex;flex-direction:column;
  background:radial-gradient(130% 90% at 12% -10%, color-mix(in srgb,var(--c,#1C8F5E) 18%,#fff), #fbfbfa 62%);
  transition:background .7s var(--ease);
}
.show__wave{
  position:absolute;left:-10%;right:-10%;bottom:0;height:40%;z-index:0;
  background:linear-gradient(180deg, var(--c,#1C8F5E), color-mix(in srgb,var(--c,#1C8F5E) 72%,#000 28%));
  border-radius:48% 52% 0 0 / 90% 90% 0 0;transition:background .7s var(--ease);
}
.show__inner{
  position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1fr 1.25fr;gap:24px;
  align-items:center;padding:clamp(26px,3.6vw,60px) clamp(26px,3.6vw,60px) 0;
}
.show__lead{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.show__lead.is-swap{opacity:0;transform:translateY(-16px)}
.show__eyebrow{font-family:var(--ui);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:.78rem;color:var(--c,#1C8F5E);transition:color .7s var(--ease)}
.show__name{font-family:var(--display);color:var(--ink);font-size:clamp(2.1rem,4.4vw,3.875rem);
  line-height:1.05;margin:.12em 0 .35em}
.show__desc{font-size:var(--fs-body);max-width:40ch;color:var(--body);margin:0 0 1.6em}
.show__cta{display:inline-flex;align-items:center;gap:.5em;font-family:var(--ui);font-weight:600;
  background:var(--c,#1C8F5E);color:#fff;padding:.85em 1.6em;border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;transition:background .7s var(--ease),transform .3s var(--ease)}
.show__cta:hover{transform:translateY(-3px)}
.show__cta::after{content:"";width:14px;height:14px;border-top:2px solid #fff;border-right:2px solid #fff;
  transform:rotate(45deg) scale(.7);margin-left:.1em}

.show__fan{display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,1.2vw,20px);
  height:100%;padding-bottom:clamp(30px,4vw,64px)}
.show__card{background:#fff;border-radius:22px;padding:clamp(12px,1.2vw,18px);
  width:clamp(110px,14vw,185px);box-shadow:0 30px 60px -28px rgba(10,20,40,.4);
  display:flex;flex-direction:column;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.show__card--mid{width:clamp(140px,18vw,235px);transform:translateY(-34px);z-index:2}
.show__card.is-swap{opacity:0;transform:scale(.94)}
.show__card--mid.is-swap{opacity:0;transform:translateY(-34px) scale(.94)}
.show__card:nth-child(2){transition-delay:.05s}
.show__card:nth-child(3){transition-delay:.1s}
.show__shot{flex:1;display:grid;place-items:center;min-height:clamp(90px,11vw,150px)}
.show__shot img{max-width:100%;max-height:clamp(100px,13vw,180px);object-fit:contain}
.show__pname{font-family:var(--ui);font-weight:600;font-size:var(--fs-sm);text-align:center;margin-top:.5em;color:var(--ink)}

.show__nav{position:relative;z-index:3;display:flex;align-items:center;gap:clamp(8px,1vw,16px);
  justify-content:center;flex-wrap:wrap;padding:clamp(16px,1.8vw,26px)}
.show__chips{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex-wrap:wrap;justify-content:center}
.show__chip{display:inline-flex;align-items:center;gap:.5em;font-family:var(--ui);font-weight:600;font-size:var(--fs-sm);
  background:rgba(255,255,255,.9);border:1.5px solid rgba(255,255,255,.9);color:#2a2a2e;
  padding:.5em 1.05em;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s}
.show__chip .dot{width:11px;height:11px;border-radius:50%;background:var(--dc);transition:background .3s}
.show__chip:hover{transform:translateY(-2px)}
.show__chip.is-active{color:#fff;background:var(--dc);border-color:var(--dc);box-shadow:0 12px 24px -12px var(--dc)}
.show__chip.is-active .dot{background:#fff}
.show__arrow{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:#fff;color:#2a2a2e;
  display:grid;place-items:center;font-size:1.4rem;line-height:1;box-shadow:0 10px 24px -12px rgba(10,20,40,.4);transition:transform .3s}
.show__arrow:hover{transform:scale(1.08)}

@media (max-width:820px){
  .show__inner{grid-template-columns:1fr;text-align:center;padding-top:clamp(30px,6vw,40px)}
  .show__desc{margin-inline:auto}
  .show__fan{padding-bottom:20px}
  .show__card{width:30%}.show__card--mid{width:36%}
}
@media (prefers-reduced-motion:reduce){
  .show,.show__wave,.show__lead,.show__card,.show__cta,.show__eyebrow{transition:none}
}

/* =========================================================
   LOGO — shining silver foil (as on the client's printed card)
   Blue tile + the glyph cut from logo-glyph.png and filled with a
   brushed-metal gradient; a bright glint sweeps across it.
   ========================================================= */
.brand__mark{
  position:relative;display:block;aspect-ratio:1;overflow:hidden;
  background:linear-gradient(145deg,#1a45d6 0%,#1134b8 55%,#0b2490 100%);
}
.brand__mark .foil{
  position:absolute;inset:0;display:block;
  -webkit-mask:url(../img/logo-glyph.png?v=4) center/100% 100% no-repeat;
          mask:url(../img/logo-glyph.png?v=4) center/100% 100% no-repeat;
  background:
    linear-gradient(115deg,transparent 38%,rgba(255,255,255,.95) 49%,rgba(255,255,255,.95) 51%,transparent 62%) -160% 0/260% 100% no-repeat,
    linear-gradient(135deg,#8d95a3 0%,#eef1f6 18%,#a9b0bc 34%,#ffffff 50%,#9aa2af 66%,#e4e8ee 82%,#aab1bd 100%);
  animation:foilGlint 4.2s cubic-bezier(.5,0,.2,1) infinite;
  filter:drop-shadow(0 0 .5px rgba(255,255,255,.7));
}
@keyframes foilGlint{0%,35%{background-position:-160% 0,0 0}75%,100%{background-position:260% 0,0 0}}
@media (prefers-reduced-motion:reduce){.brand__mark .foil{animation:none}}

/* =========================================================
   MULTICOLOUR BRAND — client wants the banner palette (violet,
   magenta, amber, green) instead of one blue. Logo tile, wordmark,
   nav, hero title and primary buttons.
   ========================================================= */
:root{
  --plum:#3B2070;
  --grad-brand:linear-gradient(115deg,#6E45B8 0%,#BB337A 52%,#E0802A 100%);
}
.brand__mark{background:linear-gradient(145deg,#1a45d6 0%,#1134b8 55%,#0b2490 100%);box-shadow:0 6px 18px rgba(12,38,120,.22)}
.brand__text{color:var(--blue)}
.brand__text strong{
  color:var(--blue);
}
.nav__link{color:var(--plum)}
.hero__title{color:var(--plum)}
.btn--primary{--bg:var(--blue);--fg:#fff}
.btn--light{--bg:#fff;--fg:var(--blue)}
.hero__rail i{background:var(--c-hair)}

/* Showcase product tiles are now cut from the approved banners, so they carry
   the banner colours; soften the edges so they read as photo tiles on the card. */
.show__shot img{border-radius:14px;max-height:clamp(120px,16vw,230px)}
.show__card{background:#fff}

/* Showcase blends into the page — no outer box or coloured wave; the category
   colour now lives only in the eyebrow, button, chips and a soft glow. */
.show{
  background:radial-gradient(60% 70% at 72% 45%, color-mix(in srgb,var(--c,#6E45B8) 14%,transparent), transparent 70%);
  border-radius:0;overflow:visible;min-height:0;
}
.show__wave{display:none}
.show__inner{padding:clamp(10px,2vw,30px) 0 0}
.show__fan{padding-bottom:clamp(16px,2vw,28px)}
.show__nav{padding-top:clamp(18px,2.2vw,32px)}

/* Showcase speaks the same visual language as the rest of the page: brand-blue
   Marcellus headings, blue eyebrow + button, one theme accent (no per-category
   green/red/amber). Category identity stays in the small chip dots only. */
.show{--c:#1138B8 !important;
  background:radial-gradient(60% 70% at 72% 45%, rgba(110,69,184,.10), transparent 70%)}
.show__eyebrow{color:var(--blue);letter-spacing:.14em}
.show__name{font-family:var(--display);font-weight:400;color:var(--blue)}
.show__desc{color:var(--body)}
.show__cta{background:var(--blue)}
.show__chip.is-active{background:var(--blue);border-color:var(--blue);box-shadow:0 12px 24px -12px rgba(17,56,184,.6)}
.show__chip.is-active .dot{background:#fff}
.show__card{box-shadow:0 24px 50px -28px rgba(17,56,184,.35)}

/* Business Approach — client artwork: sticky-note PNGs, dotted route, pin */
.note__card{
  background:var(--note-img) center/100% 100% no-repeat;
  padding:clamp(22px,2vw,36px) clamp(20px,1.8vw,32px) clamp(30px,2.6vw,48px);
}
.note__tear{display:none}
.notes__path{position:absolute;inset:auto;left:2%;top:-4%;width:96%;height:auto;object-fit:fill;opacity:.85}
.note__pin img{display:block;width:100%;height:auto}
/* the note PNGs carry a few % of transparent margin — keep copy inside the paper */
.note__card{padding:clamp(26px,2.6vw,46px) 11% clamp(36px,3.4vw,58px)}
.note__num{margin-left:0}

/* Pins sit ON the dotted route: the route image spans the whole notes row, and
   each note is dropped to the curve height at its own pin (sizes in cqw so the
   match holds at every desktop width). */
@media (min-width:761px){
  .notes{container-type:inline-size}
  .notes__path{left:0;top:0;width:100%;height:auto;inset:0 auto auto 0;opacity:.9}
  .note--1{margin-top:calc(7cqw - 16px)}
  .note--2{margin-top:calc(23.1cqw - 16px)}
  .note--3{margin-top:calc(1.6cqw - 16px)}
  .note--4{margin-top:calc(14.9cqw - 16px)}
}