/* ============================================================
   SUNCITY  ·  by Amarprakash  —  2026 Premium Redesign
   Palette sampled from "Suncity E-brochure.pdf"
   brand green #48a800 · lime #a8d848 · deep forest #0d1f14
   luxury gold #c9a227  (regal accent)
   ============================================================ */

:root{
  /* ---- Sampled + refined brand tokens ---- */
  --ink:        #0b1a11;   /* near-black forest — regal base   */
  --forest:     #103019;   /* deep emerald                     */
  --emerald:    #1c5c34;   /* mid emerald                      */
  --brand:      #48a800;   /* PRIMARY (sampled)                */
  --brand-600:  #3d8f04;
  --leaf:       #6cbf1f;
  --lime:       #a8d848;   /* SECONDARY (sampled)              */
  --gold:       #c9a227;   /* luxury accent (sampled ribbon)   */
  --gold-soft:  #e6cf8a;
  --cream:      #f6f8f1;
  --sand:       #eef2e6;
  --paper:      #ffffff;
  --muted:      #5f6b60;
  --line:       rgba(11,26,17,.10);

  --ff-display: "Fraunces", "Playfair Display", Georgia, serif;
  --ff-body:    "Manrope", "Inter", system-ui, -apple-system, sans-serif;

  --shadow-sm: 0 4px 18px -8px rgba(11,26,17,.25);
  --shadow-lg: 0 30px 70px -30px rgba(11,26,17,.45);
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--cream);
  overflow-x:clip;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--brand); color:#fff; }

/* custom scrollbar */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--sand); }
::-webkit-scrollbar-thumb{ background:var(--emerald); border-radius:20px; border:3px solid var(--sand); }

/* ---------- Type helpers ---------- */
.font-display{ font-family:var(--ff-display); font-weight:600; letter-spacing:-.01em; }
.kicker{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  font-weight:700; color:var(--brand-600);
  display:inline-flex; align-items:center; gap:.7rem;
}
.kicker::before{
  content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--gold),transparent);
}
.kicker.center::after{
  content:""; width:34px; height:1px; background:linear-gradient(270deg,var(--gold),transparent);
}
.gold-text{ color:var(--gold); }
.hairline{ height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.6; }

/* section index tag */
.sec-index{
  font-family:var(--ff-display); font-size:.8rem; color:var(--gold);
  letter-spacing:.2em;
}

/* ---------- Glassmorphism ---------- */
.glass{
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.18);
}
.glass-dark{
  background:rgba(11,26,17,.55);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid rgba(255,255,255,.08);
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:100px; font-weight:700; font-size:.9rem;
  letter-spacing:.02em; cursor:pointer; border:1px solid transparent;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .35s, color .35s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px); }
.btn-gold{
  background:linear-gradient(135deg,var(--gold),#a9821a);
  color:#1a1405; box-shadow:0 14px 34px -14px rgba(201,162,39,.75);
}
.btn-gold:hover{ box-shadow:0 22px 46px -16px rgba(201,162,39,.9); }

/* floating WhatsApp (sits above the back-to-top button) */
#waFloat{
  position:fixed; right:1.25rem; bottom:5.5rem; z-index:60;
  width:54px; height:54px; display:grid; place-items:center;
  border-radius:9999px; color:#fff; background:#25d366;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, box-shadow .3s var(--ease);
}
#waFloat.show{ opacity:1; visibility:visible; transform:translateY(0); }
#waFloat:hover{ box-shadow:0 20px 42px -10px rgba(37,211,102,.9); transform:translateY(-2px); }

/* back-to-top */
#toTop{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:60;
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:9999px; color:#1a1405; cursor:pointer;
  background:linear-gradient(135deg,var(--gold),#a9821a);
  box-shadow:0 14px 34px -14px rgba(201,162,39,.8);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
#toTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
#toTop:hover{ box-shadow:0 20px 42px -14px rgba(201,162,39,.95); transform:translateY(-2px); }
.btn-emerald{ background:var(--brand); color:#fff; box-shadow:0 14px 34px -16px rgba(72,168,0,.8); }
.btn-emerald:hover{ background:var(--brand-600); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); box-shadow:0 18px 40px -20px rgba(255,255,255,.35); }
/* outline / secondary button for light backgrounds */
.btn-outline{ background:transparent; border-color:var(--forest); color:var(--forest); }
.btn-outline:hover{ background:var(--forest); color:#fff; box-shadow:0 18px 40px -18px rgba(16,48,25,.55); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:var(--forest); }

/* ---------- Navigation ---------- */
.topbar{
  background:var(--ink); color:#c3d4ba; font-size:.78rem; letter-spacing:.015em;
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden; max-height:48px;
  transition:max-height .45s var(--ease), opacity .3s ease;
}
.nav.tb-hide .topbar{ max-height:0; opacity:0; }  /* collapse the info strip once the user scrolls */
.topbar a{ transition:color .3s; }
.topbar a:hover{ color:#fff; }
.topbar .tb-link{ color:#8fa886; }
.topbar .tb-link:hover{ color:var(--lime); }

.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:transform .5s var(--ease), background .4s, box-shadow .4s, padding .4s;
}
.nav.scrolled{
  background:rgba(247,249,242,.88);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 12px 40px -22px rgba(11,26,17,.55);
  border-bottom:1px solid var(--line);
}
.nav.hide{ transform:translateY(-120%); }
.nav-link{
  position:relative; font-weight:600; font-size:.9rem; padding:.4rem 0; color:var(--ink);
}
.nav.at-top .nav-link{ color:#fff; }
/* brand lockup */
.nav .brand-txt{ color:var(--ink); transition:color .35s; letter-spacing:-.01em; }
.nav.at-top .brand-txt{ color:#fff; }
.brand-sub{ color:var(--gold); }
.nav.at-top .brand-sub{ color:var(--gold-soft); }
/* logo: sits on a white chip over the dark hero so the dark wordmark stays visible */
.nav .brand-logo{ border-radius:10px; padding:.3rem .5rem; background:transparent; transition:background .35s, box-shadow .35s; }
.nav.at-top .brand-logo{ background:rgba(255,255,255,.92); box-shadow:0 8px 24px -12px rgba(0,0,0,.45); }

/* mobile menu (burger): white over hero, dark once scrolled */
#burger{ color:var(--ink); }
.nav.at-top #burger{ color:#fff; }

.nav-link::after{
  content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--brand)); transition:width .4s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

/* mobile drawer */
.drawer{ transition:transform .5s var(--ease), visibility .5s; }
.drawer.closed{ transform:translateX(100%); visibility:hidden; pointer-events:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; overflow:hidden; background:var(--ink); }
.hero-media{ position:absolute; inset:-8% 0 0 0; will-change:transform; }
.hero-media img{ width:100%; height:118%; object-fit:cover; }
/* hero slideshow — crossfade + slow ken-burns zoom */
.hero-media .hero-slide{
  position:absolute; top:0; left:0; opacity:0; transform:scale(1.08);
  transition:opacity 1.4s var(--ease), transform 8s linear;
}
.hero-media .hero-slide.is-active{ opacity:1; transform:scale(1); }
/* hero navigation dots */
.hero-dots{
  position:absolute; right:1.75rem; bottom:2rem; z-index:10;
  display:flex; flex-direction:column; gap:.75rem;
}
.hero-dot{
  width:11px; height:11px; border-radius:9999px; cursor:pointer;
  background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.55);
  transition:background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hero-dot:hover{ background:rgba(255,255,255,.7); }
.hero-dot.is-active{
  background:var(--gold); border-color:var(--gold);
  transform:scale(1.25); box-shadow:0 0 0 4px rgba(201,162,39,.25);
}
@media(max-width:640px){
  .hero-dots{ right:50%; bottom:1.4rem; transform:translateX(50%); flex-direction:row; }
  .hero .scroll-cue{ display:none; }
}

/* hero copy — stacked in one grid cell so the block sizes to the tallest slide */
.hero-copies{ display:grid; }
.hero-copies > .hero-copy{
  grid-area:1 / 1; opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.hero-copies > .hero-copy.is-active{ opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .hero-media .hero-slide{ transition:opacity .4s linear; transform:none; }
  .hero-media .hero-slide.is-active{ transform:none; }
  .hero-copies > .hero-copy{ transition:opacity .4s linear; transform:none; }
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,26,17,.55) 0%, rgba(11,26,17,.15) 35%, rgba(11,26,17,.55) 75%, rgba(11,26,17,.92) 100%),
    radial-gradient(120% 90% at 15% 20%, rgba(11,26,17,.5), transparent 60%);
}
.hero h1{ font-size:clamp(2.7rem,7vw,6rem); line-height:.98; }
.scroll-cue{ animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%,100%{transform:translateY(0);opacity:.4} 50%{transform:translateY(10px);opacity:1} }

/* thin marquee */
.marquee{ overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:3.5rem; padding-right:3.5rem; animation:scrollx 28s linear infinite; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
.marquee-item{ font-family:var(--ff-display); font-size:1.05rem; color:var(--forest); display:inline-flex; align-items:center; gap:1rem; }
.marquee-item::after{ content:"✦"; color:var(--gold); font-size:.7rem; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

/* ---------- Bento highlights ---------- */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bento .cell{
  position:relative; border-radius:22px; padding:1.9rem; overflow:hidden;
  border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bento .cell:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.bento .lg{ grid-column:span 2; grid-row:span 2; }
.bento .wide{ grid-column:span 2; }
.bento .dark{ background:linear-gradient(150deg,var(--forest),var(--ink)); color:#eef3ea; border-color:transparent; }
.bento .brandbg{ background:linear-gradient(150deg,var(--brand),var(--emerald)); color:#fff; border-color:transparent; }
.icon-badge{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:rgba(72,168,0,.10); color:var(--brand-600); margin-bottom:1.1rem;
}
.dark .icon-badge, .brandbg .icon-badge{ background:rgba(255,255,255,.14); color:#fff; }
@media(max-width:900px){ .bento{ grid-template-columns:repeat(2,1fr);} .bento .lg{grid-column:span 2;grid-row:auto} }
@media(max-width:560px){ .bento{ grid-template-columns:1fr;} .bento .lg,.bento .wide{grid-column:span 1} }

/* ---------- Residence cards ---------- */
.res-card{ position:relative; border-radius:26px; overflow:hidden; min-height:520px; box-shadow:var(--shadow-lg); }
.res-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.res-card:hover img{ transform:scale(1.07); }
.res-card .veil{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(11,26,17,.92) 0%,rgba(11,26,17,.25) 55%,rgba(11,26,17,.35) 100%); }

/* ---------- Amenities ---------- */
.amen{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:1/1; }
.amen img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .6s; }
.amen::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(11,26,17,.9),transparent 60%); opacity:.85; transition:opacity .5s; }
.amen:hover img{ transform:scale(1.1); }
.amen .label{ position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:2; color:#fff; transform:translateY(6px); transition:transform .5s var(--ease); }
.amen:hover .label{ transform:none; }
.amen .label small{ color:var(--lime); }

/* ---------- Video cinematic ---------- */
.playbtn{
  width:96px; height:96px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); color:#fff;
  transition:transform .5s var(--ease), background .4s;
}
.playbtn:hover{ transform:scale(1.08); background:rgba(255,255,255,.22); }
.playbtn::before{ content:""; position:absolute; width:96px; height:96px; border-radius:50%; border:1px solid rgba(255,255,255,.35); animation:ping 2.4s var(--ease) infinite; }
@keyframes ping{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.7);opacity:0} }

/* ---------- Gallery masonry ---------- */
.masonry{ columns:3; column-gap:16px; }
@media(max-width:900px){ .masonry{ columns:2; } }
@media(max-width:560px){ .masonry{ columns:1; } }
.masonry .tile{ break-inside:avoid; margin-bottom:16px; border-radius:16px; }
/* clickable image tile — shared by every gallery-style grid across the site */
.tile{ position:relative; overflow:hidden; cursor:pointer; }
.tile img{ width:100%; transition:transform .9s var(--ease); }
.tile:hover img{ transform:scale(1.06); }
/* hover scrim */
.tile::before{ content:""; position:absolute; inset:0; background:rgba(11,26,17,.35); opacity:0; transition:opacity .4s var(--ease); }
.tile:hover::before{ opacity:1; }
/* round zoom badge */
.tile::after{
  content:""; position:absolute; top:50%; left:50%;
  width:54px; height:54px; transform:translate(-50%,-50%) scale(.8);
  border-radius:9999px; box-shadow:0 10px 26px -8px rgba(0,0,0,.6);
  background:rgba(255,255,255,.94) center/24px 24px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230b1a11'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.35-4.35M11%208v6M8%2011h6'/%3E%3C/svg%3E");
  opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.tile:hover::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }
/* touch devices have no hover — show the zoom cue by default so it reads as tappable */
@media (hover: none){
  .tile::after{ opacity:.95; transform:translate(-50%,-50%) scale(1); width:46px; height:46px; }
}
/* small screens: pin the zoom cue to the bottom-right corner */
@media (max-width:640px){
  .tile::after{
    top:auto; left:auto; bottom:10px; right:10px; transform:none;
    opacity:.95; width:40px; height:40px; background-size:20px 20px;
  }
}

/* ---------- Accordion (specs) ---------- */
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{ cursor:pointer; padding:1.35rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.acc-head h4{ font-family:var(--ff-display); font-size:1.2rem; margin:0; }
.acc-plus{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; flex:none; transition:.4s var(--ease); color:var(--brand-600); }
.acc-item.open .acc-plus{ transform:rotate(135deg); background:var(--brand); color:#fff; border-color:var(--brand); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.acc-body-inner{ padding:0 0 1.4rem; color:var(--muted); }
.acc-body-inner li{ margin-bottom:.5rem; }

/* ---------- Lightbox / video modal ---------- */
.modal{ position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:5vw;
  background:rgba(6,14,9,.9); backdrop-filter:blur(6px); }
.modal.on{ display:grid; }
.modal .frame{ width:min(1100px,100%); aspect-ratio:16/9; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-lg); }
.modal img.frame{ aspect-ratio:auto; max-height:86vh; width:auto; object-fit:contain; }
.modal-close{ position:absolute; top:24px; right:28px; color:#fff; font-size:2rem; cursor:pointer; line-height:1; z-index:2; }
/* lightbox prev / next */
.modal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; border-radius:9999px; cursor:pointer;
  display:grid; place-items:center; color:#fff; font-size:2rem; line-height:0;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.modal-nav:hover{ background:rgba(255,255,255,.26); }
.modal-prev{ left:3vw; } .modal-next{ right:3vw; }
@media(max-width:640px){
  .modal-nav{ width:44px; height:44px; font-size:1.6rem; }
  .modal-prev{ left:10px; } .modal-next{ right:10px; }
}

/* counters */
.stat-num{ font-family:var(--ff-display); line-height:1; }

/* footer */
.footer a{ transition:color .3s; }
.footer a:hover{ color:var(--lime); }

/* form */
.field{ position:relative; }
.field input, .field textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:12px; padding:1rem 1.1rem; color:#fff; font-family:inherit; font-size:.95rem;
  transition:border .35s, background .35s;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.5); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--lime); background:rgba(255,255,255,.1); }

/* utility */
.container-x{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:1.25rem; }
@media(min-width:640px){ .container-x{ padding-inline:1.75rem; } }
@media(min-width:1024px){ .container-x{ padding-inline:2rem; } }
.tab-btn.active{ background:var(--ink); color:#fff; }
/* gallery filter tabs */
.filter-btn{ transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .45s var(--ease); }
.filter-btn.active{ background:linear-gradient(135deg,var(--brand),var(--emerald)); color:#fff; border-color:transparent; box-shadow:0 10px 25px -8px rgba(72,168,0,.4); }

/* global overflow safety */
html{ overflow-x:clip; }                 /* clips the off-canvas drawer (fixed) without a scrollbar */
body{ max-width:100%; overflow-x:clip; } /* clip (not hidden) so position:sticky asides keep working */
img,svg,video,iframe{ max-width:100%; }

/* ---------- "More" dropdown ---------- */
.more-menu{
  position:absolute; top:150%; right:0; min-width:210px; padding:.6rem;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); display:grid; gap:.1rem;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.35s var(--ease);
}
.more-menu.open{ opacity:1; visibility:visible; transform:none; }
.more-menu a{ padding:.6rem .8rem; border-radius:10px; font-size:.9rem; font-weight:600; color:var(--ink); transition:.25s; }
.more-menu a:hover{ background:var(--sand); color:var(--brand-600); }

/* ---------- Inner page hero banner ---------- */
.page-hero{ position:relative; padding:12rem 0 4.5rem; overflow:hidden; background:var(--ink); color:#fff; }
.page-hero-media{ position:absolute; inset:0; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.page-hero-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,26,17,.75),rgba(11,26,17,.55) 40%,rgba(11,26,17,.9)); }
.page-hero h1{ font-family:var(--ff-display); font-weight:600; font-size:clamp(2.4rem,5.5vw,4rem); line-height:1.02; }
.breadcrumb{ font-size:.8rem; letter-spacing:.08em; color:rgba(255,255,255,.6); }
.breadcrumb a:hover{ color:var(--lime); }
.breadcrumb .sep{ color:var(--gold); margin:0 .55rem; }

/* ---------- Prose (text pages) ---------- */
.prose h2{ font-family:var(--ff-display); font-size:1.7rem; font-weight:600; margin:2.2rem 0 .9rem; color:var(--forest); }
.prose h3{ font-family:var(--ff-display); font-size:1.3rem; font-weight:600; margin:1.8rem 0 .7rem; color:var(--forest); }
.prose p{ color:var(--muted); margin-bottom:1.1rem; }
.prose a{ color:var(--brand-600); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.prose ul.ticks{ list-style:none; padding:0; display:grid; gap:.85rem; }
.prose ul.ticks li{ position:relative; padding-left:2rem; color:var(--ink); }
.prose ul.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; width:1.4rem; height:1.4rem;
  background:rgba(72,168,0,.12); color:var(--brand-600); border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:700; }

/* aside cards on text pages */
.aside-card{ background:linear-gradient(160deg,var(--forest),var(--ink)); color:#fff; border-radius:22px; padding:2rem; }
.aside-card .stat-num{ color:var(--gold); }

/* generic image grid tile border */
.grid-tile{ border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow-sm); }