/* Calder Flint Digital — shop page · digital.css · v1 · 2026-08-19
   Loaded only on /digital/. Depends on tokens, .hero, .form, .btn, .products/.prod, .steps, .case from site.css. */

/* ---------- Hero chips ---------- */
.dchips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-8px 0 30px}
.dchips .dc-lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.55);margin-right:6px}
.dchips .dc{display:inline-flex;align-items:center;padding:11px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;font-size:14.5px;font-weight:600;line-height:1;white-space:nowrap;background:rgba(255,255,255,.04);transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.dchips .dc:hover{border-color:var(--digi);color:#fff;background:rgba(107,154,196,.14);transform:translateY(-1px)}
.dchips .dc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:640px){
  .dchips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:-6px calc(-1 * var(--pad)) 24px;padding:4px var(--pad) 6px;gap:8px}
  .dchips::-webkit-scrollbar{display:none}
  .dchips .dc-lbl{display:none}
  .dchips .dc{padding:10px 14px;font-size:14px}
  .page-digital .hero .lede{margin-bottom:22px}
}

/* ---------- Shop ---------- */
.shop-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(32px,5vw,72px);align-items:end;margin-bottom:clamp(30px,3.6vw,44px)}
.shop-head .eyebrow{margin-bottom:16px}
.shop-head .lede{max-width:52ch;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.5}
@media (max-width:900px){.shop-head{grid-template-columns:1fr;gap:14px}}
.shop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);align-items:stretch}
.sku{background:#fff;border:1px solid var(--line);border-top:3px solid var(--digi);border-radius:var(--r-lg);padding:clamp(20px,2vw,26px) clamp(18px,1.7vw,22px) clamp(18px,1.8vw,22px);display:flex;flex-direction:column;position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.sku:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.sku.featured{border-color:rgba(196,161,89,.6);border-top-color:var(--gold);box-shadow:var(--shadow-lg)}
.page-digital .sku-for{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--digi);margin-bottom:12px;line-height:1.3}
.page-digital .sku-for::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--digi)}
.sku.featured .sku-for{color:var(--gold-3)}
.sku.featured .sku-for::before{background:var(--gold)}
.sku h3{font-size:clamp(20px,1.6vw,23px);line-height:1.15;color:var(--navy);margin-bottom:12px;min-height:2.3em}
.sku-price{font-family:var(--serif);color:var(--navy);line-height:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.sku-price b{font-weight:400;font-size:clamp(30px,2.5vw,36px);letter-spacing:-.02em}
.sku-price span{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.sku-price small{flex-basis:100%;font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:4px}
.sku-time{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--gold-3);margin:12px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sku-time svg{width:14px;height:14px;color:var(--gold)}
.sku ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.45;color:var(--ink-2);flex:1}
.sku ul li{padding-left:20px;position:relative}
.sku ul li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.sku .btn{margin-top:20px;width:100%}
.sku .sku-talk{margin:12px auto 0;font-size:14px}
.sku:not(:has(.sku-talk)){padding-bottom:calc(clamp(18px,1.8vw,22px) + 33px)}
@media (max-width:1060px){.shop{grid-template-columns:repeat(2,minmax(0,1fr))}.sku h3{min-height:0}}
@media (max-width:560px){.shop{grid-template-columns:1fr}.sku{padding:20px 20px 18px}}

/* Web rows (Landing Page · Business Website) reuse .products/.prod */
.shop-web{margin-top:clamp(26px,3vw,40px);border-top-color:var(--line)}
.shop-web .prod{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto}
.shop-web .prod .sku-for{margin-bottom:6px}
.shop-web .prod h4{color:var(--navy)}
.shop-web .prod .pp small{max-width:30ch}
.sku-acts{display:flex;align-items:center;gap:16px;justify-self:end}
.sku-acts .link{font-size:14px;white-space:nowrap}
@media (max-width:760px){
  .shop-web .prod{grid-template-columns:1fr}
  .sku-acts{display:grid;gap:10px;justify-self:stretch;justify-items:center}
  .sku-acts .btn{width:100%}
  .shop-web .prod .pp small{max-width:none}
}
.page-digital .trust{margin-top:clamp(26px,3vw,36px)}

/* ---------- Proof strip ---------- */
.page-digital .mq-note{max-width:78ch}
.page-digital .marquee{margin-top:6px}

/* ---------- Case ---------- */
.page-digital .case h3{font-size:clamp(24px,2.4vw,32px)}
.page-digital .case > div > p{color:var(--ink-2)}
.page-digital .stat b{font-size:26px}
@media (max-width:480px){.page-digital .stats{grid-template-columns:1fr;gap:10px}.page-digital .stat{display:grid;grid-template-columns:88px minmax(0,1fr);gap:0 14px;align-items:center;padding:14px 16px}.page-digital .stat b{font-size:24px}.page-digital .stat span{margin-top:0}}

/* ---------- How it works ---------- */
.page-digital .step .t{color:var(--digi)}
.page-digital .step .n{color:var(--gold)}
@media (max-width:540px){.page-digital .steps{grid-template-columns:1fr 1fr;gap:10px}.page-digital .step{padding:18px 16px}.page-digital .step .n{font-size:28px;margin-bottom:8px}.page-digital .step h4{font-size:16px}.page-digital .step p{font-size:13.5px}}

/* ---------- Brand & websites ---------- */
.bw{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bw li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:4px clamp(18px,2.6vw,36px);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);transition:background .35s var(--ease)}
.bw li:hover{background:linear-gradient(90deg,rgba(107,154,196,.10),rgba(107,154,196,0) 70%)}
.bw li h4{margin:0;color:var(--navy)}
.bw li p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.bw li .tag{display:inline-block;margin-left:9px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-3);white-space:nowrap}
@media (max-width:640px){.bw li{grid-template-columns:1fr;gap:6px;padding:16px 0}}

/* ---------- Quote in 60 seconds ---------- */
.dq-panel{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:clamp(22px,2.8vw,32px)}
.dq{gap:22px}
.dq [hidden]{display:none !important}
.dq fieldset{border:0;padding:0;margin:0;min-width:0}
.dq legend{display:block;width:100%;font-family:var(--serif);font-size:clamp(19px,1.6vw,22px);line-height:1.2;color:#fff;margin:0 0 12px;padding:0;font-variation-settings:"opsz" 30;letter-spacing:-.01em}
.dq legend i{font-style:normal;font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--digi);margin-right:10px;vertical-align:middle}
.dq-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dq-opts.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
.dq-opts.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
.dq .dq-opt{position:relative;display:block;margin:0;cursor:pointer;font-weight:500;font-size:15px;letter-spacing:0;color:#fff;line-height:1.3}
.dq .dq-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;pointer-events:none}
.dq-opt span{display:flex;align-items:center;min-height:50px;padding:12px 14px 12px 40px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);position:relative;transition:border-color .25s var(--ease),background .25s var(--ease)}
.dq-opt span::before{content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);transition:border-color .25s,background .25s,box-shadow .25s}
.dq-opt:hover span{border-color:rgba(196,161,89,.6);background:rgba(255,255,255,.08)}
.dq-opt input:checked+span{border-color:var(--gold);background:rgba(196,161,89,.16)}
.dq-opt input:checked+span::before{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3.5px var(--navy)}
.dq-opt input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.dq-opt.wide{grid-column:1/-1}
.dq .fields{display:grid;gap:14px;padding-top:6px;border-top:1px solid var(--line-dark);margin-top:2px}
.dq .fields .row{margin-top:8px}
.dq .consent a{color:var(--gold-2);border-bottom:1px solid rgba(196,161,89,.4)}
.dq .form-note{margin-top:-8px}
.dq-side .small a{color:var(--gold-2);border-bottom:1px solid rgba(196,161,89,.35)}
.dq-side .small a:hover{color:#fff}
@media (max-width:640px){
  .dq-panel{padding:18px 14px}
  .dq .dq-opt{font-size:14px}
  .dq-opt span{padding:10px 10px 10px 34px;min-height:46px}
  .dq-opt span::before{left:11px;width:14px;height:14px;margin-top:-7px}
  .dq legend{font-size:18px}
}
@media (max-width:980px){.dq-split .dq-side{order:0}}

/* ---------- Band ---------- */
.page-digital .band .btn-row{justify-content:center;margin-top:28px}
.page-digital .fallback a{white-space:nowrap}
@media (max-width:640px){.page-digital .band .btn-row{flex-direction:column;align-items:stretch}.page-digital .band .btn{width:100%}}

@media (prefers-reduced-motion:reduce){.dq-opt span,.dchips .dc,.sku,.bw li{transition:none}}

/* ---------- Work specimens ----------
   Full-bleed, edge to edge, no cards and no gaps: the pieces butt against each
   other so the row reads as one band of work rather than three products. */
.work-strip{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
.work-strip figure{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--navy-deep)}
.work-strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.work-strip figure:hover img{transform:scale(1.05)}
.work-strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 22px;
  background:linear-gradient(to top,rgba(8,19,42,.92),rgba(8,19,42,.5) 55%,transparent);
  font-family:var(--sans);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:#fff}
.work-strip figcaption i{display:block;font-style:normal;letter-spacing:.04em;text-transform:none;
  font-weight:500;font-size:14px;color:rgba(255,255,255,.72);margin-top:7px}
@media (prefers-reduced-motion:reduce){.work-strip img{transition:none}.work-strip figure:hover img{transform:none}}
@media (max-width:820px){.work-strip{grid-template-columns:1fr}.work-strip figure{aspect-ratio:16/10}}