/* Case-study pages (/work/<slug>/). Uses the site's tokens; spacing between sections is --sec, heading to content is --head. */
.case{padding-top:clamp(24px,3.5vw,44px);padding-bottom:var(--sec)}
.crumbs{margin:0;font-size:14px;line-height:1.4;color:var(--muted)}
.crumbs a{color:var(--ink);font-weight:650;text-underline-offset:3px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px;margin-inline:-6px}
.case-head{margin-top:clamp(22px,3vw,40px);max-width:62rem}
.case-head h1{margin:14px 0 0;font:700 clamp(40px,6.4vw,92px)/.95 var(--display);letter-spacing:-.05em;overflow-wrap:anywhere}
.case-lede{margin:clamp(16px,2vw,26px) 0 0;max-width:40ch;font-size:clamp(18px,1.9vw,25px);line-height:1.35}
.case-actions{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(20px,2.4vw,32px) 0 0}
.case-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:999px;font-size:16px;font-weight:700;text-decoration:none}
.case-btn:hover{background:#343434;border-color:#343434}
.case-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.case-btn--ghost{background:transparent;color:var(--ink)}
.case-btn--ghost:hover{background:var(--ink);color:var(--paper)}
.case .scene{background:color-mix(in srgb,var(--accent) 62%,#fff);border:1.5px solid var(--ink);border-radius:10px;margin-bottom:0}
.case .scene--blue{--accent:var(--blue)}.case .scene--teal{--accent:var(--teal)}.case .scene--orange{--accent:var(--orange)}.case .scene--green{--accent:var(--green)}
.case .desk{box-shadow:5px 6px 0 #11111126}
.case.portfolio .case-head{margin-bottom:clamp(40px,5vw,72px)}
.case.portfolio .scene{margin-bottom:18px}
.case.portfolio .work-item{display:flex;flex-direction:column}
.case.portfolio .work-item h3{min-height:0;margin-bottom:8px}
.case.portfolio .work-item .credit{margin-top:auto}
.case.portfolio .work-item .card-line{margin:0 0 8px;color:var(--muted)}
.case figure{margin:0}
.case figcaption{margin-top:12px;font-size:15px;line-height:1.45;color:var(--muted)}
.case figure.case-hero{margin-top:clamp(28px,4vw,52px)}
.case-hero .scene{padding:clamp(16px,3vw,44px) clamp(16px,3vw,44px) clamp(30px,4.5vw,60px)}
.case-hero .phone{right:clamp(24px,5vw,76px);bottom:clamp(14px,2.2vw,30px);width:clamp(84px,19%,230px)}
/* A page whose own headline runs under the phone frame (Spice Fusion) gets a smaller phone, so it sits below the headline */
.case-hero--phone-sm .phone{width:clamp(64px,13%,160px)}
/* The eyebrow is hidden site-wide; on a case study it is shown only to say "Our own site" */
.case-head .eyebrow{display:block;margin:0;color:var(--muted);letter-spacing:.08em}
/* At a glance: one plain list of up to six rows. Legal details sit in .case-company at the foot of the page. Same markup on every page. */
.case-glance{margin-top:clamp(28px,4vw,52px);padding:clamp(20px,3vw,36px);background:var(--paper-3,#fafbfc);border:1.5px solid var(--ink);border-radius:10px}
.case-glance>h2{margin:0 0 clamp(14px,2vw,22px);font:700 clamp(24px,2.6vw,32px)/1.1 var(--display);letter-spacing:-.04em}
.frows dt{font:700 13px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.frows{margin:0;border-top:1.5px solid var(--ink)}
.frow{display:grid;grid-template-columns:11rem minmax(0,1fr);column-gap:16px;align-items:center;min-height:48px;padding:4px 0;border-bottom:1px solid var(--line)}
.frow dd{margin:0}
.frow-v{font-size:16px;line-height:1.45;font-weight:500;overflow-wrap:anywhere}
.frow-v a{color:var(--ink);text-underline-offset:3px}
@media(max-width:768px){.frow-v a{display:inline-flex;align-items:center;min-height:44px;margin-block:-10px}}
.case-company{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line);max-width:70ch;font-size:15px;line-height:1.5;color:var(--muted)}
.case-company strong{color:var(--ink)}
.case-company a{display:inline-flex;align-items:center;min-height:44px;margin-inline:2px;color:var(--ink);font-weight:650;text-underline-offset:3px}
@media(max-width:620px){
  .frow{grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "v";min-height:0;padding:0 0 12px}
  .frow dt{grid-area:l}.frow-v{grid-area:v}
}
.case-sec{margin-top:var(--sec)}
.case-sec>h2{margin:0 0 var(--head);padding-bottom:12px;border-bottom:1.5px solid var(--ink);font:700 clamp(28px,4vw,52px)/.95 var(--display);letter-spacing:-.045em}
.case-sec>p{max-width:62ch;margin:0 0 1em;font-size:clamp(17px,1.5vw,19px);line-height:1.55}
.case-sec>p.case-note{font-size:15px;color:var(--muted);margin-top:14px}
.case-foot>p.case-note{max-width:70ch}
.built{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}
.built li{border:1.5px solid var(--ink);border-radius:7px;padding:20px;background:var(--paper-3,#fafbfc)}
.built h3{margin:0 0 8px;font:700 clamp(20px,2vw,24px)/1.1 var(--display);letter-spacing:-.03em}
.built p{margin:0;font-size:16px;line-height:1.5}
/* "Also in place": the basics in one small paragraph under the list (specificity beats .case-sec>p so the gap below the cards holds) */
.case-sec>p.case-also{max-width:62ch;margin:18px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.case-also strong{color:var(--ink)}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:28px}
.shot .scene{padding:clamp(14px,2vw,24px)}
.shot .desk img{aspect-ratio:auto}
.shot--phone .scene{display:flex;justify-content:center;padding:clamp(20px,3vw,36px)}
.phone--solo{position:relative;right:auto;bottom:auto;width:min(220px,62%)}
.table-wrap{overflow-x:auto;max-width:100%}
.table-wrap:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.compare{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.compare th,.compare td{padding:12px 14px;border:1.5px solid var(--ink);text-align:left;vertical-align:top}
.compare thead th{background:var(--ink);color:var(--paper);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.compare tbody th{background:var(--paper-2);font-weight:700}
.case-intro{max-width:62ch}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px}
.stats li{container-type:inline-size;border:1.5px solid var(--ink);border-radius:7px;padding:18px;background:var(--paper-3,#fafbfc)}
/* The headline is sized from its card (cqi), so the longest word ("violations") always fits; break-word is only a last resort. */
.stats strong{display:block;font:700 clamp(26px,17cqi,52px)/1 var(--display);letter-spacing:-.04em;overflow-wrap:break-word}
.stats li>span{display:block;margin-top:8px;font-size:15px;line-height:1.4}
/* Measured results: the plain line under each label says what the figure means for a visitor */
.stats li>span.means{margin-top:6px;font-size:15px;line-height:1.4;color:var(--muted)}
.compare .means{display:block;margin-top:6px;font-size:15px;line-height:1.4;font-weight:400;color:var(--muted)}
.quote blockquote{margin:0;padding:0 0 0 clamp(16px,2.4vw,30px);border-left:6px solid var(--ink)}
.quote blockquote p{margin:0;max-width:34em;font:600 clamp(22px,2.6vw,32px)/1.25 var(--display);letter-spacing:-.025em}
.quote figcaption{margin-top:16px;padding-left:calc(clamp(16px,2.4vw,30px) + 6px);font-size:16px;color:var(--ink-soft,#3f444d)}
.quote figcaption a{color:var(--ink);font-weight:650;text-underline-offset:3px}
.quote .case-note{padding-left:calc(clamp(16px,2.4vw,30px) + 6px);max-width:62ch;margin-top:8px;font-size:15px;color:var(--muted)}
.limits{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:62ch}
.limits li{position:relative;padding-left:26px;font-size:17px;line-height:1.5}
.limits li:before{content:"";position:absolute;left:3px;top:.55em;width:10px;height:10px;border:2.5px solid var(--ink);border-radius:50%}
.next-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.next-links a{display:block;min-height:76px;padding:16px 18px;border:1.5px solid var(--ink);border-radius:7px;color:var(--ink);font:700 clamp(18px,2vw,24px)/1.15 var(--display);letter-spacing:-.025em;text-decoration:none}
.next-links a:hover{background:var(--paper-2)}
.next-links a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.next-links span{display:block;margin-bottom:6px;font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.case-cta{display:grid;gap:clamp(16px,2vw,24px);margin-top:clamp(24px,3vw,40px);padding:clamp(20px,3vw,36px);background:var(--paper-2);border:1.5px solid var(--ink);border-radius:10px}
.case-cta p{max-width:46ch;margin:0;font-size:clamp(18px,1.8vw,22px);line-height:1.4}
.case-cta .case-actions{margin:0;max-width:none}
/* Mid-page call to action: the closing box, made compact; text left, button right, stacked under 700px. No previous/next links here. */
.case-cta-mid .case-cta{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(16px,2.4vw,32px);margin-top:0;padding:clamp(18px,2.4vw,28px)}
.case-cta-mid .case-cta p{font-size:clamp(17px,1.6vw,20px)}
@media(max-width:700px){
  .next-links{grid-template-columns:1fr}
  .case-cta-mid .case-cta{grid-template-columns:minmax(0,1fr)}
  .compare thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block}
  .compare tr{margin-bottom:14px;border:1.5px solid var(--ink)}
  .compare th,.compare td{border:0;border-bottom:1.5px solid var(--ink)}
  .compare tr>*:last-child{border-bottom:0}
  .compare td:before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}
/* Phones: two figures across, so five cards no longer take more than three screens; an odd last card spans the row */
@media(max-width:620px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stats li{padding:14px}.stats li:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:620px){.case-hero .scene{padding-bottom:30px}.case-btn{width:100%;justify-content:center}.case-actions{display:grid}}