/* ═══════════════════════════════════════════════════════════════════════
   DESIGN A — POLAM (పొలం). Morning field: warm paper, leaf green, turmeric.
   Calm serif Telugu headlines, arch-shaped windows like a temple doorway.

   Builder template: key `polam-paper`, category `retail`.
   The :root block is the template's `tokens`; everything after it is the
   template's `css`. It only restyles the class names the builder's modules
   already emit, so it ports into catalogue.js verbatim.
   Section ids used below (#millets #benefits #organic #ayurveda) are the
   `id` field in this site's section config — the fallbacks are generic.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --bg:#fbf6ea; --bg-alt:#f2ecda; --panel:#fffdf7;
  --ink:#1b2a1f; --dim:#4b584c; --line:rgba(27,42,31,.13);
  --accent:#1f6b3a; --accent-ink:#fffdf7; --accent2:#8f5a05;
  --ok:#2d754a; --warn:#a33c24;
  --font-display:'Noto Serif Telugu'; --font-body:'Anek Telugu';
  --font-mono:'Anek Telugu'; --font-2:'Fraunces';
  --radius:14px; --maxw:1180px;
}

/* ---- template css ---- */
html { scroll-behavior:smooth; }
body { line-height:1.7;
  background-image:linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 94%, var(--accent)) 35%,
                   var(--bg) 65%, color-mix(in srgb, var(--bg) 92%, var(--accent)) 100%); }
:focus-visible { outline:3px solid var(--accent2); outline-offset:3px; border-radius:4px; }
section[id] { scroll-margin-top:90px; }
.skip { position:absolute; left:12px; top:-80px; z-index:60; padding:12px 18px; border-radius:var(--radius);
  background:var(--accent); color:var(--accent-ink); font-weight:600; }
.skip:focus { top:12px; }

/* Telugu conjuncts break apart under wide tracking and have no capitals. */
.sec-kicker, .top-badge, .stats span, .pl, .seal span, .price { letter-spacing:.03em; text-transform:none; }

/* -------------------------------------------------------------- backdrop
   Leaves, millet, mortar and pestle, turmeric, chilli, tulsi, pepper, a
   rock-salt crystal, a dropper bottle, a bowl of grain and cardamom: line art
   in one 560px tile, painted through a mask so it takes this template's own
   colours. Data URIs, so the template carries no asset files into the builder.
   Generated — edit the motifs, not this text. */
html { --motifs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(70 80) rotate(-30) scale(1)'%3E%3Cpath d='M0-34C20-20 20 20 0 34C-20 20-20-20 0-34ZM0-30V44'/%3E%3Cpath d='M0-12l9-8M0 0l-10-8M0 12l10-8'/%3E%3C/g%3E%3Cg transform='translate(210 110) rotate(10) scale(1)'%3E%3Cpath d='M0 52C2 22 6-4 16-42'/%3E%3Cpath d='M2 30c-14-6-24-18-26-34 12 4 22 16 26 34z'/%3E%3Cellipse cx='16' cy='-44' rx='3.5' ry='6.5' transform='rotate(22 16 -44)'/%3E%3Cellipse cx='9' cy='-36' rx='3.5' ry='6.5' transform='rotate(22 9 -36)'/%3E%3Cellipse cx='20' cy='-32' rx='3.5' ry='6.5' transform='rotate(22 20 -32)'/%3E%3Cellipse cx='4' cy='-26' rx='3.5' ry='6.5' transform='rotate(22 4 -26)'/%3E%3Cellipse cx='15' cy='-21' rx='3.5' ry='6.5' transform='rotate(22 15 -21)'/%3E%3Cellipse cx='1' cy='-14' rx='3.5' ry='6.5' transform='rotate(22 1 -14)'/%3E%3Cellipse cx='11' cy='-10' rx='3.5' ry='6.5' transform='rotate(22 11 -10)'/%3E%3C/g%3E%3Cg transform='translate(380 95) rotate(0) scale(1)'%3E%3Cpath d='M-34 0h68M-30 0c0 22 14 34 30 34S30 22 30 0M-16 34h32'/%3E%3Cpath d='M8-4L30-40' stroke-width='8'/%3E%3C/g%3E%3Cg transform='translate(505 160) rotate(15) scale(0.9)'%3E%3Cpath d='M0-36L20-20V18L0 36-20 18V-20ZM-20-20L0-8 20-20M0-8V36'/%3E%3C/g%3E%3Cg transform='translate(95 250) rotate(20) scale(1)'%3E%3Cpath d='M-36-4c22 12 46 12 64-6 5-4 9 1 6 5-18 22-52 26-72 9Z'/%3E%3Cpath d='M34-8c3-7 1-12 7-17'/%3E%3C/g%3E%3Cg transform='translate(290 265) rotate(-10) scale(1)'%3E%3Cpath d='M-32 6c0-10 10-15 20-11 3-12 16-15 22-7 10-5 21 1 19 12-2 10-14 11-20 7-6 8-20 10-26 4-8 4-15 3-15-5Z'/%3E%3Cpath d='M-14-2v9M2-6v10M18-1v8'/%3E%3C/g%3E%3Cg transform='translate(460 310) rotate(25) scale(1)'%3E%3Cpath d='M0 44C2 14 2-14 0-44'/%3E%3Cpath d='M0 24c-16 0-24-8-24-18 12-2 22 6 24 18ZM0 24c16 0 24-8 24-18-12-2-22 6-24 18ZM0-2c-13 0-20-7-20-15 10-2 18 5 20 15ZM0-2c13 0 20-7 20-15-10-2-18 5-20 15ZM0-26c-9-1-13-7-12-14 7 0 12 6 12 14ZM0-26c9-1 13-7 12-14-7 0-12 6-12 14Z'/%3E%3C/g%3E%3Cg transform='translate(150 390) rotate(0) scale(1)'%3E%3Ccircle cx='0' cy='0' r='6'/%3E%3Ccircle cx='15' cy='-4' r='6'/%3E%3Ccircle cx='6' cy='13' r='6'/%3E%3Ccircle cx='-13' cy='8' r='6'/%3E%3Ccircle cx='-6' cy='-13' r='6'/%3E%3Ccircle cx='21' cy='11' r='6'/%3E%3C/g%3E%3Cg transform='translate(330 425) rotate(-12) scale(1)'%3E%3Cpath d='M-15-8h30v40a6 6 0 0 1-6 6h-18a6 6 0 0 1-6-6ZM-9-8v-8h18v8M-5-16v-12a5 5 0 0 1 10 0v12M-15 8h30M-15 22h30'/%3E%3C/g%3E%3Cg transform='translate(480 475) rotate(0) scale(1)'%3E%3Cpath d='M-34 0h68c0 20-15 30-34 30S-34 20-34 0ZM-30 0c8-14 52-14 60 0'/%3E%3Ccircle cx='-14' cy='-6' r='2.5'/%3E%3Ccircle cx='-4' cy='-9' r='2.5'/%3E%3Ccircle cx='6' cy='-8' r='2.5'/%3E%3Ccircle cx='16' cy='-5' r='2.5'/%3E%3Ccircle cx='1' cy='-3' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(60 480) rotate(40) scale(1)'%3E%3Cpath d='M0-22c11 7 11 37 0 44-11-7-11-37 0-44ZM0-22V22M0 22c0 6 2 10 4 12'/%3E%3C/g%3E%3Cg transform='translate(230 500) rotate(60) scale(0.8)'%3E%3Cpath d='M0-34C20-20 20 20 0 34C-20 20-20-20 0-34ZM0-30V44'/%3E%3Cpath d='M0-12l9-8M0 0l-10-8M0 12l10-8'/%3E%3C/g%3E%3Cg transform='translate(405 215) rotate(120) scale(0.7)'%3E%3Cpath d='M0-34C20-20 20 20 0 34C-20 20-20-20 0-34ZM0-30V44'/%3E%3Cpath d='M0-12l9-8M0 0l-10-8M0 12l10-8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --branch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 290C80 220 140 160 280 20' fill='none' stroke-width='3'/%3E%3Cg transform='translate(55 250) rotate(-5)'%3E%3Cpath d='M0 0C10-24 40-34 70-30 64-4 30 12 0 0Z' fill-opacity='.5'/%3E%3Cpath d='M0 0C24-12 44-22 70-30' fill='none'/%3E%3C/g%3E%3Cg transform='translate(85 222) rotate(-125)'%3E%3Cpath d='M0 0C10-24 40-34 70-30 64-4 30 12 0 0Z' fill-opacity='.5'/%3E%3Cpath d='M0 0C24-12 44-22 70-30' fill='none'/%3E%3C/g%3E%3Cg transform='translate(115 192) rotate(0)'%3E%3Cpath d='M0 0C10-24 40-34 70-30 64-4 30 12 0 0Z' fill-opacity='.5'/%3E%3Cpath d='M0 0C24-12 44-22 70-30' fill='none'/%3E%3C/g%3E%3Cg transform='translate(145 160) rotate(-120)'%3E%3Cpath d='M0 0C10-24 40-34 70-30 64-4 30 12 0 0Z' fill-opacity='.5'/%3E%3Cpath d='M0 0C24-12 44-22 70-30' fill='none'/%3E%3C/g%3E%3Cg transform='translate(178 128) rotate(5)'%3E%3Cpath d='M0 0C10-24 40-34 70-30 64-4 30 12 0 0Z' fill-opacity='.5'/%3E%3Cpath d='M0 0C24-12 44-22 70-30' fill='none'/%3E%3C/g%3E%3Cg transform='translate(212 95) rotate(-115)'%3E%3Cpath d='M0 0C10-24 40-34 70-30 64-4 30 12 0 0Z' fill-opacity='.5'/%3E%3Cpath d='M0 0C24-12 44-22 70-30' fill='none'/%3E%3C/g%3E%3Cg transform='translate(245 60) rotate(-50)'%3E%3Cpath d='M0 0C10-24 40-34 70-30 64-4 30 12 0 0Z' fill-opacity='.5'/%3E%3Cpath d='M0 0C24-12 44-22 70-30' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero, .sec { position:relative; isolation:isolate; }
.hero { overflow:hidden; }
.hero::before, .sec::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--motif-ink, var(--accent)); opacity:var(--motif-a, .07);
  -webkit-mask:var(--motifs) 0 0 / 560px 560px repeat; mask:var(--motifs) 0 0 / 560px 560px repeat; }
.sec:nth-of-type(even)::before { -webkit-mask-position:280px 190px; mask-position:280px 190px; }
.hero::after { content:""; position:absolute; z-index:-1; left:-70px; bottom:-60px; width:440px; height:440px; pointer-events:none;
  background:var(--branch-ink, var(--accent)); opacity:var(--branch-a, .1);
  -webkit-mask:var(--branch) center / contain no-repeat; mask:var(--branch) center / contain no-repeat; }
:root { --motif-a:.07; --branch-a:.11; }
.sec.alt { --motif-a:.09; }

/* ---------------------------------------------------------------- header */
.top { padding:10px 40px; }
.top-brand { margin-right:auto; }
.top-brand img { width:52px; height:52px; border-radius:50%;
  box-shadow:0 0 0 2px var(--panel), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.top-brand b { font-size:22px; font-weight:700; color:var(--ink); line-height:1.3; }
.top-brand small { font-family:var(--font-2), Georgia, serif; font-size:12px; color:var(--accent2); letter-spacing:.06em; }
/* Pills, so the menu reads as buttons rather than a line of text. */
.top-nav { gap:8px; }
.top-nav a { font-size:15px; font-weight:600; padding:7px 15px; border-radius:999px; opacity:1; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, transparent); transition:background .2s, color .2s, border-color .2s; }
.top-nav a:hover, .top-nav a:focus-visible { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.top-call { min-height:44px; border-radius:999px; padding:0 20px; transition:background .2s; }
.top-call:hover { background:color-mix(in srgb, var(--accent) 86%, #000); }

/* ------------------------------------------------------------------ hero */
.hero { min-height:clamp(560px, 78vh, 700px); padding:72px 0 88px;
  background:radial-gradient(60% 80% at 88% 18%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%),
             radial-gradient(45% 60% at 0% 100%, color-mix(in srgb, var(--accent2) 15%, transparent), transparent 70%),
             linear-gradient(165deg, color-mix(in srgb, var(--bg) 60%, #fff), color-mix(in srgb, var(--bg) 90%, var(--accent)) 60%, var(--bg)); }
.hero-bg { inset:50% max(40px, calc((100vw - var(--maxw)) / 2 + 40px)) auto auto; transform:translateY(-50%);
  width:min(44vw, 540px); aspect-ratio:880 / 815; border-radius:24px; overflow:hidden; background:var(--bg-alt);
  box-shadow:0 0 0 10px var(--panel), 0 0 0 11px var(--line), 0 50px 70px -40px rgba(27,42,31,.55); }
.hero-bg::after { display:none; }
/* .hero is a grid, so a margin:auto .wrap would shrink to its content and centre */
.hero > .wrap { width:100%; }
.hero-in { max-width:540px; }
.hero-in::before, .orn i { -webkit-mask:var(--sprig) center / contain no-repeat; mask:var(--sprig) center / contain no-repeat;
  --sprig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath d='M2 14h60' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M32 14c-6-10-14-11-19-9 3 6 11 9 19 9zM32 14c6-10 14-11 19-9-3 6-11 9-19 9z'/%3E%3C/svg%3E"); }
.hero-in::before { content:""; display:block; width:72px; height:30px; margin-bottom:20px; background:var(--accent); }
.hero h1 { text-wrap:balance; font-size:clamp(34px, 4.8vw, 58px); line-height:1.3; font-weight:700; color:var(--accent); letter-spacing:0; }
.hero .t2 { margin-top:16px; font-size:18px; line-height:1.5; color:var(--accent2); font-weight:500; }
.hero .hero-sub { font-size:18px; line-height:1.85; }
.btn { min-height:52px; border-radius:999px; padding:0 28px; font-weight:600; font-size:16px; cursor:pointer;
  transition:transform .2s ease-out, box-shadow .2s ease-out, background .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 14px 26px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn.ghost:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); }

/* -------------------------------------------------------------- headings */
.sec { padding:52px 0; }
.sec.alt { background:radial-gradient(50% 70% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
                      radial-gradient(45% 60% at 0% 100%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 70%),
                      linear-gradient(170deg, var(--bg-alt), color-mix(in srgb, var(--bg-alt) 90%, var(--accent))); }
.sec-kicker { font-size:14px; font-weight:600; color:var(--accent2); }
.sec-title { font-weight:700; line-height:1.35; }
.sec-sub { max-width:680px; margin-left:auto; margin-right:auto; }
.sec-sub.t2 { margin-top:8px; font-size:18px; color:var(--accent); font-weight:500; }
.orn { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px; }
.orn span { width:56px; height:1px; background:color-mix(in srgb, var(--accent) 35%, transparent); }
.orn i { width:40px; height:18px; background:var(--accent); }

/* ----------------------------------------------------------------- cards
   Flex rather than grid so a short last row centres (7 products, 4 across). */
.cards { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
/* base.css makes a figure a grid, and an auto row grows to a tall photo's own height,
   so the photo spills past the frame instead of filling it. Pin the track to the frame. */
.card figure { grid-template:100% / 100%; }
.card { flex:0 1 calc((100% - (var(--cols, 3) - 1) * 22px) / var(--cols, 3)); text-align:center;
  transition:transform .25s ease-out, box-shadow .25s ease-out; }
.card:hover { transform:translateY(-4px); box-shadow:0 26px 44px -30px rgba(27,42,31,.5); }
.card h3 { font-size:20px; line-height:1.4; font-weight:600; }
.card .t2 { font-size:15px; color:var(--accent2); }
.card p:not(.t2) { line-height:1.75; }
.card .price { margin-top:16px; padding:6px 14px; border-radius:999px; font-family:var(--font-body);
  font-size:14px; font-weight:600; line-height:1.5; background:color-mix(in srgb, var(--accent) 9%, transparent); }

/* millets — each grain in its own arch window */
#millets .card { padding:20px 18px 26px; }
#millets .card figure { height:220px; margin:0 0 18px; border-radius:120px 120px 12px 12px; overflow:hidden; background:var(--bg-alt); }
#millets .card figure img { border-radius:0; }

/* why millets — icons on soft leaf discs, no boxes */
#benefits .card { background:none; border:0; padding:8px; box-shadow:none; transform:none; }
#benefits .card figure { width:96px; height:96px; margin:0 auto 18px; border-radius:50%;
  background:color-mix(in srgb, var(--accent) 10%, transparent); }
#benefits .card figure svg { width:44px; height:44px; }
#benefits .card h3 { font-size:18px; }

/* organic — the swatch bowls as round portholes */
#organic .card figure { width:132px; height:132px; margin:0 auto 20px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 6px var(--panel), 0 0 0 7px var(--line); }
#organic .card figure img { border-radius:0; transform:scale(1.24); }

/* ayurveda — picture beside the words */
#ayurveda .card { display:grid; grid-template-columns:190px minmax(0,1fr); column-gap:28px; align-content:start; text-align:left; }
#ayurveda .card figure { grid-row:1 / span 4; height:100%; min-height:280px; margin:0; overflow:hidden;
  border-radius:100px 100px 12px 12px; background:var(--bg-alt); }
#ayurveda .card figure img { border-radius:0; }

/* ------------------------------------------------------------------ intro */
.intro { grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:72px; }
.intro-portrait { border:0; border-radius:180px 180px 18px 18px; background:var(--bg-alt);
  box-shadow:0 0 0 10px var(--panel), 0 0 0 11px var(--line), 0 50px 70px -40px rgba(27,42,31,.55); }
.intro-portrait img { width:100%; height:460px; object-fit:cover; object-position:top; }
.intro-body p { font-size:18px; line-height:1.95; color:var(--ink); }
.intro-body .t2 { color:var(--dim); font-size:17px; line-height:1.7; }
.seal { width:100px; height:100px; background:var(--accent2); color:var(--accent-ink);
  box-shadow:0 0 0 4px var(--bg), 0 0 0 5px var(--accent2); }
.seal span { font-size:13px; }
.seal b { font-family:var(--font-2), Georgia, serif; font-size:26px; }
.stats { gap:16px; }
.stats > div { min-width:140px; padding:18px 22px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); }
.stats b { font-family:var(--font-2), Georgia, serif; font-size:34px; }
.stats span { display:block; margin-top:6px; font-size:15px; }

/* ---------------------------------------------------------------- gallery
   Flyers are portrait and landscape; a masonry column keeps them whole. */
.gallery { display:block; columns:3 260px; column-gap:18px; }
.gallery img { width:100%; height:auto; aspect-ratio:auto; margin:0 0 18px; break-inside:avoid;
  border:0; box-shadow:0 0 0 6px var(--panel), 0 0 0 7px var(--line), 0 26px 40px -30px rgba(27,42,31,.5); }

/* ---------------------------------------------------------------- contact */
.panel { border-radius:22px; }
.pl { font-family:var(--font-body); font-size:15px; color:var(--accent); }
.addr { font-size:17px; line-height:1.9; }
.tel { font-family:var(--font-2), Georgia, serif; font-weight:600; font-size:36px; color:var(--accent); }
.hours .row b { font-family:var(--font-2), Georgia, serif; font-weight:600; }

/* ----------------------------------------------------------------- footer */
.foot { background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #000)); border:0; color:color-mix(in srgb, var(--accent-ink) 82%, transparent); padding:32px 40px; }
.foot b { color:var(--accent-ink); }
.foot small { font-size:14px; margin-top:6px; }
.pb { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:12px; row-gap:2px; text-align:right; }
.pb span { grid-column:1; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; opacity:.85; }
.pb b { grid-column:1; font-size:15px; letter-spacing:.02em; }
/* square white tile, as on the sibling sites: the mark is round and needs its own ground */
.pb img { grid-column:2; grid-row:1 / span 2; width:56px; height:56px; padding:5px; border-radius:12px;
  background:#fff; object-fit:contain; box-shadow:0 8px 18px -8px rgba(0,0,0,.6); }

/* ------------------------------------------------------------- responsive */
@media (max-width:860px) {
  .top { position:sticky; flex-wrap:wrap; gap:6px 12px; padding:8px 14px 0; }
  section[id] { scroll-margin-top:118px; }
  .top-brand img { width:44px; height:44px; }
  .top-brand b { font-size:18px; }
  /* one swipeable row keeps the sticky header short; auto margins centre it when it fits */
  .top-nav { order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; gap:9px; padding:0;
    border-top:1px solid var(--line); scrollbar-width:none; }
  .top-nav::-webkit-scrollbar { display:none; }
  .top-nav a { white-space:nowrap; }
  .top-nav a:first-child { margin-left:auto; } .top-nav a:last-child { margin-right:auto; }
  /* Five pills don't fit 360px, so on phones the links keep their colour and
     take an underline instead — still plainly links, at no extra width. */
  .top-nav a { font-size:13.5px; padding:7px 0; border:0; border-radius:0; background:none;
    text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:7px;
    text-decoration-color:color-mix(in srgb, var(--accent) 45%, transparent); }
  .top-nav a:hover { background:none; color:var(--accent); }

  .hero { display:flex; flex-direction:column; min-height:0; padding:28px 0 56px; }
  .hero-bg { position:relative; inset:auto; transform:none; width:calc(100% - 36px); max-width:480px; margin:0 auto 34px;
    border-radius:18px; }

  .sec { padding:32px 0; }
  .cards { gap:16px; }
  .card { flex-basis:calc(50% - 8px); padding:22px 14px; }
  #millets .card figure { height:180px; }
  #organic .card figure { width:108px; height:108px; }
  #ayurveda .card { flex-basis:100%; grid-template-columns:1fr; padding:22px 20px; }
  #ayurveda .card figure { grid-row:auto; height:260px; min-height:0; margin-bottom:20px; }
  #ayurveda .card figure img { object-fit:contain; }
  /* base.css is layered, so its own mobile rules lose to the desktop ones above */
  .intro { grid-template-columns:1fr; gap:36px; }
  .foot { padding:26px 18px; }
  .intro-portrait { max-width:300px; margin:0 auto; }
  .intro-portrait img { height:400px; }
  .tel { font-size:30px; }
}
@media (max-width:420px) {
  .top-call { width:44px; height:44px; padding:0; gap:0; font-size:0; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
  .card:hover, .btn:hover { transform:none; }
}