/* ============================================================
   OCID DESIGN SYSTEM — TOKENS
   Palette derived from Odia manuscript & temple material culture:
   lamp-black ink, hingula (vermilion rubrication), haldi (turmeric),
   neelam (indigo-teal), chalk-primed palm leaf.
   ============================================================ */
:root{
  /* Brand-derived. Sampled directly from the OCID mark:
     wheel/wordmark black #231F20, Kalinga scrollwork saffron #F58120. */
  --ink:        #231F20;   /* brand black - text, dark bands             */
  --ink-2:      #45403E;   /* warm charcoal - long-form body copy        */
  --saffron:    #F58120;   /* brand saffron - accent, seal, fills        */
  --saffron-dk: #B85C0E;   /* accessible saffron for text/links on white */
  --saffron-lt: #FDF1E4;   /* saffron wash                               */
  --slate:      #3E5A66;   /* quiet supporting cool - taxonomy, data     */
  --slate-lt:   #E7EDEF;
  --chalk:      #F5F3F0;   /* warm page ground                           */
  --paper:      #FFFFFF;
  --line:       #DFD9D3;
  --line-2:     #EDE9E4;
  --muted:      #6B635F;
  --muted-2:    #9A918C;
  --dark-line:  #3D3735;   /* hairline on dark surfaces                  */

  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', 'SF Mono', monospace;
  --f-odia:    'Noto Sans Oriya', 'Public Sans', sans-serif;
  --f-deva:    'Noto Serif Devanagari', 'Noto Sans Devanagari', serif;

  --sp: 8px;
  --maxw: 1240px;
  --rail: 132px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body); background:var(--chalk); color:var(--ink);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--saffron-dk);outline-offset:3px}

/* High Contrast mode */
body.hc{
  --ink: #000; --ink-2: #111; --chalk: #fff; --paper: #fff;
  --line: #000; --line-2: #222; --muted: #222; --muted-2: #444;
  --slate: #002B36; --slate-lt: #D8E2E6; --saffron-dk: #8A4000;
}

/* ---------- type scale ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
}
.eyebrow .num{color:var(--saffron-dk)}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.12; letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,5.2vw,4.1rem); font-weight:500}
h2{font-size:clamp(1.75rem,3.2vw,2.7rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem)}
h4{font-size:1.02rem;font-family:var(--f-body);font-weight:700;letter-spacing:0}
.lede{font-size:clamp(1.05rem,1.5vw,1.24rem); color:var(--ink-2); line-height:1.62; font-weight:300}
.odia{font-family:var(--f-odia)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ============================================================
   MASTHEAD
   ============================================================ */
header.mast{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60;
  box-shadow:0 1px 0 #231f200a}
.mast .wrap{display:flex;align-items:center;gap:20px;min-height:92px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand .logo{height:52px;width:auto}
.brand-rule{width:1px;height:40px;background:var(--line);flex-shrink:0}
.brand-sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);line-height:1.65;flex-shrink:0}
nav.main{margin-left:auto;display:flex;gap:2px;align-items:center}
nav.main button{
  font:inherit;font-size:14.5px;font-weight:500;background:none;border:0;cursor:pointer;
  padding:10px 12px;color:var(--ink-2);border-bottom:2.5px solid transparent;letter-spacing:-.01em;
}
nav.main button:hover{color:var(--saffron-dk)}
nav.main button.on{color:var(--ink);border-bottom-color:var(--saffron)}
.mast-util{display:flex;flex-direction:row;align-items:center;gap:12px;flex-shrink:0;margin-left:14px}
.util-row{display:flex;align-items:center;gap:3px}
.util-row button{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;background:none;border:1px solid var(--line);
  padding:3px 7px;cursor:pointer;color:var(--muted);border-radius:2px;line-height:1.5;
}
.util-row button:hover{border-color:var(--ink);color:var(--ink)}
.util-row button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.util-sep{width:1px;height:14px;background:var(--line);margin:0 5px}
.mast .cta{
  background:var(--saffron);color:var(--ink);font-size:13px;font-weight:700;
  padding:9px 16px;border-radius:2px;white-space:nowrap;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;
}
.mast .cta:hover{background:var(--saffron-dk);color:#fff}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);padding:9px 11px;cursor:pointer;border-radius:2px}

/* ============================================================
   SIGNATURE: THE CONVERGENCE BRIDGE HERO
   ============================================================ */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;border-bottom:4px solid var(--saffron-dk)}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 420px at 12% -10%, #332E2C 0%, transparent 62%),
    radial-gradient(700px 380px at 92% 110%, #F5812018 0%, transparent 60%);
}
.hero-grid{
  position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(var(--muted-2) 1px,transparent 1px),linear-gradient(90deg,var(--muted-2) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
  mask-image:linear-gradient(180deg,#000,transparent 78%);
}
.hero .wrap{position:relative;padding:74px 28px 0}
.hero-head{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero .odia-mark{
  font-family:var(--f-odia);font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--saffron);
  letter-spacing:.02em;margin-bottom:14px;font-weight:600;
}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--saffron)}
.hero .lede{color:#CFC7C2;margin-top:20px;max-width:56ch;font-weight:300}
.hero-side{border-left:1px solid var(--dark-line);padding-left:24px;position:relative}
.hero-side .q{font-family:var(--f-display);font-size:1.06rem;line-height:1.5;color:#E8E2DE;font-weight:300}
.hero-side .a{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-top:14px}
.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;padding:13px 22px;border-radius:2px;border:1.5px solid transparent;cursor:pointer;font-family:var(--f-body)}
.btn-p{background:var(--saffron);color:var(--ink)}
.btn-p:hover{background:#FF9235}
.btn-o{border-color:#5A514E;color:#fff}
.btn-o:hover{border-color:#fff;background:#ffffff0f}

/* the bridge diagram — signature element */
.bridge{margin-top:60px;padding-bottom:0;position:relative}
.bridge-rail{
  display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  border-top:1px solid var(--dark-line);
}
.bridge-col{padding:26px 0 30px}
.bridge-col.mid{
  background:linear-gradient(180deg,#F5812012,transparent);
  border-left:1px solid var(--dark-line);border-right:1px solid var(--dark-line);padding:26px 30px 30px;text-align:center;min-width:240px;
}
.bridge-col .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.bridge-col.left .lbl,.bridge-col.left ul{padding-right:30px}
.bridge-col.right{text-align:right}
.bridge-col.right .lbl,.bridge-col.right ul{padding-left:30px}
.bridge-col ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.bridge-col.right ul{justify-content:flex-end}
.bridge-col li{
  font-size:12.5px;color:#CFC7C2;border:1px solid #4A423F;padding:5px 10px;border-radius:2px;
  background:#ffffff08;transition:.25s;
}
.bridge-col li:hover{border-color:var(--saffron);color:#fff}
.bridge-mid-seal{height:44px;width:auto;margin:0 auto 14px;display:block}
.bridge-col.mid .t{font-family:var(--f-display);font-size:1.22rem;color:#fff;font-weight:600}
.bridge-col.mid .d{font-size:12.5px;color:var(--muted-2);margin-top:7px;line-height:1.5}
.bridge-flow{display:flex;gap:5px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.bridge-flow span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--saffron);border:1px solid #F5812055;padding:3px 7px;border-radius:2px}

/* hero stat ledger */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--dark-line);margin-top:8px}
.ledger div{padding:22px 0 30px;border-right:1px solid var(--dark-line)}
.ledger div:last-child{border-right:0}
.ledger .v{font-family:var(--f-display);font-size:2.05rem;font-weight:600;color:var(--saffron);line-height:1}
.ledger .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-top:9px}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:88px 0}
.sec.tight{padding:62px 0}
.sec.paper{background:var(--paper)}
.sec.chalk{background:var(--chalk)}
.sec.dark{background:var(--ink);color:#fff}
.sec.dark .lede{color:#C4BCB7}
.sec.dark .eyebrow{color:var(--muted-2)}
.sec-head{display:grid;grid-template-columns:var(--rail) 1fr;gap:34px;margin-bottom:46px}
.sec-head .rail{border-top:2.5px solid var(--saffron-dk);padding-top:12px}
.sec-head h2{max-width:22ch}
.sec-head .lede{margin-top:16px;max-width:68ch}
.sec.dark .sec-head .rail{border-top-color:var(--saffron)}

/* three verticals */
.verticals{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
.vert{padding:34px;border-right:1px solid var(--line);background:var(--paper);position:relative;transition:.28s;cursor:pointer}
.verticals .vert:last-child{border-right:0}
.vert:hover{background:#FAFBF9}
.vert::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:.28s}
.vert:hover::after{background:var(--saffron-dk)}
.vert .no{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--saffron-dk);font-weight:600}
.vert h3{margin:12px 0 10px;max-width:20ch}
.vert p{font-size:14.6px;color:var(--muted);line-height:1.6;max-width:44ch}
.vert ul{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.vert li{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);background:var(--slate-lt);padding:4px 9px;border-radius:2px}
.vert .go{margin-top:20px;font-size:13.5px;font-weight:600;color:var(--saffron-dk);display:inline-flex;gap:7px;align-items:center}

/* values band */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dark-line);border:1px solid var(--dark-line)}
.val{background:var(--ink);padding:26px 22px}
.val .san{font-family:var(--f-display);font-size:1.16rem;color:var(--saffron);font-weight:600}
.val .en{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:5px}
.val p{font-size:13.4px;color:#C4BCB7;margin-top:12px;line-height:1.55}

/* stakeholder gateways */
.gates{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gate{
  background:var(--paper);border:1px solid var(--line);padding:24px 22px 20px;
  display:flex;flex-direction:column;transition:.25s;cursor:pointer;border-radius:2px;
}
.gate:hover{border-color:var(--slate);transform:translateY(-3px);box-shadow:0 10px 28px #231f2012}
.gate .ic{width:38px;height:38px;border-radius:2px;background:var(--slate-lt);color:var(--slate);display:grid;place-items:center;margin-bottom:16px}
.gate .ic svg{width:20px;height:20px}
.gate h4{font-size:15px;line-height:1.35;margin-bottom:9px}
.gate p{font-size:13.4px;color:var(--muted);line-height:1.55;flex:1}
.gate .act{margin-top:16px;padding-top:13px;border-top:1px solid var(--line-2);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron-dk);font-weight:600}

/* knowledge / publication cards */
.pubs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pub{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;transition:.25s;border-radius:2px;overflow:hidden}
.pub:hover{box-shadow:0 12px 30px #231f2014;transform:translateY(-3px)}
.pub .top{padding:9px 18px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;background:#FAFBF9}
.tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:2px}
.tag.pr{background:var(--saffron-lt);color:var(--saffron-dk)}
.tag.tt{background:var(--slate-lt);color:var(--slate)}
.tag.gv{background:var(--saffron-lt);color:#8E6410}
.tag.cu{background:#EDE9F2;color:#5B4680}
.pub .date{font-family:var(--f-mono);font-size:10.5px;color:var(--muted-2)}
.pub .body{padding:20px 18px 22px;flex:1;display:flex;flex-direction:column}
.pub h4{font-family:var(--f-display);font-size:1.08rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.pub p{font-size:13.4px;color:var(--muted);margin-top:10px;line-height:1.55;flex:1}
.pub .meta{margin-top:16px;padding-top:13px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.pub .meta .dl{color:var(--slate);font-weight:600}

/* manthan feature */
.feature{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--line);background:var(--paper)}
.feature .l{padding:46px 44px;border-right:1px solid var(--line)}
.feature .r{padding:46px 44px;background:#FAFBF9}
.timeline{list-style:none;margin-top:8px}
.timeline li{display:grid;grid-template-columns:78px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line-2);align-items:start}
.timeline li:last-child{border-bottom:0}
.timeline .yr{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;color:var(--saffron-dk);font-weight:600;padding-top:2px}
.timeline .tt{font-weight:600;font-size:14.6px}
.timeline .dd{font-size:13.2px;color:var(--muted);margin-top:3px;line-height:1.5}

/* district ledger grid */
.dgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.dcell{
  aspect-ratio:1;border:1px solid var(--line);background:var(--paper);border-radius:2px;
  display:grid;place-items:center;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.03em;
  color:var(--muted);cursor:pointer;transition:.18s;padding:2px;text-align:center;line-height:1.1;
}
.dcell:hover{transform:scale(1.09);z-index:2;border-color:var(--ink)}
.dcell.a{background:var(--saffron-dk);color:#fff;border-color:var(--saffron-dk)}
.dcell.b{background:var(--saffron);color:#fff;border-color:var(--saffron)}
.dcell.c{background:var(--slate-lt);color:var(--slate);border-color:#D8CFC8}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.legend i{width:11px;height:11px;display:inline-block;margin-right:7px;border-radius:2px;vertical-align:-1px}

/* filters (knowledge screen) */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.chip{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);background:var(--paper);cursor:pointer;border-radius:2px;color:var(--muted)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip:hover{border-color:var(--ink)}
.srch{flex:1;min-width:220px;border:1px solid var(--line);padding:8px 14px;font:inherit;font-size:14px;border-radius:2px;background:var(--paper)}

/* two-col prose */
.prose2{display:grid;grid-template-columns:var(--rail) 1fr;gap:34px;align-items:start}
.prose2 .rail{position:sticky;top:110px}
.prose2 .rail .n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border-top:2.5px solid var(--saffron-dk);padding-top:11px}
.prose-body p{margin-bottom:17px;color:var(--ink-2);max-width:74ch;font-size:16.2px}
.prose-body h3{margin:34px 0 13px}
.prose-body ul{margin:0 0 18px 20px;color:var(--ink-2)}
.prose-body li{margin-bottom:8px;max-width:70ch}
.callout{border-left:3px solid var(--saffron);background:var(--saffron-lt);padding:20px 24px;margin:26px 0;border-radius:0 2px 2px 0}
.callout p{margin:0;font-size:15.2px}
.pullq{font-family:var(--f-display);font-size:1.42rem;line-height:1.45;font-weight:400;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin:32px 0;max-width:56ch}

/* table */
table.tbl{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);font-size:14px}
.tbl th{background:var(--ink);color:#fff;text-align:left;padding:13px 16px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:500}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:nth-child(even) td{background:#FAFBF9}
.tbl td strong{color:var(--ink)}
.tbl .cta-c{color:var(--saffron-dk);font-weight:600;font-size:13.4px}

/* breadcrumb + page head */
.phead{background:var(--paper);border-bottom:1px solid var(--line);padding:34px 0 40px}
.crumb{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px}
.crumb a{color:var(--slate)}
.phead h1{font-size:clamp(2rem,3.6vw,2.9rem)}
.phead .lede{margin-top:14px;max-width:70ch}

/* footer */
footer{background:var(--ink);color:#ADA49F;padding:64px 0 0;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:34px;padding-bottom:44px;border-bottom:1px solid var(--dark-line)}
footer h5{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:500}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a:hover{color:#fff}
.fbrand .flogo{height:58px;width:auto;margin-bottom:16px}
.fbrand .shloka{font-family:var(--f-deva);font-size:14px;color:var(--saffron);margin-bottom:14px;letter-spacing:.01em}
.fbrand p{margin-top:12px;max-width:38ch;line-height:1.6;font-size:13.6px}
.fbrand .reg{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted-2);margin-top:16px;line-height:1.7}
.fbot{padding:22px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted-2)}
.fbot .r{display:flex;gap:18px}

/* screens */
.screen{display:none}
.screen.on{display:block;animation:fade .32s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* spec annotation (for the design handoff) */
.spec{
  background:var(--ink);color:#ADA49F;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;
  padding:10px 0;border-bottom:1px solid var(--dark-line);
}
.spec .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spec b{color:var(--saffron);font-weight:500}

@media(max-width:1040px){
  .hero-head{grid-template-columns:1fr}
  .hero-side{border-left:0;border-top:1px solid var(--dark-line);padding-left:0;padding-top:22px}
  .verticals{grid-template-columns:1fr}
  .verticals .vert{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .verticals .vert:last-child{border-bottom:0!important}
  .gates,.values{grid-template-columns:repeat(2,1fr)}
  .pubs{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
  .feature .l{border-right:0;border-bottom:1px solid var(--line)}
  .sec-head,.prose2{grid-template-columns:1fr}
  .prose2 .rail{position:static}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .dgrid{grid-template-columns:repeat(6,1fr)}
  nav.main{display:none}
  nav.main.open{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:16px 28px;
    align-items:flex-start; gap:8px; box-shadow:0 8px 24px rgba(0,0,0,0.08); z-index:100;
  }
  .burger{display:block}
  .brand-rule,.brand-sub,.util-row{display:none}
  .mast-util{margin-left:auto}
}
@media(max-width:680px){
  .bridge-rail{grid-template-columns:1fr}
  .bridge-col.mid{border-left:0;border-right:0;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line)}
  .bridge-col.right{text-align:left}
  .bridge-col.right ul{justify-content:flex-start;padding-left:0}
  .bridge-col.left .lbl,.bridge-col.left ul,.bridge-col.right .lbl{padding:0}
  .ledger{grid-template-columns:repeat(2,1fr)}
  .ledger div{border-bottom:1px solid var(--dark-line)}
  .gates,.values,.pubs{grid-template-columns:1fr}
  .dgrid{grid-template-columns:repeat(5,1fr)}
  .sec{padding:56px 0}
  .feature .l,.feature .r{padding:30px 24px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}