/* ==========================================================================
   SEGIT - Sort & Segregate  |  Static site design system
   Faithful rebuild of segit.in (royal-blue brand) + senior-engineer polish
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --blue:            #183FA1;   /* primary royal blue (nav, cards, footer) */
  --blue-strong:     #12327f;   /* darker blue for hovers/gradients */
  --blue-600:        #1B48AB;
  --blue-tint:       #ECF6FF;   /* light section background */
  --blue-hero-top:   #F1F6F8;
  --blue-hero-bottom:#B3E3FE;   /* light-blue bottom of hero gradient */
  --watermark:       #D7E8FB;   /* faint section watermark headings */

  /* SDG palette */
  --sdg-8:  #98183A;  /* maroon  - Decent Work & Economic Growth   */
  --sdg-9:  #EC551D;  /* orange  - Industry, Innovation & Infra.   */
  --sdg-11: #ED861D;  /* amber   - Sustainable Cities & Communities*/
  --sdg-13: #37733C;  /* green   - Climate Action                  */

  /* Neutrals */
  --ink:      #0f2350;   /* deep navy text for headings */
  --body:     #4b5563;   /* body text */
  --muted:    #6b7280;
  --line:     #e5eaf2;
  --white:    #ffffff;

  /* Type */
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1200px;
  --radius:  22px;
  --radius-sm: 14px;
  --radius-lg: 32px;
  --shadow:   0 18px 40px -18px rgba(24, 63, 161, .28);
  --shadow-sm:0 8px 24px -12px rgba(15, 35, 80, .25);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea { font:inherit; }
h1,h2,h3,h4 { font-family:var(--font-head); color:var(--ink); line-height:1.15; font-weight:600; }
:focus-visible { outline:3px solid var(--blue-600); outline-offset:3px; border-radius:6px; }

/* ---------- Layout helpers ---------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.section { padding-block: clamp(56px, 8vw, 104px); position:relative; }
.section--tint { background:var(--blue-tint); }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); color:var(--blue); font-family:var(--font-head);
  font-weight:600; font-size:.9rem; padding:10px 18px; border-radius:999px;
  box-shadow: var(--shadow-sm);
}
.eyebrow .star { width:18px; height:18px; flex:none; }

/* Faint oversized watermark heading behind a section title */
.watermark {
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  color:var(--watermark); letter-spacing:.02em; line-height:.9;
  font-size: clamp(2.6rem, 9vw, 7rem);
  text-align:center; user-select:none; pointer-events:none;
}
.watermark--left { text-align:left; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-head); font-weight:600; font-size:.98rem;
  padding:14px 28px; border-radius:999px; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  white-space:nowrap;
}
.btn--primary { background:var(--blue); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover { background:var(--blue-strong); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn--ghost { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.75); }
.btn--ghost:hover { background:#fff; color:var(--blue); }
.btn--outline { background:transparent; color:var(--blue); border:1.5px solid var(--blue); }
.btn--outline:hover { background:var(--blue); color:#fff; }
.btn--sm { padding:11px 22px; font-size:.9rem; }

/* ==========================================================================
   NAVBAR - blue rounded pill
   ========================================================================== */
.nav-wrap { position:sticky; top:0; z-index:60; padding:18px 0; }
.nav {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--blue); color:#fff; border-radius:var(--radius);
  padding:14px 18px 14px 30px; box-shadow:var(--shadow);
}
.nav__brand { display:flex; flex-direction:column; line-height:1; }
.nav__brand .logo { font-family:var(--font-head); font-weight:700; font-size:1.6rem; letter-spacing:.06em; color:#fff; }
.nav__brand .logo b { color:#fff; }
.nav__brand .tag { font-size:.5rem; letter-spacing:.32em; color:#cfe0ff; margin-top:3px; text-transform:uppercase; }
.nav__links { display:flex; align-items:center; gap:8px; }
.nav__links a {
  font-family:var(--font-head); font-weight:500; font-size:.98rem; color:#eaf1ff;
  padding:10px 20px; border-radius:999px; transition:background .2s, color .2s;
}
.nav__links a:hover { background:rgba(255,255,255,.12); }
.nav__links a.is-active { background:#fff; color:var(--blue); font-weight:600; }
.nav__cta { display:flex; align-items:center; gap:12px; }
.nav__mobile { display:none; }
.nav__toggle { display:none; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content:""; display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:.25s var(--ease);
}
.nav__toggle span::before { transform:translateY(-7px); }
.nav__toggle span::after  { transform:translateY(5px); }
.nav.is-open .nav__toggle span { background:transparent; }
.nav.is-open .nav__toggle span::before { transform:rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform:rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--blue-hero-top) 0%, #E4F2FD 55%, var(--blue-hero-bottom) 100%);
  padding-block: 40px clamp(60px, 9vw, 120px);
}
.hero::before { /* subtle diagonal line texture */
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(24,63,161,.05) 0 1px, transparent 1px 46px);
  opacity:.7; pointer-events:none;
}
.hero__inner { position:relative; }
.hero__head { text-align:center; max-width:820px; margin:8px auto 0; }
.hero__title { font-size:clamp(2.1rem, 5.2vw, 3.8rem); font-weight:600; letter-spacing:-.01em; }
.hero__title span { display:block; }
.hero__sub { color:var(--body); margin-top:18px; font-size:1.05rem; max-width:620px; margin-inline:auto; }

.hero__grid {
  margin-top:clamp(28px, 5vw, 56px);
  display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap:22px; align-items:stretch;
}
.hero__note {
  background:linear-gradient(180deg,#eaf4ff,#dfefff); border-radius:var(--radius);
  padding:26px 24px 60px; color:var(--blue); font-family:var(--font-head); font-weight:500;
  font-size:1.12rem; position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
}
.hero__note .arrow { position:absolute; left:24px; bottom:22px; width:52px; height:2px; background:var(--blue); }
.hero__note .arrow::after { content:""; position:absolute; right:-2px; top:-4px; width:9px; height:9px; border-top:2px solid var(--blue); border-right:2px solid var(--blue); transform:rotate(45deg); }
.hero__note .wave { position:absolute; left:0; right:0; bottom:0; height:70px; background:radial-gradient(120% 80% at 30% 120%, #bcdcff, transparent 60%); }

.stat {
  background:var(--blue); color:#fff; border-radius:var(--radius); padding:30px 26px;
  display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease);
}
.stat:hover { transform:translateY(-4px); }
.stat__num { font-family:var(--font-head); font-weight:700; font-size:1.9rem; }
.stat__txt { font-size:.9rem; color:#d7e2ff; margin-top:10px; line-height:1.55; }

.hero__figure {
  position:relative; width:min(300px, 34vw); align-self:stretch;
}
.hero__figure img {
  width:100%; height:100%; object-fit:cover;
  border-radius:44% 44% 46% 46% / 30% 30% 34% 34%;
  box-shadow: var(--shadow);
}
/* floating decorative icons */
.float { position:absolute; border-radius:50%; background:var(--blue); display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-sm); }
.float svg { width:22px; height:22px; }
.float--a { width:46px; height:46px; top:-6px; right:-8px; }
.float--b { width:40px; height:40px; top:34%; right:-26px; background:#4a74d8; }
.float--c { width:34px; height:34px; bottom:16%; right:-14px; background:#7aa0e6; }
.hero .spark { position:absolute; color:var(--blue); }
.hero .spark--1 { top:120px; left:6%; width:26px; }
.hero .spark--2 { top:220px; left:3%; width:34px; opacity:.5; }

/* ==========================================================================
   WHAT WE DO
   ========================================================================== */
.wwd__grid { display:grid; grid-template-columns: 0.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.wwd__media { position:relative; }
.collage { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:16px; }
.collage img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.collage .c1 { grid-row:1 / 3; border-radius:120px 24px 24px 24px; aspect-ratio:3/4.4; }
.collage .c2 { grid-column:2; border-radius:24px 24px 24px 120px; aspect-ratio:3/3.5; }
.collage .c3 { grid-column:1; grid-row:3; aspect-ratio:3/1.4; }
.wwd__badge { position:absolute; top:-14px; left:44%; z-index:2; }

.wwd__body .watermark { position:relative; margin-bottom:-18px; }
.wwd__title { font-size:clamp(1.35rem,2.4vw,1.9rem); color:var(--blue); line-height:1.25; }
.wwd__text { margin:16px 0 26px; max-width:52ch; }
.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.svc-card {
  display:flex; align-items:center; gap:16px; background:var(--blue); color:#fff;
  border-radius:var(--radius-sm); padding:18px 20px; box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), background .22s;
}
.svc-card:hover { transform:translateY(-4px); background:var(--blue-strong); }
.svc-card__icon { width:52px; height:52px; border-radius:12px; background:#fff; flex:none; display:grid; place-items:center; padding:8px; }
.svc-card__icon img { width:100%; }
.svc-card h4 { color:#fff; font-size:1rem; font-weight:600; line-height:1.25; }

/* ==========================================================================
   WHY CHOOSE SEGIT - interactive SDG selector
   ========================================================================== */
.why__wrap { position:relative; margin-top:8px; }
.why__grid { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.sdg-cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sdg-card {
  position:relative; border-radius:var(--radius); padding:26px 22px 22px; min-height:170px;
  color:#fff; text-align:left; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .22s var(--ease), box-shadow .22s; overflow:hidden;
}
.sdg-card:hover { transform:translateY(-4px); }
.sdg-card.is-active { box-shadow:0 0 0 4px rgba(255,255,255,.6), var(--shadow); transform:translateY(-4px); }
.sdg-card[data-sdg="8"]  { background:var(--sdg-8);  }
.sdg-card[data-sdg="9"]  { background:var(--sdg-9);  }
.sdg-card[data-sdg="11"] { background:var(--sdg-11); }
.sdg-card[data-sdg="13"] { background:var(--sdg-13); }
.sdg-card__ico { width:42px; height:42px; }
.sdg-card__ico img { width:100%; height:100%; object-fit:contain; }
.sdg-card__name { font-family:var(--font-head); font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.01em; padding-right:38px; }
.sdg-card__no {
  position:absolute; right:18px; bottom:18px; width:34px; height:34px; border-radius:50%;
  background:#fff; color:var(--ink); display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:.95rem;
}

.sdg-panel { padding-top:6px; }
.sdg-panel__title { font-size:clamp(1.4rem,2.4vw,2rem); }
.sdg-panel__desc { margin:14px 0 22px; max-width:46ch; }
.sdg-tiles { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.sdg-tiles img { width:74px; height:74px; border-radius:12px; object-fit:cover; box-shadow:var(--shadow-sm); }
[data-active-color] .sdg-panel__title { color:var(--active); }
.btn--sdg { background:var(--active,#98183A); color:#fff; }
.btn--sdg:hover { filter:brightness(.92); transform:translateY(-2px); }

/* ==========================================================================
   CLIENTS
   ========================================================================== */
.clients__logos {
  display:flex; align-items:center; justify-content:center; gap:clamp(32px,8vw,110px);
  flex-wrap:wrap; margin-top:8px;
}
.clients__logos img { height:96px; width:auto; object-fit:contain; filter:grayscale(.1); transition:transform .25s var(--ease), filter .25s; }
.clients__logos img:hover { transform:scale(1.05); filter:none; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.tst { text-align:center; }
.tst__head h2 { font-size:clamp(1.6rem,3vw,2.4rem); color:var(--blue); }
.tst__head p { margin-top:8px; color:var(--body); }
.tst__stage { position:relative; max-width:1000px; margin:44px auto 0; padding:0 60px; }
.tst__track { overflow:hidden; }
.tst__item { display:none; animation:fade .5s var(--ease); }
.tst__item.is-active { display:block; }
@keyframes fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.tst__quote { font-size:1.15rem; font-style:italic; color:#3b4b6b; line-height:1.7; }
.tst__person { display:flex; align-items:center; gap:14px; justify-content:center; margin-top:26px; }
.tst__avatar { width:54px; height:54px; border-radius:50%; background:#cfe0ff; display:grid; place-items:center; overflow:hidden; }
.tst__avatar img { width:70%; }
.tst__name { text-align:left; }
.tst__name b { font-family:var(--font-head); color:var(--blue); display:block; }
.tst__name span { font-size:.9rem; color:var(--muted); }
.tst__nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1.5px solid var(--blue); color:var(--blue); display:grid; place-items:center; transition:.2s var(--ease); }
.tst__nav:hover { background:var(--blue); color:#fff; }
.tst__nav--prev { left:0; }
.tst__nav--next { right:0; }
.tst__dots { display:flex; gap:8px; justify-content:center; margin-top:26px; }
.tst__dots button { width:9px; height:9px; border-radius:50%; background:#c7d4ec; transition:.2s; }
.tst__dots button.is-active { background:var(--blue); width:26px; border-radius:6px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background:var(--blue); color:#dbe6ff; padding-block:clamp(46px,6vw,72px) 0; }
.footer__grid { display:grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap:clamp(28px,4vw,56px); }
.footer .logo { font-family:var(--font-head); font-weight:700; font-size:2.2rem; color:#fff; letter-spacing:.05em; }
.footer .tag { letter-spacing:.3em; font-size:.62rem; color:#b9caf2; text-transform:uppercase; margin-top:4px; }
.footer__desc { margin:18px 0 22px; font-size:.95rem; max-width:34ch; }
.socials { display:flex; gap:10px; }
.socials a { width:38px; height:38px; border-radius:50%; background:#fff; color:var(--blue); display:grid; place-items:center; transition:.2s var(--ease); }
.socials a:hover { background:var(--blue-hero-bottom); transform:translateY(-3px); }
.socials svg { width:17px; height:17px; }
.footer__col h4 { color:#fff; font-size:1.15rem; margin-bottom:18px; }
.newsletter { display:flex; gap:8px; background:#fff; border-radius:999px; padding:6px; max-width:360px; }
.newsletter input { flex:1; border:none; background:transparent; padding:10px 16px; color:var(--ink); outline:none; }
.newsletter button { background:var(--blue); color:#fff; border-radius:999px; padding:10px 22px; font-family:var(--font-head); font-weight:600; }
.newsletter button:hover { background:var(--blue-strong); }
.contact-list li { display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.contact-list .ci { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.14); display:grid; place-items:center; flex:none; }
.contact-list svg { width:16px; height:16px; color:#fff; }
.contact-list a, .contact-list span { color:#e7eeff; }
.footer__bar { margin-top:clamp(34px,5vw,54px); border-top:1px solid rgba(255,255,255,.15); padding:20px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; }
.footer__bar a:hover { color:#fff; }

/* Back-to-top */
.to-top { position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:12px; background:var(--blue); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s var(--ease); z-index:50; }
.to-top.show { opacity:1; visibility:visible; transform:none; }
.to-top svg { width:20px; height:20px; }

/* ==========================================================================
   PAGE HEADER (sub-pages)
   ========================================================================== */
.page-hero { background:linear-gradient(180deg,var(--blue-hero-top),#E4F2FD); padding-block:clamp(40px,6vw,72px); text-align:center; position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(115deg, rgba(24,63,161,.05) 0 1px, transparent 1px 46px); }
.page-hero h1 { position:relative; font-size:clamp(2rem,4.5vw,3.2rem); color:var(--blue); }
.breadcrumb { position:relative; margin-top:12px; color:var(--muted); font-size:.9rem; }
.breadcrumb a:hover { color:var(--blue); }

/* generic content cards used on sub-pages */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.feature { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow-sm); transition:transform .22s var(--ease); }
.feature:hover { transform:translateY(-5px); }
.feature .fi { width:60px; height:60px; border-radius:14px; background:var(--blue); display:grid; place-items:center; padding:12px; margin-bottom:18px; }
.feature .fi img { filter:brightness(0) invert(1); }
.feature h3 { color:var(--blue); font-size:1.2rem; margin-bottom:10px; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.split img { border-radius:var(--radius); box-shadow:var(--shadow); width:100%; object-fit:cover; }
.section-title { text-align:center; max-width:640px; margin:0 auto clamp(32px,5vw,52px); }
.section-title h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); color:var(--blue); }
.section-title p { margin-top:12px; }

/* blog cards */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px; }
.post { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .22s var(--ease); display:flex; flex-direction:column; }
.post:hover { transform:translateY(-6px); }
.post__img { aspect-ratio:16/10; overflow:hidden; }
.post__img img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.post:hover .post__img img { transform:scale(1.06); }
.post__body { padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post__meta { font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.post__body h3 { color:var(--ink); font-size:1.15rem; margin:10px 0; line-height:1.35; }
.post__body p { font-size:.94rem; }
.post__more { margin-top:auto; padding-top:16px; color:var(--blue); font-family:var(--font-head); font-weight:600; display:inline-flex; gap:8px; }

/* contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); align-items:start; }
.form-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,40px); box-shadow:var(--shadow-sm); }
.field { margin-bottom:18px; }
.field label { display:block; font-family:var(--font-head); font-weight:500; color:var(--ink); margin-bottom:7px; font-size:.92rem; }
.field input, .field textarea { width:100%; border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; color:var(--ink); background:#fbfcff; transition:border .2s; }
.field input:focus, .field textarea:focus { border-color:var(--blue); outline:none; }
.field textarea { min-height:130px; resize:vertical; }
.form-note { margin-top:14px; font-size:.9rem; }
.form-note.ok { color:var(--sdg-13); }
.form-note.err { color:var(--sdg-9); }
.info-card { background:var(--blue); color:#e7eeff; border-radius:var(--radius); padding:clamp(24px,3vw,40px); }
.info-card h3 { color:#fff; margin-bottom:8px; }
.info-card .contact-list { margin-top:22px; }
.map-embed { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); margin-top:28px; }
.map-embed iframe { width:100%; height:320px; border:0; display:block; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns:1fr 1fr; }
  .hero__note { grid-column:1 / -1; padding-bottom:40px; }
  .hero__figure { grid-column:1 / -1; width:min(360px,70vw); margin-inline:auto; }
  .wwd__grid { grid-template-columns:1fr; }
  .why__grid { grid-template-columns:1fr; }
  .split { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  .nav__links, .nav__cta .btn { display:none; }
  .nav__toggle { display:flex; }
  .nav { padding:14px 18px; }
  .nav__mobile {
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    background:var(--blue); border-radius:var(--radius); padding:16px; display:none; flex-direction:column; gap:6px; box-shadow:var(--shadow); z-index:70;
  }
  .nav.is-open .nav__mobile { display:flex; }
  .nav__mobile a { color:#eaf1ff; padding:12px 16px; border-radius:12px; font-family:var(--font-head); }
  .nav__mobile a.is-active, .nav__mobile a:hover { background:rgba(255,255,255,.12); }
  .nav__mobile .btn { display:inline-flex; margin-top:6px; }
  .footer__grid { grid-template-columns:1fr; }
  .svc-grid { grid-template-columns:1fr; }
  .footer__bar { justify-content:center; text-align:center; }
}
@media (max-width: 560px) {
  .hero__grid { grid-template-columns:1fr; }
  .sdg-cards { grid-template-columns:1fr 1fr; }
  .collage .c1 { border-radius:80px 20px 20px 20px; }
  .tst__stage { padding:0 8px; }
  .tst__nav { position:static; transform:none; margin:18px auto 0; }
  .tst__actions { display:flex; gap:16px; justify-content:center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; scroll-behavior:auto !important; transition:none !important; }
}