/* Delights Technologies: picture-led layout (home finder, product cards, page banners).
   Photos live in images/cat/<slug>.jpg. To replace any picture, save a new JPG with the same name (about 1280 x 800). */

/* ---------- home: problem finder ---------- */
.hero2{background:var(--paper);padding:clamp(2rem,5vw,4rem) 0 clamp(2.5rem,5vw,4.5rem);border-bottom:1px solid var(--line)}
.finder{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.fhead{grid-column:1;margin-bottom:1.4rem}
.fhead h1{font-size:clamp(2rem,3.7vw,3.05rem);margin-bottom:.4em}
.fhead .lead{font-size:1.1rem;color:var(--muted);max-width:46ch;margin:0}
.prob{grid-column:1;display:flex;align-items:center;gap:.95rem;width:100%;min-height:60px;text-align:left;font:600 1.08rem/1.25 var(--display);letter-spacing:-.01em;padding:.8rem 1.1rem;margin:0 0 .55rem;background:#fff;color:var(--ink);border:2px solid var(--line);cursor:pointer}
.prob:hover{border-color:var(--ink)}
.prob .cable{width:34px;height:10px;border-radius:5px;margin-right:10px;background:var(--cc)}
.prob .cable::after{width:9px;height:14px;top:-2px;right:-9px;box-shadow:inset -3px 0 0 #8fa093}
.prob.is-on{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:inset 7px 0 0 var(--c);padding-left:1.5rem}
.stage{grid-column:2;grid-row:1 / span 12;display:none;align-self:start;position:sticky;top:92px;background:var(--ink);color:#fff;border:2px solid var(--ink);box-shadow:9px 9px 0 var(--gold)}
.stage.is-on{display:block}
.st-img{border-bottom:7px solid var(--c);background:#0a1a12;aspect-ratio:16/10;overflow:hidden}
.st-img img{width:100%;height:100%;object-fit:cover}
.st-cap{padding:1.3rem 1.5rem 1.6rem}
.st-k{font:600 .95rem var(--body);color:var(--gold);margin:0 0 .25rem}
.st-cap h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 .5rem;color:#fff}
.st-cap p:not(.st-k){color:#cfe0cb;margin:0 0 1.1rem;max-width:52ch}
.st-act{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}
.st-act .ask{color:#fff;font-weight:600;text-underline-offset:3px}
.st-act .ask:hover{color:var(--gold)}
@media (prefers-reduced-motion:no-preference){.stage.is-on .st-img img{animation:fadein .5s ease both}}
@keyframes fadein{from{opacity:.25}to{opacity:1}}

/* ---------- product cards ---------- */
.pgrid,.audgrid,.sygrid{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pcard{display:flex;flex-direction:column;height:100%;text-decoration:none;background:#fff;border:2px solid var(--line)}
.pcard:hover{border-color:var(--ink)}
.pc-img{display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:6px solid var(--c);background:#0a1a12}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-body{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.1rem 1.15rem;flex:1}
.pc-t{font:700 1.18rem/1.2 var(--display);letter-spacing:-.01em}
.pc-s{color:var(--muted);font-size:.97rem;line-height:1.45}
.pcard .go,.audc .go,.syc .go{margin-top:auto;padding-top:.6rem;font-weight:600;color:var(--green)}
.pcard:hover .go,.audc:hover .go{text-decoration:underline}

/* ---------- audiences ---------- */
.audgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.audc{display:flex;flex-direction:column;gap:.45rem;height:100%;text-decoration:none;background:#fff;border:2px solid var(--ink);padding:1rem 1rem 1.2rem}
.audc:hover{box-shadow:7px 7px 0 var(--gold)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin-bottom:.5rem}
.thumbs img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;background:#0a1a12}
.at{font:700 1.3rem/1.15 var(--display);letter-spacing:-.01em}
.ad{color:var(--muted);font-size:.98rem}

/* ---------- systems (dark band) ---------- */
.sygrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.syc{display:flex;flex-direction:column;gap:.3rem;height:100%;text-decoration:none;color:#fff;border:1px solid #35523f;padding:0 0 1.1rem;background:var(--ink-2)}
.syc:hover{border-color:var(--gold)}
.syc img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin-bottom:.7rem}
.sy-t{font:700 1.15rem var(--display);padding:0 1rem}
.sy-d{color:#bcd0b8;font-size:.95rem;padding:0 1rem}
.syc .go{color:var(--gold);padding-left:1rem}

/* ---------- how to order ---------- */
.order{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.osteps{list-style:none;margin:1.2rem 0 0;padding:0;counter-reset:o}
.osteps li{counter-increment:o;position:relative;padding:0 0 1.5rem 3.6rem}
.osteps li::before{content:counter(o);position:absolute;left:0;top:-.15rem;width:2.5rem;height:2.5rem;display:grid;place-items:center;background:var(--green);color:#fff;font:800 1.3rem var(--display)}
.osteps h3{margin-bottom:.25rem}
.osteps p{color:var(--muted);margin:0}
.order .list-card{position:sticky;top:92px}

/* ---------- inner page banners ---------- */
.phead.has-img .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.phead.has-img h1{max-width:18ch}
.ph-fig{margin:0;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--gold);background:#0a1a12}
.ph-fig img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-bottom:6px solid var(--c,var(--green))}
.fixes{margin:1.2rem 0 0;padding:.9rem 1.1rem;background:#fff;border-left:6px solid var(--c,var(--green));max-width:60ch}
.fixes b{display:block;font:700 1.05rem var(--display);margin-bottom:.15rem}
.fixes span{color:var(--muted)}
.ph-btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.tiles{list-style:none;margin:0 0 2.2rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.tiles a{display:block;text-decoration:none;border:2px solid var(--line);background:#fff}
.tiles a:hover{border-color:var(--ink)}
.tiles img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-bottom:4px solid var(--c)}
.tiles span{display:block;padding:.4rem .55rem .55rem;font:600 .88rem/1.25 var(--body)}

@media (max-width:980px){
  .pgrid,.sygrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order{grid-template-columns:1fr}
  .order .list-card{position:static}
  .phead.has-img .wrap{grid-template-columns:1fr}
}
@media (max-width:900px){
  .finder{grid-template-columns:1fr}
  .stage{grid-column:1;grid-row:auto;position:static;margin:.1rem 6px 1.1rem 0;box-shadow:6px 6px 0 var(--gold)}
  .audgrid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pgrid,.sygrid{grid-template-columns:1fr}
  .prob{font-size:1.02rem}
}

/* supply rows with a picture (solutions pages) */
.supply .sup-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:1rem;align-items:start}
.sup-th img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
@media (max-width:560px){.supply .sup-row{grid-template-columns:96px minmax(0,1fr);gap:.75rem}}