/* ============================================================
   GREIND.COM — Sections
   ============================================================ */

/* ===== HERO ===== */
.hero{ position:relative; min-height: 100svh; display:flex; align-items:center; padding-top:96px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 0.88fr 1.12fr; gap: clamp(26px, 4.4vw, 60px); align-items:center; width:100%; }
.hero-kicker{ margin-bottom: 26px; }
.hero h1{ margin-bottom: 28px; }
.hero h1 .em{ position:relative; white-space:nowrap; }
.hero h1 .em::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:0.08em; height:0.3em; z-index:-1;
  background: var(--coral); opacity:0.22; border-radius:3px;
}
.hero .lead{ margin-bottom: 36px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-meta{ margin-top: 40px; display:flex; gap: clamp(20px,3vw,44px); flex-wrap:wrap; }
.hero-meta .stat{ display:flex; flex-direction:column; gap:2px; }
.hero-meta .stat b{ font-size:1.7rem; font-weight:700; letter-spacing:-0.03em; font-feature-settings:"tnum"; }
.hero-meta .stat span{ font-size:0.82rem; color: var(--ink-2); }
.hero-meta .stat .coral{ color: var(--coral); }

/* Contour map */
.hero-visual{ position:relative; aspect-ratio: 1/1.08; width:100%; }
.contour-stage{ position:absolute; inset:0; border-radius: var(--r-xl);
  background:
    radial-gradient(120% 100% at 70% 20%, oklch(0.97 0.014 80) 0%, oklch(0.945 0.018 74) 60%, oklch(0.93 0.02 70) 100%);
  box-shadow: 0 40px 90px -50px oklch(0.255 0.045 261 / 0.5), inset 0 0 0 1px var(--line-soft);
  overflow:hidden;
}
.contour-stage svg{ position:absolute; inset:0; width:100%; height:100%; }
.contour-stage .grain{ position:absolute; inset:0; opacity:0.5; mix-blend-mode:multiply;
  background-image: radial-gradient(oklch(0.255 0.045 261 / 0.04) 1px, transparent 1px); background-size: 22px 22px; }
.marker-label{
  position:absolute; transform: translate(-50%,-50%); display:flex; align-items:center; gap:7px;
  background: var(--white); padding:6px 11px 6px 8px; border-radius:100px; font-size:0.78rem; font-weight:600;
  box-shadow: 0 8px 22px -10px oklch(0.255 0.045 261 / 0.45), inset 0 0 0 1px var(--line-soft); white-space:nowrap;
}
.marker-label .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.marker-label.start .dot{ background: var(--ink-3); }
.marker-label.mid .dot{ background: var(--blue); }
.marker-label.goal{ background: var(--navy); color: var(--on-navy); }
.marker-label.goal .dot{ background: var(--coral); box-shadow: 0 0 0 4px oklch(0.685 0.158 36 / 0.25); }

@media (max-width: 900px){
  .hero{ padding-top: 120px; padding-bottom: 60px; min-height:auto; }
  .hero-grid{ grid-template-columns: 1fr; gap:48px; }
  .hero-visual{ max-width: 540px; margin-inline:auto; aspect-ratio:1/0.92; }
}

/* ===== PROBLEM (Allt að gerast) ===== */
.problem{ background: var(--cream-deep); }
.problem-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px,6vw,84px); align-items:center; }
.flow-chart{ display:grid; gap:18px; }
.flow-row{ display:grid; grid-template-columns: 150px 1fr auto; align-items:center; gap:18px; }
.flow-row .flow-label{ font-weight:600; font-size:0.98rem; }
.flow-track{ height:10px; border-radius:100px; background: oklch(0.255 0.045 261 / 0.07); overflow:hidden; position:relative; }
.flow-fill{ position:absolute; inset:0 100% 0 0; border-radius:100px; transition: inset 1.4s var(--ease); }
.flow-row.in .flow-fill{ inset:0 var(--rest,30%) 0 0; }
.flow-up .flow-fill{ background: linear-gradient(90deg, var(--blue), oklch(0.6 0.1 245)); }
.flow-row .flow-val{ font-size:0.86rem; font-weight:600; color: var(--blue); display:flex; align-items:center; gap:4px; min-width:54px; justify-content:flex-end; }
.flow-row.results .flow-track{ background: oklch(0.685 0.158 36 / 0.1); }
.flow-row.results .flow-fill{ background: var(--coral); }
.flow-row.results .flow-val{ color: var(--coral); }

/* ===== ICEBERG / Hidden 90% ===== */
.iceberg{ background: var(--navy); color: var(--on-navy); position:relative; overflow:hidden; }
.iceberg .wrap{ position:relative; z-index:2; }
.iceberg-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,80px); align-items:center; }
.iceberg h2 .pct{ color: var(--coral-bright); }
.iceberg-list{ margin-top:30px; display:grid; gap:2px; }
.iceberg-list .il-head{ font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--on-navy-3); margin:14px 0 8px; }
.il-tools{ display:flex; flex-wrap:nowrap; gap:6px; }
.il-tools span{ padding:7px 11px; border-radius:100px; font-size:0.82rem; font-weight:500; white-space:nowrap; background: oklch(0.965 0.012 80 / 0.08); color: var(--on-navy-2); }
@media (max-width: 600px){ .il-tools{ flex-wrap:wrap; gap:8px; } }
.il-foundations{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.il-foundations div{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius: var(--r); background: oklch(0.965 0.012 80 / 0.05); font-weight:600; font-size:0.98rem; }
.il-foundations div::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--coral); flex:none; }

/* iceberg illustration */
.berg-viz{ position:relative; aspect-ratio: 1/1.04; }
.berg-viz svg{ width:100%; height:100%; overflow:visible; }
.berg-waterline{ position:absolute; left:0; right:0; top:30%; height:1px; background: var(--line-navy); }
.berg-waterline span{ position:absolute; right:0; top:-22px; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--on-navy-3); }

@media (max-width: 880px){
  .problem-grid, .iceberg-grid{ grid-template-columns:1fr; gap:44px; }
  .berg-viz{ max-width:420px; margin-inline:auto; }
}
@media (max-width: 520px){ .flow-row{ grid-template-columns: 110px 1fr auto; gap:12px; } .il-foundations{ grid-template-columns:1fr; } }

/* ===== SIX FOUNDATIONS ===== */
.found-head{ display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:end; margin-bottom: clamp(34px,5vw,56px); }
.found-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.found-card{
  position:relative; padding: 30px 28px 26px; border-radius: var(--r-lg);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: transform .5s var(--ease), box-shadow .5s; overflow:hidden; cursor:default;
}
.found-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1.5px var(--coral); opacity:0; transition:opacity .4s; pointer-events:none; }
.found-card:hover{ transform: translateY(-4px); box-shadow: 0 30px 50px -34px oklch(0.255 0.045 261 / 0.4), inset 0 0 0 1px var(--line-soft); }
.found-card:hover::after{ opacity:0.5; }
.found-num{ font-family: var(--serif); font-size:1.5rem; color: var(--coral); line-height:1; }
.found-ico{ width:34px; height:34px; margin: 4px 0 18px; color: var(--ink); }
.found-card h3{ margin-bottom:10px; }
.found-card .fc-q{ color: var(--ink-2); font-size:0.96rem; line-height:1.5; }
.found-card .fc-more{ max-height:0; opacity:0; overflow:hidden; transition: max-height .55s var(--ease), opacity .45s, margin .45s; }
.found-card:hover .fc-more{ max-height:180px; opacity:1; margin-top:14px; }
.found-card .fc-more p{ font-size:0.9rem; color: var(--ink-2); padding-top:14px; border-top:1px solid var(--line-soft); }
@media (max-width: 880px){ .found-grid{ grid-template-columns:1fr 1fr; } .found-card .fc-more{ max-height:none; opacity:1; margin-top:14px; } }
@media (max-width: 560px){ .found-grid{ grid-template-columns:1fr; } .found-head{ grid-template-columns:1fr; } }

/* ===== THE QUESTION (pause) ===== */
.pause{ background: var(--cream); }
.pause .wrap{ max-width: 980px; }
.pause-q{ font-family: var(--serif); font-size: clamp(2.1rem, 5.4vw, 4.4rem); line-height:1.08; letter-spacing:-0.01em; text-wrap:balance; }
.pause-q .ghost{ color: var(--ink-3); }
.pause-q em{ font-style:italic; color: var(--coral); }
.pause-sub{ margin-top:28px; font-size:1.05rem; color: var(--ink-2); max-width:48ch; }

/* ===== PROCESS TIMELINE ===== */
.process{ background: var(--white); }
.proc-track{ position:relative; margin-top: clamp(40px,5vw,64px); }
.proc-line{ position:absolute; left:0; right:0; top:23px; height:2px; background: var(--line); }
.proc-line .proc-prog{ position:absolute; inset:0 100% 0 0; background: var(--coral); transition: inset 1.6s var(--ease); }
.proc-track.in .proc-line .proc-prog{ inset:0 0 0 0; }
.proc-steps{ display:grid; grid-template-columns: repeat(6,1fr); gap:14px; }
.proc-step{ position:relative; }
.proc-dot{ width:46px; height:46px; border-radius:50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--line); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--display); position:relative; z-index:2; transition: .5s var(--ease); color: var(--ink-3); }
.proc-step.active .proc-dot, .proc-step:hover .proc-dot{ background: var(--coral); color:#fff; box-shadow:none; transform: scale(1.04); }
.proc-step h4{ margin-top:18px; font-size:1.02rem; font-weight:600; }
.proc-step p{ margin-top:7px; font-size:0.88rem; color: var(--ink-2); }
.proc-step .ps-phase{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--coral); font-weight:600; margin-bottom:4px; }
@media (max-width: 860px){
  .proc-steps{ grid-template-columns:1fr; gap:0; }
  .proc-line{ left:23px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .proc-line .proc-prog{ inset:100% 0 0 0; }
  .proc-track.in .proc-line .proc-prog{ inset:0; }
  .proc-step{ display:grid; grid-template-columns:46px 1fr; gap:20px; padding-bottom:34px; }
  .proc-step h4{ margin-top:0; } .proc-step .timeline-text{ padding-top:9px; }
}

/* ===== DELIVERABLES ===== */
.deliver{ background: var(--cream-deep); }
.deliver-head{ max-width: 720px; margin-bottom: clamp(36px,5vw,56px); }
.deliver-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; }
.dcard{ background: var(--white); border-radius: var(--r-lg); padding:22px; box-shadow: inset 0 0 0 1px var(--line-soft), 0 24px 40px -36px oklch(0.255 0.045 261 / 0.5); display:flex; flex-direction:column; transition: transform .5s var(--ease), box-shadow .5s; }
.dcard:hover{ transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-soft), 0 34px 54px -34px oklch(0.255 0.045 261 / 0.5); }
.dcard .dc-tag{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-3); font-weight:600; }
.dcard h3{ margin:6px 0 16px; font-size:1.18rem; }
.dcard .dc-viz{ margin-top:auto; }
.dcard .dc-foot{ margin-top:16px; font-size:0.88rem; color: var(--ink-2); }
/* spans */
.dcard.span3{ grid-column: span 3; }
.dcard.span2{ grid-column: span 2; }
@media (max-width: 980px){ .deliver-grid{ grid-template-columns: repeat(2,1fr); } .dcard.span3,.dcard.span2{ grid-column: span 1; } }
@media (max-width: 560px){ .deliver-grid{ grid-template-columns:1fr; } }

/* Stöðuvísir gauge */
.gauge{ position:relative; display:flex; align-items:flex-end; gap:16px; }
.gauge svg{ width:130px; height:80px; overflow:visible; }
.gauge .g-num{ font-size:2.6rem; font-weight:800; letter-spacing:-0.03em; line-height:0.9; font-feature-settings:"tnum"; }
.gauge .g-num small{ font-size:0.9rem; font-weight:600; color: var(--ink-3); }
.gauge .g-trust{ font-size:0.82rem; color: var(--ink-2); margin-top:4px; }
.gauge .g-trust b{ color: var(--teal); }

/* Heatmap */
.heat{ display:grid; grid-template-columns: repeat(3,1fr); gap:7px; }
.heat span{ aspect-ratio: 1/0.62; border-radius:7px; display:flex; align-items:flex-end; padding:8px; font-size:0.72rem; font-weight:600; color: oklch(0.255 0.045 261 / 0.8); }
.heat .g{ background: oklch(0.78 0.11 150); } .heat .y{ background: oklch(0.86 0.13 92); } .heat .r{ background: oklch(0.78 0.13 35); color:#fff; }

/* Radar */
.radar svg{ width:100%; max-width:230px; margin-inline:auto; display:block; overflow:visible; }

/* Priority matrix */
.matrix{ position:relative; aspect-ratio: 1/0.78; background:
  linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0/25% 100%,
  linear-gradient(0deg, var(--line-soft) 1px, transparent 1px) 0 0/100% 25%;
  border-left:1.5px solid var(--line); border-bottom:1.5px solid var(--line); border-radius:0 0 0 6px; }
.matrix .m-ax{ position:absolute; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.matrix .m-x{ bottom:-22px; right:0; } .matrix .m-y{ top:0; left:-12px; transform: rotate(-90deg); transform-origin:left; }
.matrix .m-dot{ position:absolute; width:13px; height:13px; border-radius:50%; transform: translate(-50%,50%); box-shadow: 0 2px 6px oklch(0.255 0.045 261 / 0.3); }
.matrix .m-dot.win{ background: var(--coral); } .matrix .m-dot.build{ background: var(--blue); } .matrix .m-dot.wait{ background: var(--ink-3); }

/* Roadmap */
.road{ display:grid; gap:9px; }
.road-row{ display:grid; grid-template-columns: 92px 1fr; gap:12px; align-items:center; }
.road-row .r-per{ font-size:0.78rem; font-weight:600; color: var(--ink-2); }
.road-bars{ display:flex; gap:5px; }
.road-bars i{ height:24px; border-radius:5px; flex:1; }
.road-row:nth-child(1) .road-bars i{ background: var(--coral); }
.road-row:nth-child(2) .road-bars i{ background: oklch(0.62 0.095 240); }
.road-row:nth-child(3) .road-bars i{ background: var(--navy-soft); }
.road-bars i.ghost{ background: var(--line) !important; }

/* governance mini list */
.gov{ display:grid; gap:8px; }
.gov-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:0.86rem; }
.gov-row .gv-bar{ flex:1; height:6px; border-radius:100px; background: var(--line-soft); overflow:hidden; }
.gov-row .gv-bar i{ display:block; height:100%; border-radius:100px; }

/* ===== MOSI ===== */
.mosi{ background: var(--navy); color: var(--on-navy); position:relative; overflow:hidden; }
.mosi-top{ display:grid; grid-template-columns: 1fr 0.85fr; gap: clamp(36px,6vw,72px); align-items:center; margin-bottom: clamp(40px,6vw,72px); }
.mosi h2{ margin:18px 0 22px; }
.mosi .lead{ color: var(--on-navy-2); }
.mosi-cols{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line-navy); border-radius: var(--r-lg); overflow:hidden; }
.mosi-col{ background: var(--navy); padding: 30px 28px; }
.mosi-col .mc-ico{ width:30px; height:30px; color: var(--coral-bright); margin-bottom:18px; }
.mosi-col h4{ font-size:1.12rem; margin-bottom:12px; }
.mosi-col p{ color: var(--on-navy-2); font-size:0.94rem; }
.mosi-col ul{ list-style:none; display:grid; gap:9px; margin-top:14px; }
.mosi-col li{ display:flex; gap:10px; font-size:0.92rem; color: var(--on-navy-2); }
.mosi-col li::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--coral); margin-top:8px; flex:none; }

/* Mosi memory glyph + email mock */
.mosi-mock{ background: oklch(0.965 0.012 80 / 0.04); border:1px solid var(--line-navy); border-radius: var(--r-lg); padding:20px; }
.mm-head{ display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line-navy); margin-bottom:14px; }
.mm-avatar{ width:34px; height:34px; border-radius:9px; background: var(--coral); display:flex; align-items:center; justify-content:center; flex:none; }
.mm-head b{ font-size:0.95rem; } .mm-head span{ font-size:0.8rem; color: var(--on-navy-3); display:block; }
.mm-q{ font-size:0.92rem; color: var(--on-navy); background: oklch(0.965 0.012 80 / 0.06); padding:11px 14px; border-radius:12px 12px 12px 4px; margin-bottom:12px; }
.mm-a{ font-size:0.9rem; color: var(--on-navy-2); line-height:1.55; }
.mm-a b{ color: var(--on-navy); }
.mm-src{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.mm-src span{ font-size:0.72rem; padding:4px 9px; border-radius:100px; background: oklch(0.965 0.012 80 / 0.07); color: var(--on-navy-2); display:flex; align-items:center; gap:5px; }
.mm-src span::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--teal); }
@media (max-width: 880px){ .mosi-top{ grid-template-columns:1fr; } .mosi-cols{ grid-template-columns:1fr; } }

/* ===== WHY GREIND ===== */
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top: clamp(34px,5vw,52px); }
.why-card{ padding:28px; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line-soft); transition: .4s var(--ease); }
.why-card:hover{ transform: translateY(-3px); }
.why-card .wc-ico{ width:30px; height:30px; color: var(--coral); margin-bottom:16px; }
.why-card h4{ font-size:1.1rem; margin-bottom:9px; }
.why-card p{ font-size:0.93rem; color: var(--ink-2); }
@media (max-width: 880px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 540px){ .why-grid{ grid-template-columns:1fr; } }

/* ===== TECH ECOSYSTEM ===== */
.tech{ background: var(--cream); }
.tech .wrap{ text-align:center; }
.tech-rail{ margin-top:34px; display:flex; flex-wrap:wrap; justify-content:center; gap: 14px 18px; }
.tech-rail span{ font-weight:600; font-size:1.02rem; color: var(--ink-2); padding:9px 16px; border-radius:100px; box-shadow: inset 0 0 0 1px var(--line-soft); transition:.3s; }
.tech-rail span:hover{ color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* logo grid (monochrome) */
.logo-grid{ margin: 44px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap: 22px 10px; max-width: 920px; }
.logo-cell{ display:flex; align-items:center; justify-content:center; height: 50px; width: 168px; padding: 0 12px; }
.logo-cell img{ max-height: 30px; max-width: 100%; width:auto; object-fit:contain; opacity:0.62; filter: saturate(0); transition: opacity .3s var(--ease); }
.logo-cell:hover img{ opacity:1; }
.logo-cell img[alt="OpenAI"],
.logo-cell img[alt="Cursor"],
.logo-cell img[alt="Claude Code"],
.logo-cell img[alt="PostgreSQL"]{ max-height: 42px; }
.logo-cell img[alt="n8n"], .logo-cell img[alt="Amazon Web Services"]{ max-height: 26px; }
@media (max-width: 720px){ .logo-grid{ max-width: 520px; gap:20px 8px; } .logo-cell{ width: 140px; } }
@media (max-width: 420px){ .logo-cell{ width: 44%; } }

/* ===== FINAL CTA ===== */
.final{ background: var(--navy-deep); color: var(--on-navy); position:relative; overflow:hidden; }
.final .wrap{ position:relative; z-index:2; text-align:center; max-width: 860px; }
.final h2{ margin-bottom:22px; }
.final .lead{ color: var(--on-navy-2); margin-inline:auto; margin-bottom:36px; }
.final-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.final-contact{ margin-top:40px; display:flex; gap: clamp(20px,4vw,48px); justify-content:center; flex-wrap:wrap; font-size:0.95rem; color: var(--on-navy-2); }
.final-contact a{ color: var(--on-navy); border-bottom:1px solid var(--line-navy); padding-bottom:2px; }
.final-map{ position:absolute; inset:0; opacity:0.5; z-index:1; }
.final-map svg{ width:100%; height:100%; }

/* ===== FOCUS FLAG (problem) ===== */
.focus-flag{ margin-top: clamp(38px,5vw,60px); font-family: var(--serif); font-size: clamp(1.55rem, 3.1vw, 2.5rem); line-height:1.14; letter-spacing:-0.01em; max-width: 26ch; text-wrap:balance; color: var(--ink); }
.focus-flag em{ font-style:italic; color: var(--coral); }

/* ===== PITFALLS (Varastu) ===== */
.pitfall-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.pitfall{ position:relative; padding:32px 30px; border-radius: var(--r-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--line-soft); transition: transform .5s var(--ease), box-shadow .5s; }
.pitfall:hover{ transform: translateY(-4px); box-shadow: 0 30px 50px -34px oklch(0.255 0.045 261 / 0.4), inset 0 0 0 1px var(--line-soft); }
.pf-x{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; box-shadow: inset 0 0 0 1.6px var(--coral); color: var(--coral); margin-bottom:20px; }
.pf-x svg{ width:16px; height:16px; }
.pitfall h3{ font-size:1.2rem; margin-bottom:11px; }
.pitfall p{ font-size:0.96rem; color: var(--ink-2); line-height:1.52; }
.pitfall-foot{ margin-top:18px; padding: clamp(28px,3.6vw,48px); border-radius: var(--r-lg); background: var(--navy); color: var(--on-navy); display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: clamp(30px,4.5vw,60px); }
.pitfall-foot p{ font-size: clamp(1.1rem, 1.65vw, 1.42rem); line-height:1.46; letter-spacing:-0.012em; font-weight:500; text-wrap:pretty; }
.pitfall-foot .pf-foot-lead{ color: var(--on-navy); font-weight:600; }
.pitfall-foot .pf-foot-body{ color: var(--on-navy-2); }
.pitfall-foot em{ color: var(--coral-bright); font-style:normal; font-weight:600; }
@media (max-width: 760px){ .pitfall-foot{ grid-template-columns:1fr; gap:18px; } }
@media (max-width: 880px){ .pitfall-grid{ grid-template-columns:1fr; } }