/* ============================================================
   Niarka Herbal Care — About page, 2026-10-24 (third version)
   v2/page-about.php. Loaded after look.css on that page only, and uses its colour tokens.
   The owner asked for the old page's material, the products in front, and a polished look:
   rounded cards, soft layered shadows, a little green glow and gentle motion. The homepage stays flat.
   Motion is in about.js; every state that hides something waits for html.ab-js, so the page reads without it.
   ============================================================ */

.niarka-about{
  --ab-r:28px;          /* panels */
  --ab-r-card:22px;     /* cards */
  --ab-r-img:16px;      /* pictures inside cards */
  --ab-ease:cubic-bezier(.2, .7, .2, 1);
  --ab-shadow-sm:0 1px 2px rgba(21, 33, 26, .05), 0 6px 18px -6px rgba(27, 77, 51, .14);
  --ab-shadow:0 2px 4px rgba(21, 33, 26, .04), 0 16px 40px -12px rgba(27, 77, 51, .22);
  --ab-shadow-lg:0 4px 10px rgba(21, 33, 26, .05), 0 32px 64px -18px rgba(27, 77, 51, .34);
  --ab-line:rgba(35, 130, 79, .12);
  --ab-h2:clamp(30px, 3.4vw, 46px);
  overflow-x:clip;
}
.niarka-about .ab-wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.niarka-about h1, .niarka-about h2, .niarka-about h3{ font-family:var(--font); margin:0; text-wrap:balance; }
.niarka-about .ab-nowrap{ white-space:nowrap; }
.niarka-about .ab-section{ position:relative; padding:104px 0 0; }
.niarka-about .ab-section:last-of-type{ padding-bottom:112px; }

/* ---------- shared pieces ---------- */
.niarka-about .ab-label{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:var(--surface-2); color:var(--head); font-size:14px; font-weight:500; line-height:1;
}
.niarka-about .ab-head{ margin-bottom:44px; }
.niarka-about .ab-head h2,
.niarka-about .ab-story-text h2,
.niarka-about .ab-icar-text h2,
.niarka-about .ab-try-text h2{
  font-size:var(--ab-h2); font-weight:500; line-height:1.1; letter-spacing:-.03em; color:var(--ink-1); margin-top:16px;
}
.niarka-about .ab-head-center{ text-align:center; }
.niarka-about .ab-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.niarka-about .ab-more{
  display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-size:16px; font-weight:500; white-space:nowrap;
}
.niarka-about .ab-more span{ transition:transform .25s var(--ab-ease); }
.niarka-about .ab-more:hover span{ transform:translateX(4px); }
.niarka-about .ab-more:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; }

.niarka-about .ab-card{
  background:var(--surface); border-radius:var(--ab-r-card); box-shadow:var(--ab-shadow-sm); border:1px solid var(--ab-line);
}
.niarka-about .ab-panel{
  background:var(--surface); border-radius:var(--ab-r); box-shadow:var(--ab-shadow); border:1px solid var(--ab-line);
}

/* ---------- buttons ---------- */
.niarka-about .ab-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.niarka-about .ab-btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:999px;
  background:var(--accent); color:var(--accent-ink); font-size:16px; font-weight:500; line-height:1.2;
  box-shadow:0 1px 2px rgba(21, 33, 26, .12), 0 10px 24px -8px rgba(35, 130, 79, .7);
  transition:transform .25s var(--ab-ease), box-shadow .25s var(--ab-ease), background .2s ease;
}
.niarka-about .ab-btn svg{ width:20px; height:20px; flex:none; }
.niarka-about .ab-btn:hover{
  background:var(--accent-hover); transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(21, 33, 26, .12), 0 16px 32px -10px rgba(35, 130, 79, .8);
}
.niarka-about .ab-btn:active{ transform:translateY(0) scale(.98); }
.niarka-about .ab-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.niarka-about .ab-btn-soft{ background:var(--surface); color:var(--ink-1); box-shadow:var(--ab-shadow-sm); border:1px solid var(--ab-line); }
.niarka-about .ab-btn-soft svg{ color:#25d366; }
.niarka-about .ab-btn-soft:hover{ background:var(--surface); box-shadow:var(--ab-shadow); }
.niarka-about .ab-btn-light{ background:#fff; color:var(--field); box-shadow:0 12px 28px -10px rgba(0, 0, 0, .35); }
.niarka-about .ab-btn-light:hover{ background:#fff; box-shadow:0 18px 36px -12px rgba(0, 0, 0, .45); }
.niarka-about .ab-btn-ghost{ background:rgba(255, 255, 255, .1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .35); }
.niarka-about .ab-btn-ghost:hover{ background:rgba(255, 255, 255, .18); box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .6); }
.niarka-about .ab-btn-ghost svg{ color:#7ee2a0; }
.niarka-about .ab-btn-light:focus-visible,
.niarka-about .ab-btn-ghost:focus-visible{ outline-color:#fff; }

/* ---------- hero: text on the left, floating product cards on the right ---------- */
.niarka-about .ab-hero{
  position:relative; padding:64px 0 40px;
  background:
    radial-gradient(48% 60% at 78% 46%, rgba(35, 130, 79, .16), transparent 72%),
    radial-gradient(36% 44% at 8% 4%, rgba(35, 130, 79, .08), transparent 70%),
    linear-gradient(180deg, #f0f7f1 0%, var(--ground) 100%);
}
.niarka-about .ab-hero-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.02fr); gap:56px; align-items:center; }
.niarka-about .ab-pill{
  display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 12px; border-radius:999px;
  background:var(--surface); box-shadow:var(--ab-shadow-sm); border:1px solid var(--ab-line);
  font-size:14px; font-weight:500; color:var(--ink-1);
}
.niarka-about .ab-pill-dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(35, 130, 79, .16), 0 0 12px rgba(35, 130, 79, .7);
}
.niarka-about .ab-hero h1{
  font-size:clamp(40px, 4.4vw, 62px); font-weight:500; line-height:1.05; letter-spacing:-.04em; color:var(--ink-1);
  margin:24px 0 22px;
}
.niarka-about .ab-tint{
  display:block;
  background:linear-gradient(100deg, #1e6b42 0%, #2f9b5f 50%, #23824f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.niarka-about .ab-hero-text > p{ font-size:19px; line-height:1.6; color:var(--ink-2); max-width:34em; margin:0 0 32px; }

.niarka-about .ab-hero-art{ position:relative; width:100%; max-width:580px; aspect-ratio:1 / 1.12; justify-self:end; }
.niarka-about .ab-hero-art::before{
  content:""; position:absolute; inset:12% 10%; border-radius:50%;
  background:radial-gradient(circle, rgba(47, 155, 95, .35), rgba(35, 130, 79, 0) 68%); filter:blur(24px);
}
.niarka-about .ab-float{
  position:absolute; margin:0; padding:8px 8px 0; background:var(--surface); border-radius:var(--ab-r-card);
  box-shadow:var(--ab-shadow-lg); border:1px solid var(--ab-line);
}
.niarka-about .ab-float img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:var(--ab-r-img); background:var(--photo); }
.niarka-about .ab-float figcaption{ display:flex; flex-direction:column; gap:1px; padding:10px 8px 12px; line-height:1.3; }
.niarka-about .ab-float figcaption b{ font-size:15px; font-weight:500; color:var(--ink-1); }
.niarka-about .ab-float figcaption span{ font-size:13px; color:var(--ink-2); }
.niarka-about .ab-float-1{ left:0;   top:2%;    width:47%; rotate:-5deg; z-index:2; }
.niarka-about .ab-float-2{ right:3%; top:0;     width:42%; rotate:4deg;  z-index:1; }
.niarka-about .ab-float-3{ left:9%;  bottom:0;  width:42%; rotate:3deg;  z-index:1; }
.niarka-about .ab-float-4{ right:0;  bottom:5%; width:47%; rotate:-3deg; z-index:2; }
.niarka-about .ab-chip{
  position:absolute; left:50%; top:51%; translate:-50% -50%; z-index:3;
  display:flex; align-items:center; gap:10px; padding:8px 18px 8px 8px; border-radius:999px; white-space:nowrap;
  background:rgba(255, 255, 255, .86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--ab-shadow-lg), 0 0 0 1px var(--ab-line);
}
.niarka-about .ab-chip img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.niarka-about .ab-chip span{ display:flex; flex-direction:column; font-size:14px; font-weight:500; line-height:1.25; color:var(--ink-1); }
.niarka-about .ab-chip b{ font-size:12px; font-weight:400; color:var(--ink-2); }

/* ---------- story: one panel, the portrait inside it ---------- */
.niarka-about .ab-story-panel{
  display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); gap:56px; align-items:center; padding:18px;
}
.niarka-about .ab-portrait{ position:relative; margin:0; }
.niarka-about .ab-portrait img{ width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; border-radius:calc(var(--ab-r) - 8px); }
.niarka-about .ab-portrait figcaption{
  position:absolute; left:16px; bottom:16px; padding:10px 16px; border-radius:999px;
  background:rgba(255, 255, 255, .88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--ab-shadow-sm); font-size:14px; color:var(--ink-2);
}
.niarka-about .ab-portrait figcaption b{ font-weight:500; color:var(--ink-1); margin-right:4px; }
.niarka-about .ab-story-text{ padding:24px 40px 24px 0; }
.niarka-about .ab-story-text h2{ margin-bottom:22px; }
.niarka-about .ab-story-text p{ font-size:18px; line-height:1.7; color:var(--ink-1); margin:0 0 16px; max-width:36em; }
.niarka-about .ab-story-text p:last-child{ margin-bottom:0; }

/* ---------- our range: five collection cards ---------- */
.niarka-about .ab-range-grid{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:22px; }
.niarka-about .ab-collection{
  grid-column:span 2; display:flex; flex-direction:column; overflow:hidden; padding:8px;
  transition:transform .35s var(--ab-ease), box-shadow .35s var(--ab-ease);
}
.niarka-about .ab-collection:nth-child(n+4){ grid-column:span 3; flex-direction:row; align-items:center; }
.niarka-about .ab-collection-photo{ display:block; overflow:hidden; border-radius:var(--ab-r-img); background:var(--photo); aspect-ratio:4 / 3; }
.niarka-about .ab-collection:nth-child(n+4) .ab-collection-photo{ flex:0 0 44%; aspect-ratio:1; }
.niarka-about .ab-collection-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; transition:transform .6s var(--ab-ease); }
.niarka-about .ab-collection-text{ display:flex; flex-direction:column; gap:6px; padding:18px 16px 14px; }
.niarka-about .ab-collection:nth-child(n+4) .ab-collection-text{ padding:16px 24px; }
.niarka-about .ab-collection-text b{ font-size:21px; font-weight:500; letter-spacing:-.015em; color:var(--ink-1); }
.niarka-about .ab-collection-text span{ font-size:15px; line-height:1.5; color:var(--ink-2); }
.niarka-about .ab-collection-text em{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-style:normal; font-size:15px; font-weight:500; color:var(--accent);
}
.niarka-about .ab-collection-text i{ font-style:normal; transition:transform .25s var(--ab-ease); }
.niarka-about .ab-collection:hover{ transform:translateY(-6px); box-shadow:var(--ab-shadow-lg); }
.niarka-about .ab-collection:hover img{ transform:scale(1.06); }
.niarka-about .ab-collection:hover i{ transform:translateX(4px); }
.niarka-about .ab-collection:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* ---------- what makes us special: a soft green band of eight cards ---------- */
.niarka-about .ab-special{
  padding-bottom:104px; margin-top:104px; overflow:hidden; background:linear-gradient(180deg, #eef6ef 0%, #f6faf6 100%);
}
.niarka-about .ab-special::before{
  content:""; position:absolute; left:50%; top:0; width:min(1100px, 100vw); height:420px; translate:-50% -55%;
  background:radial-gradient(closest-side, rgba(35, 130, 79, .07), transparent); pointer-events:none;
}
.niarka-about .ab-special-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
.niarka-about .ab-feature{ padding:26px 24px 24px; transition:transform .35s var(--ab-ease), box-shadow .35s var(--ab-ease); }
.niarka-about .ab-feature:hover{ transform:translateY(-4px); box-shadow:var(--ab-shadow); }
.niarka-about .ab-icon{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px; margin-bottom:18px; color:var(--accent);
  background:linear-gradient(145deg, #f2f9f3, #d9eedf);
  box-shadow:inset 0 1px 0 #fff, 0 6px 14px -6px rgba(35, 130, 79, .45);
}
.niarka-about .ab-icon svg{ width:26px; height:26px; }
.niarka-about .ab-feature h3{ font-size:18px; font-weight:500; line-height:1.3; letter-spacing:-.01em; color:var(--ink-1); margin-bottom:8px; }
.niarka-about .ab-feature p{ font-size:16px; line-height:1.55; color:var(--ink-2); margin:0; }

/* ---------- ICAR-DMAPR: a panel with the campus, and the testimonial on deep green ---------- */
.niarka-about .ab-icar-grid{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr); gap:24px; align-items:stretch; }
.niarka-about .ab-icar-card{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:36px; align-items:center; padding:18px; }
.niarka-about .ab-icar-photo{ height:100%; min-height:300px; overflow:hidden; border-radius:calc(var(--ab-r) - 8px); }
.niarka-about .ab-icar-photo img{ width:100%; height:100%; object-fit:cover; }
.niarka-about .ab-icar-text{ padding:16px 24px 16px 0; }
.niarka-about .ab-icar-text h2{ font-size:clamp(28px, 2.6vw, 36px); margin-bottom:16px; }
.niarka-about .ab-icar-text p{ font-size:17px; line-height:1.65; color:var(--ink-1); margin:0 0 22px; }
.niarka-about .ab-medihub{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--ink-2); }
.niarka-about .ab-medihub img{ width:44px; height:44px; border-radius:12px; object-fit:cover; box-shadow:var(--ab-shadow-sm); }

.niarka-about .ab-quote{
  position:relative; overflow:hidden; margin:0; padding:36px 32px 30px; display:flex; flex-direction:column; justify-content:space-between;
  color:var(--field-ink); border:0;
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(126, 226, 160, .22), transparent 70%),
    linear-gradient(160deg, #22603f 0%, var(--field) 60%, #143a27 100%);
  box-shadow:var(--ab-shadow-lg);
}
.niarka-about .ab-quote-mark{ width:40px; height:30px; color:#7ee2a0; opacity:.9; margin-bottom:18px; }
.niarka-about .ab-quote blockquote{ margin:0 0 28px; padding:0; border:0; font-style:normal; }
.niarka-about .ab-quote blockquote p{ font-size:19px; line-height:1.55; letter-spacing:-.005em; margin:0; color:#fff; }
.niarka-about .ab-quote figcaption{ display:flex; align-items:center; gap:14px; }
.niarka-about .ab-quote figcaption img{
  width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px rgba(255, 255, 255, .18), 0 0 20px rgba(126, 226, 160, .35);
}
.niarka-about .ab-quote figcaption span{ display:flex; flex-direction:column; font-size:14px; color:var(--field-ink-2); line-height:1.35; }
.niarka-about .ab-quote figcaption b{ font-size:16px; font-weight:500; color:#fff; }

/* ---------- our journey: a timeline with glowing dots ---------- */
.niarka-about .ab-timeline{ position:relative; list-style:none; margin:0 auto; padding:0; max-width:960px; }
.niarka-about .ab-timeline::before,
.niarka-about .ab-timeline::after{
  content:""; position:absolute; left:50%; top:8px; bottom:8px; width:2px; margin-left:-1px; border-radius:2px;
}
.niarka-about .ab-timeline::before{ background:#dbe9de; }
.niarka-about .ab-timeline::after{
  background:linear-gradient(180deg, #2f9b5f, var(--accent)); box-shadow:0 0 12px rgba(35, 130, 79, .5);
  transform-origin:top; transform:scaleY(var(--ab-progress, 1));
}
.niarka-about .ab-step{ position:relative; width:50%; padding:0 44px 0 0; }
.niarka-about .ab-step + .ab-step{ margin-top:-34px; }
.niarka-about .ab-step:nth-child(even){ margin-left:50%; padding:0 0 0 44px; }
.niarka-about .ab-step-dot{
  position:absolute; top:26px; right:-8px; width:16px; height:16px; border-radius:50%; z-index:1;
  background:#fff; border:4px solid var(--accent); box-shadow:0 0 0 5px rgba(35, 130, 79, .12), 0 0 16px rgba(35, 130, 79, .45);
}
.niarka-about .ab-step:nth-child(even) .ab-step-dot{ right:auto; left:-8px; }
.niarka-about .ab-step-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:20px 24px; transition:transform .35s var(--ab-ease), box-shadow .35s var(--ab-ease);
}
.niarka-about .ab-step:nth-child(odd) .ab-step-card{ align-items:flex-end; text-align:right; }
.niarka-about .ab-step-card:hover{ transform:translateY(-3px); box-shadow:var(--ab-shadow); }
.niarka-about .ab-step-card time{ font-size:14px; font-weight:500; color:var(--accent); }
.niarka-about .ab-step-card b{ font-size:18px; font-weight:500; line-height:1.35; color:var(--ink-1); }
.niarka-about .ab-step-card .ab-more{ font-size:15px; margin-top:4px; }
.niarka-about .ab-step.is-prize .ab-step-card{
  background:linear-gradient(150deg, #ffffff 0%, #eef8f0 100%); border-color:rgba(35, 130, 79, .3); box-shadow:var(--ab-shadow);
}
.niarka-about .ab-step.is-prize .ab-step-dot{
  width:22px; height:22px; right:-11px; top:23px; background:var(--accent); border-color:#fff;
  box-shadow:0 0 0 5px rgba(35, 130, 79, .2), 0 0 24px rgba(35, 130, 79, .7);
}
.niarka-about .ab-step.is-prize:nth-child(even) .ab-step-dot{ right:auto; left:-11px; }
.niarka-about .ab-prize{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; margin-top:2px;
  background:var(--accent); color:#fff; font-size:13px; font-weight:500; box-shadow:0 8px 18px -8px rgba(35, 130, 79, .8);
}
.niarka-about .ab-prize svg{ width:15px; height:15px; }

/* ---------- give our products a try: a green panel ---------- */
.niarka-about .ab-try-panel{
  position:relative; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:32px; align-items:center;
  padding:56px; border-radius:calc(var(--ab-r) + 4px); color:#fff; overflow:hidden;
  background:
    radial-gradient(60% 80% at 90% 10%, rgba(126, 226, 160, .28), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(10, 40, 25, .45), transparent 70%),
    linear-gradient(135deg, #2a8f57 0%, #1f6e45 45%, var(--field) 100%);
  box-shadow:0 30px 70px -24px rgba(27, 77, 51, .6);
}
.niarka-about .ab-try-text h2{ color:#fff; margin:0 0 14px; }
.niarka-about .ab-try-text p{ font-size:18px; line-height:1.6; color:rgba(255, 255, 255, .86); margin:0 0 30px; max-width:30em; }
.niarka-about .ab-try-art{ position:relative; height:280px; }
.niarka-about .ab-try-art img{
  position:absolute; width:52%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:var(--ab-r-card);
  border:6px solid #fff; box-shadow:0 24px 48px -16px rgba(0, 0, 0, .45);
}
.niarka-about .ab-try-art img:first-child{ left:4%; top:0; rotate:-6deg; }
.niarka-about .ab-try-art img:last-child{ right:2%; bottom:0; rotate:5deg; }

/* ============================================================
   Motion (only with html.ab-js; nothing travels under reduced motion)
   ============================================================ */
@keyframes ab-rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes ab-pop{ from{ opacity:0; scale:.9; } to{ opacity:1; scale:1; } }
@keyframes ab-bob{ 0%, 100%{ translate:0 0; } 50%{ translate:0 -12px; } }
@keyframes ab-pulse{
  0%, 100%{ box-shadow:0 0 0 4px rgba(35, 130, 79, .16), 0 0 12px rgba(35, 130, 79, .7); }
  50%{ box-shadow:0 0 0 7px rgba(35, 130, 79, .06), 0 0 18px rgba(35, 130, 79, .9); }
}

@media (prefers-reduced-motion:no-preference){
  .ab-js .niarka-about .ab-rise{ animation:ab-rise .9s var(--ab-ease) both; }
  .ab-js .niarka-about .ab-hero-text > :nth-child(2){ animation-delay:.08s; }
  .ab-js .niarka-about .ab-hero-text > :nth-child(3){ animation-delay:.16s; }
  .ab-js .niarka-about .ab-hero-text > :nth-child(4){ animation-delay:.24s; }
  .ab-js .niarka-about .ab-float{ animation:ab-pop .9s var(--ab-ease) both, ab-bob 7s ease-in-out infinite; }
  .ab-js .niarka-about .ab-float-1{ animation-delay:.15s, 1s; }
  .ab-js .niarka-about .ab-float-2{ animation-delay:.25s, 2.6s; animation-duration:.9s, 8s; }
  .ab-js .niarka-about .ab-float-3{ animation-delay:.35s, 1.8s; animation-duration:.9s, 7.5s; }
  .ab-js .niarka-about .ab-float-4{ animation-delay:.45s, 3.2s; animation-duration:.9s, 6.5s; }
  .ab-js .niarka-about .ab-chip{ animation:ab-pop .8s var(--ab-ease) .7s both; }
  .niarka-about .ab-pill-dot{ animation:ab-pulse 2.4s ease-in-out infinite; }

  /* entrances: about.js adds .is-in once each part is on screen */
  .ab-js .niarka-about [data-reveal]{
    transition:opacity .8s ease var(--d, 0s), transform .9s var(--ab-ease) var(--d, 0s), box-shadow .35s var(--ab-ease);
  }
  .ab-js .niarka-about [data-reveal]:not(.is-in){ opacity:0; transform:translateY(28px); }
  .ab-js .niarka-about .ab-step[data-reveal]:nth-child(odd):not(.is-in){ transform:translateX(-24px); }
  .ab-js .niarka-about .ab-step[data-reveal]:nth-child(even):not(.is-in){ transform:translateX(24px); }
  .ab-js .niarka-about .ab-step[data-reveal] .ab-step-dot{ transition:scale .6s var(--ab-ease) .15s; }
  .ab-js .niarka-about .ab-step[data-reveal]:not(.is-in) .ab-step-dot{ scale:.3; }
  .ab-js .niarka-about .ab-timeline::after{ transform:scaleY(var(--ab-progress, 0)); }
}

/* ============================================================
   Tablet and phone
   ============================================================ */
@media (max-width:980px){
  .niarka-about .ab-section{ padding-top:80px; }
  .niarka-about .ab-special{ margin-top:80px; padding-bottom:80px; }
  .niarka-about .ab-hero{ padding:40px 0 8px; }
  .niarka-about .ab-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .niarka-about .ab-hero-art{ justify-self:center; max-width:520px; }
  .niarka-about .ab-story-panel{ grid-template-columns:1fr; gap:8px; }
  .niarka-about .ab-portrait img{ aspect-ratio:5 / 4; object-position:50% 25%; }
  .niarka-about .ab-story-text{ padding:24px 18px 18px; }
  .niarka-about .ab-range-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
  .niarka-about .ab-collection,
  .niarka-about .ab-collection:nth-child(n+4){ grid-column:auto; flex-direction:column; align-items:stretch; }
  .niarka-about .ab-collection:nth-child(n+4) .ab-collection-photo{ flex:none; aspect-ratio:4 / 3; }
  .niarka-about .ab-collection:nth-child(n+4) .ab-collection-text{ padding:18px 16px 14px; }
  .niarka-about .ab-collection:last-child:nth-child(odd){ grid-column:1 / -1; flex-direction:row; align-items:center; }
  .niarka-about .ab-collection:last-child:nth-child(odd) .ab-collection-photo{ flex:0 0 46%; aspect-ratio:1; }
  .niarka-about .ab-collection:last-child:nth-child(odd) .ab-collection-text{ padding:16px 24px; }
  .niarka-about .ab-special-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .niarka-about .ab-icar-grid{ grid-template-columns:1fr; }
  .niarka-about .ab-icar-card{ grid-template-columns:1fr; gap:8px; }
  .niarka-about .ab-icar-photo{ min-height:0; aspect-ratio:666 / 328; }
  .niarka-about .ab-icar-text{ padding:20px 14px 14px; }
  .niarka-about .ab-try-panel{ grid-template-columns:1fr; padding:44px 36px 36px; }
  .niarka-about .ab-try-art{ height:240px; width:100%; max-width:440px; }
}

@media (max-width:700px){
  .niarka-about .ab-wrap{ padding:0 16px; }
  .niarka-about .ab-section{ padding-top:64px; }
  .niarka-about .ab-section:last-of-type{ padding-bottom:72px; }
  .niarka-about .ab-special{ margin-top:64px; padding-bottom:64px; }
  .niarka-about .ab-head{ margin-bottom:28px; }
  .niarka-about .ab-head-row{ flex-direction:column; align-items:flex-start; gap:14px; }
  .niarka-about .ab-hero h1{ font-size:clamp(36px, 10.4vw, 46px); margin:20px 0 16px; }
  .niarka-about .ab-hero-text > p{ font-size:17px; margin-bottom:26px; }
  .niarka-about .ab-actions .ab-btn{ flex:1 1 100%; justify-content:center; }
  .niarka-about .ab-hero-art{ aspect-ratio:1 / 1.3; }
  .niarka-about .ab-chip{ top:53%; }
  .niarka-about .ab-float{ padding:6px 6px 0; border-radius:18px; }
  .niarka-about .ab-float img{ border-radius:13px; }
  .niarka-about .ab-float figcaption{ padding:8px 6px 9px; }
  .niarka-about .ab-float figcaption b{ font-size:13px; }
  .niarka-about .ab-float figcaption span{ font-size:12px; }
  .niarka-about .ab-chip{ padding:6px 14px 6px 6px; gap:8px; }
  .niarka-about .ab-chip img{ width:32px; height:32px; }
  .niarka-about .ab-chip span{ font-size:13px; }
  .niarka-about .ab-story-panel{ padding:10px; border-radius:24px; }
  .niarka-about .ab-story-text{ padding:20px 10px 12px; }
  .niarka-about .ab-story-text p{ font-size:17px; }
  .niarka-about .ab-range-grid{ grid-template-columns:1fr; gap:14px; }
  .niarka-about .ab-collection,
  .niarka-about .ab-collection:nth-child(n+4),
  .niarka-about .ab-collection:last-child:nth-child(odd){ grid-column:auto; flex-direction:row; align-items:center; padding:6px; }
  .niarka-about .ab-collection .ab-collection-photo,
  .niarka-about .ab-collection:nth-child(n+4) .ab-collection-photo,
  .niarka-about .ab-collection:last-child:nth-child(odd) .ab-collection-photo{ flex:0 0 112px; aspect-ratio:1; border-radius:14px; }
  .niarka-about .ab-collection .ab-collection-text,
  .niarka-about .ab-collection:nth-child(n+4) .ab-collection-text,
  .niarka-about .ab-collection:last-child:nth-child(odd) .ab-collection-text{ padding:8px 12px 8px 16px; gap:4px; }
  .niarka-about .ab-collection-text b{ font-size:18px; }
  .niarka-about .ab-collection-text span{ font-size:14px; }
  .niarka-about .ab-collection-text em{ margin-top:2px; font-size:14px; }
  .niarka-about .ab-special-grid{ grid-template-columns:1fr; gap:12px; }
  .niarka-about .ab-feature{ display:grid; grid-template-columns:48px minmax(0, 1fr); column-gap:16px; padding:18px; }
  .niarka-about .ab-icon{ width:48px; height:48px; margin:0; grid-row:span 2; border-radius:14px; }
  .niarka-about .ab-icon svg{ width:24px; height:24px; }
  .niarka-about .ab-feature h3{ font-size:17px; margin:2px 0 4px; }
  .niarka-about .ab-feature p{ font-size:15px; }
  .niarka-about .ab-icar-card{ padding:10px; border-radius:24px; }
  .niarka-about .ab-quote{ padding:30px 24px 26px; border-radius:24px; }
  .niarka-about .ab-quote blockquote p{ font-size:18px; }

  .niarka-about .ab-timeline::before,
  .niarka-about .ab-timeline::after{ left:9px; }
  .niarka-about .ab-step,
  .niarka-about .ab-step:nth-child(even){ width:auto; margin-left:0; padding:0 0 0 36px; }
  .niarka-about .ab-step + .ab-step{ margin-top:14px; }
  .niarka-about .ab-step-dot,
  .niarka-about .ab-step:nth-child(even) .ab-step-dot{ left:1px; right:auto; top:24px; }
  .niarka-about .ab-step.is-prize .ab-step-dot,
  .niarka-about .ab-step.is-prize:nth-child(even) .ab-step-dot{ left:-2px; right:auto; top:21px; }
  .niarka-about .ab-step:nth-child(odd) .ab-step-card{ align-items:flex-start; text-align:left; }
  .niarka-about .ab-step-card{ padding:16px 18px; }
  .niarka-about .ab-step-card b{ font-size:17px; }

  .niarka-about .ab-try-panel{ padding:36px 22px 28px; border-radius:26px; }
  .niarka-about .ab-try-text p{ font-size:17px; }
  .niarka-about .ab-try-art{ height:200px; }
}
@media (max-width:700px) and (prefers-reduced-motion:no-preference){
  .ab-js .niarka-about .ab-step[data-reveal]:nth-child(odd):not(.is-in),
  .ab-js .niarka-about .ab-step[data-reveal]:nth-child(even):not(.is-in){ transform:translateY(20px); }
}