/* benefit-cards — merged from the static build's app.css, source order preserved. */

.why-idris__viewport::-webkit-scrollbar { display: none; }
/* Reading matter, not draggable content -- the rail lost its drag-rail class, so this stands in for the native image-drag it used to suppress. */
.why-card img { -webkit-user-drag: none; }
.why-idris { padding: 0; border-top: 1px solid rgba(0,0,0,.08); }
.why-idris__viewport { position: relative; z-index: 3; width: min(calc(100% - 80px), 1280px); margin: 86px auto 0; overflow: visible; }
.why-idris__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 325px 250px; gap: 20px; }
.why-card { position: relative; min-height: 0; padding: 28px 28px 0; overflow: hidden; border: 1px solid rgba(0,0,0,.12); background: #f1eeea; }
.why-card:nth-child(1) { grid-area: 1 / 1; }
.why-card:nth-child(2) { grid-area: 2 / 1; }
.why-card:nth-child(3) { grid-area: 1 / 2; }
.why-card:nth-child(4) { grid-area: 2 / 2; }
.why-card:nth-child(5) { grid-area: 1 / 3; }
.why-card:nth-child(6) { grid-area: 2 / 3; }
.why-card h3 { position: relative; z-index: 2; margin: 0; font-size: 28px; line-height: 1.02; letter-spacing: -.035em; }
.why-card p { position: relative; z-index: 2; max-width: 260px; margin: 18px 0 0; color: var(--idris-muted); font-size: 16px; line-height: 1.35; }
.why-card img { position: absolute; right: 0; bottom: 0; width: 72%; height: 62%; object-fit: contain; object-position: right bottom; }
.why-card--graphic { background: #ece6e2; }
.why-card__line { position: absolute; right: -10%; bottom: 42px; left: -10%; height: 130px; border-top: 3px solid var(--wine); border-radius: 50%; transform: rotate(-7deg); }
.why-card__line::before, .why-card__line::after { position: absolute; width: 10px; height: 10px; content: ""; border-radius: 50%; background: var(--coral); }
.why-card__line::before { top: -7px; left: 28%; }
.why-card__line::after { top: 13px; right: 24%; }
.why-idris__action { position: relative; z-index: 3; margin-top: 60px; text-align: center; }
body.web-development-page .why-idris h2 { width: 295px; }
body.web-development-page .why-idris { padding: 0 0 124px; border: 0; }
body.web-development-page .why-idris__viewport { width: min(100%, var(--wd-page)); margin: 0 auto; padding-inline: var(--wd-inset); overflow: visible; }
body.web-development-page .why-idris__grid { display: grid; margin-top: 75px; gap: 20px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 325px 250px; }
body.web-development-page .why-card { position: relative; min-height: 0; padding: 26.2px 0 0 31px; overflow: hidden; border: 1px solid var(--wd-hair); background: #fff; }
body.web-development-page .why-card:nth-child(1) { grid-area: 1 / 1; height: 325px; }
body.web-development-page .why-card:nth-child(2) { grid-area: 1 / 2; height: 250px; }
body.web-development-page .why-card:nth-child(3) { grid-area: 1 / 3; height: 325px; }
body.web-development-page .why-card:nth-child(4) { grid-area: 2 / 1; height: 250px; }
body.web-development-page .why-card:nth-child(5) { grid-area: 2 / 2; height: 325px; align-self: end; }
body.web-development-page .why-card:nth-child(6) { grid-area: 2 / 3; height: 250px; }
body.web-development-page .why-card--wine { padding: 27.2px 0 0 32px; border: 0; background: var(--wine); color: #fff; }
body.web-development-page .why-card h3 { position: relative; z-index: 2; max-width: 349px; margin: 0; font-size: 32px; font-weight: 600; line-height: 32px; letter-spacing: 0; }
body.web-development-page .why-card p { position: relative; z-index: 2; max-width: 349px; margin: 11.5px 0 0; color: var(--wd-muted); font-size: 18px; line-height: 26px; }
body.web-development-page .why-card:nth-child(2) p { max-width: 270px; }
body.web-development-page .why-card:nth-child(3) p { max-width: 178px; }
body.web-development-page .why-card:nth-child(4) p { max-width: 228px; }
body.web-development-page .why-card--wine p { color: rgba(255, 255, 255, .6); }
body.web-development-page .why-card img { position: absolute; max-width: none; object-fit: contain; }
body.web-development-page .why-card:nth-child(1) img { left: 143px; top: 155px; width: 314px; height: 209px; }
body.web-development-page .why-card:nth-child(2) img { left: 203px; top: 123px; width: 203px; height: 737px; }
body.web-development-page .why-card:nth-child(3) img { left: 105px; top: 129px; width: 322px; height: 215px; }
body.web-development-page .why-card:nth-child(4) img { left: 114px; top: 31px; width: 366px; height: 244px; }
body.web-development-page .why-card:nth-child(5) img { left: -38px; top: 57px; width: 497px; height: 331px; }
body.web-development-page .why-card--road img { left: 0; top: 109px; width: 413px; height: 141px; }
body.web-development-page .why-idris__action { margin-top: 64px; text-align: center; }
body.web-development-page .why-idris__action .button { width: 185px; min-width: 0; height: 50px; min-height: 50px; }
.web-development-page .why-idris h2 { width: 295px; }
.web-development-page .why-idris { padding: 0 0 124px; border: 0; }
.web-development-page .why-idris__viewport { width: min(100%, var(--wd-page)); margin: 0 auto; padding-inline: var(--wd-inset); overflow: visible; }
.web-development-page .why-idris__grid { display: grid; margin-top: 75px; gap: 20px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 325px 250px; }
.web-development-page .why-card { position: relative; min-height: 0; padding: 26.2px 0 0 31px; overflow: hidden; border: 1px solid var(--wd-hair); background: #fff; }
.web-development-page .why-card:nth-child(1) { grid-area: 1 / 1; height: 325px; }
.web-development-page .why-card:nth-child(2) { grid-area: 1 / 2; height: 250px; }
.web-development-page .why-card:nth-child(3) { grid-area: 1 / 3; height: 325px; }
.web-development-page .why-card:nth-child(4) { grid-area: 2 / 1; height: 250px; }
.web-development-page .why-card:nth-child(5) { grid-area: 2 / 2; height: 325px; align-self: end; }
.web-development-page .why-card:nth-child(6) { grid-area: 2 / 3; height: 250px; }
.web-development-page .why-card--wine { padding: 27.2px 0 0 32px; border: 0; background: var(--wine); color: #fff; }
.web-development-page .why-card h3 { position: relative; z-index: 2; max-width: 349px; margin: 0; font-size: 32px; font-weight: 600; line-height: 32px; letter-spacing: 0; }
.web-development-page .why-card p { position: relative; z-index: 2; max-width: 349px; margin: 11.5px 0 0; color: var(--wd-muted); font-size: 18px; line-height: 26px; }
.web-development-page .why-card:nth-child(2) p { max-width: 270px; }
.web-development-page .why-card:nth-child(3) p { max-width: 178px; }
.web-development-page .why-card:nth-child(4) p { max-width: 228px; }
.web-development-page .why-card--wine p { color: rgba(255, 255, 255, .6); }
.web-development-page .why-card img { position: absolute; max-width: none; object-fit: contain; }
.web-development-page .why-card:nth-child(1) img { left: 143px; top: 155px; width: 314px; height: 209px; }
.web-development-page .why-card:nth-child(2) img { left: 203px; top: 123px; width: 203px; height: 737px; }
.web-development-page .why-card:nth-child(3) img { left: 105px; top: 129px; width: 322px; height: 215px; }
.web-development-page .why-card:nth-child(4) img { left: 114px; top: 31px; width: 366px; height: 244px; }
.web-development-page .why-card:nth-child(5) img { left: -38px; top: 57px; width: 497px; height: 331px; }
.web-development-page .why-card--road img { left: 0; top: 109px; width: 413px; height: 141px; }
.web-development-page .why-idris__action { margin-top: 64px; text-align: center; }
.web-development-page .why-idris__action .button { width: 185px; min-width: 0; height: 50px; min-height: 50px; }