/*
 * /our-work/ (resources/views/app/pages/our-work.blade.php). The CTO's layout
 * (provis-our-work-final.html) in the site theme: a dark hero on the homepage
 * banner, a light content area, Poppins and the brand green. Every rule is
 * scoped to .ow (or an ow-/sc-/mini-/proj-/sheet-/pj- class inside it). The
 * one exception is the phone cookie strip near the end, which restyles the
 * site-wide cookie banner; that is safe only because this file loads on
 * /our-work/ alone.
 */

.ow {
  --ow-green: #00B26B;
  --ow-green-dark: #00955A;
  --ow-gtext: #00744A;
  --ow-ink: #1C2522;
  --ow-ink-2: #4F5753;
  --ow-ink-3: #6A716E;
  --ow-paper: #F3F7F5;
  --ow-card: #fff;
  --ow-rule: #DDE5E1;
  --ow-tint: #EEF7F2;
  --ow-tint-line: #CFE9DC;
  --ow-ease: cubic-bezier(.16, 1, .3, 1);
  --ow-header: 72px;
  font-family: Poppins, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ow-ink);
  background: var(--ow-paper);
}
@media (max-width: 1023px) { .ow { --ow-header: 64px; } }
.ow *, .ow *::before, .ow *::after { box-sizing: border-box; }
.ow h1, .ow h2, .ow h3, .ow p { margin: 0; }
.ow a { text-decoration: none; }
/* :where() keeps this reset weaker than the component rules (.chip-btn etc.), so their font sizes win */
:where(.ow) button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
.ow img { max-width: 100%; }
.ow .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ow-wrap { width: 100%; max-width: 1328px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 639px) { .ow-wrap { padding: 0 16px; } }
.ow :focus-visible { outline: 2px solid var(--ow-green); outline-offset: 2px; }
body.ow-no-scroll { overflow: hidden; }

/* Icons from .svg files, coloured by currentColor */
.ow-ico { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ow-ico) center / contain no-repeat; mask: var(--ow-ico) center / contain no-repeat; }
.ow-ico--arrow { --ow-ico: url("../img/our-work/icons/arrow.svg"); }
.ow-ico--filter { --ow-ico: url("../img/our-work/icons/filter.svg"); width: 18px; height: 18px; }
.ow-ico--close { --ow-ico: url("../img/our-work/icons/close.svg"); width: 14px; height: 14px; }

/* Buttons */
.ow .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px;
  background: var(--ow-green); color: #fff; font-size: 15px; font-weight: 600; transition: background-color .2s, transform .2s; }
.ow .btn-primary:hover { background: var(--ow-green-dark); color: #fff; transform: translateY(-1px); }
.ow .btn-wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--ow-rule); background: var(--ow-card); color: var(--ow-ink); font-size: 15px; font-weight: 500; }
.ow .btn-wa:hover { border-color: var(--ow-green); }
.ow .btn-ghost-light { font-size: 14px; font-weight: 500; border: 1px solid var(--ow-rule); background: var(--ow-card); border-radius: 12px; padding: 10px 18px; min-height: 44px; }
.ow .btn-ghost-light:hover { border-color: var(--ow-green); }
.ow .btn-ghost-dark { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: 15px; font-weight: 500; }
.ow .btn-ghost-dark:hover { border-color: var(--ow-green); color: #fff; }
.ow-link { color: var(--ow-gtext); font-weight: 500; font-size: 15px; text-decoration: underline !important; text-underline-offset: 3px; }

/* ───────────── Head: dark, on the homepage banner, with a green glow ───────────── */
.ow-head { position: relative; overflow: hidden; background: #050806; color: #fff; padding: calc(var(--ow-header) + 56px) 0 104px; }
.ow-head__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; pointer-events: none; }
.ow-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 70% at 85% 30%, rgba(0, 178, 107, .28), transparent 70%), linear-gradient(90deg, rgba(5, 8, 6, .92) 0%, rgba(5, 8, 6, .7) 55%, rgba(5, 8, 6, .45) 100%); }
.ow-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 80% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 80% 40%, #000, transparent 75%); }
.ow-head-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 32px 72px; }
.ow-head h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1; font-weight: 700; letter-spacing: -.035em; margin-bottom: 18px; }
.ow-head h1 span { background: linear-gradient(90deg, #00B26B, #6EE7B7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-lede { font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .78); max-width: 620px; }

/* Independent reviews panel */
.ow-reviews { padding: 18px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.ow-reviews-h { margin: 2px 4px 10px !important; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6EE7B7; }
.ow-rate { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ow-rate a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; color: #fff; background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .06); transition: background-color .2s, border-color .2s, transform .2s var(--ow-ease); }
.ow-rate a:hover { background: rgba(0, 178, 107, .12); border-color: rgba(0, 178, 107, .45); color: #fff; transform: translateX(3px); }
.ow-rate img { width: 40px; height: 40px; flex: none; border-radius: 50%; }
.ow .rt { flex: 1; display: grid; gap: 2px; }
.ow .rt-top { display: flex; align-items: center; gap: 10px; }
.ow .rt-top b { font-size: 18px; font-weight: 700; line-height: 1.2; }
.ow .rt-src { font-size: 13px; color: rgba(255, 255, 255, .65); }
.ow .stars { position: relative; display: inline-block; width: 85px; height: 15px; flex: none;
  background: rgba(255, 255, 255, .25); -webkit-mask: url("../img/our-work/icons/stars.svg") left center / 85px 15px no-repeat; mask: url("../img/our-work/icons/stars.svg") left center / 85px 15px no-repeat; }
.ow .stars-on { position: absolute; inset: 0 auto 0 0; background: #FFB901; }
.ow-ico--ext { --ow-ico: url("../img/our-work/icons/external.svg"); width: 16px; height: 16px; color: rgba(255, 255, 255, .45); }
.ow-rate a:hover .ow-ico--ext { color: #6EE7B7; }

/* ───────────── Filter console: a card over the hero's edge, sticky as a slim bar ───────────── */
.ow-bar { position: sticky; top: var(--ow-header); z-index: 30; margin-top: -64px; transition: background-color .2s; }
html.imc-bar-on .ow-bar { top: calc(var(--ow-header) + var(--imc-bar-h, 0px)); }
.ow-console { padding: 14px 16px 12px; border-radius: 22px; background: #fff; border: 1px solid var(--ow-rule);
  box-shadow: 0 30px 60px -30px rgba(5, 30, 18, .45), 0 2px 6px rgba(5, 30, 18, .06); transition: border-radius .2s, box-shadow .2s, padding .2s; }
.ow-bar.is-stuck { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.2) blur(6px); backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--ow-rule); box-shadow: 0 10px 24px -18px rgba(5, 30, 18, .35); }
.ow-bar.is-stuck .ow-console { padding: 10px 0; border-color: transparent; border-radius: 0; box-shadow: none; background: transparent; }
.ow-status:not(:has(.ow-active:not([hidden]), .ow-sub:not([hidden]))) { display: none; }

/* Chips and controls share the first row; the extra rows (eCommerce
   sub-filter, More panel, status line) always span the full width below,
   so turning a filter on never pushes the controls onto a new line. */
.ow-bar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; }
.ow-bar-inner > .ow-sub, .ow-bar-inner > .ow-more-panel, .ow-bar-inner > .ow-status { grid-column: 1 / -1; }
.ow-chips { display: flex; gap: 4px; flex-wrap: nowrap; justify-self: start; padding: 4px; border-radius: 999px; background: #EEF3F0; }
.ow .chip-btn { font-size: 14px; font-weight: 500; color: var(--ow-ink-2) !important; background: transparent !important; border: 0 !important; border-radius: 999px !important;
  padding: 7px 12px !important; min-height: 36px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s; }
.ow .chip-btn:hover { color: var(--ow-ink) !important; background: rgba(255, 255, 255, .7) !important; }
.ow .chip-btn[aria-pressed="true"] { background: var(--ow-ink) !important; color: #fff !important; box-shadow: 0 4px 12px -4px rgba(5, 30, 18, .5); }
.ow-controls { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

/* Short chip labels (B2B, Websites) while chips and controls share a row;
   the full labels show when the toolbar splits into two rows (761-1139px). */
.ow .chip-long { display: none; }
@media (max-width: 1139px) and (min-width: 761px) { .ow .chip-long { display: inline; } }
.ow-more:hover { border-color: #B9C3BE; }
.ow-more, .ow-filters-btn { font-size: 14px; font-weight: 500; color: var(--ow-ink); background: var(--ow-card) !important; border: 1px solid var(--ow-rule) !important; border-radius: 12px; min-height: 44px; padding: 0 16px !important; display: inline-flex; align-items: center; gap: 8px; }
.ow-more[aria-expanded="true"] { border-color: var(--ow-ink) !important; }
.ow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ow-green); }
.ow-dot[hidden] { display: none; }
.ow-filters-btn { display: none; position: relative; }
.ow-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ow-ink); cursor: pointer; min-height: 44px; white-space: nowrap; }
.ow-controls .ow-toggle { padding: 0 4px 0 14px; border-left: 1px solid var(--ow-rule); margin-left: 4px; }
.ow-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ow-toggle .track { width: 38px; height: 22px; border-radius: 999px; background: #C9D1CD; position: relative; transition: background-color .15s; flex: none; }
.ow-toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s var(--ow-ease); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ow-toggle input:checked + .track { background: var(--ow-green); }
.ow-toggle input:checked + .track::after { transform: translateX(16px); }
.ow-toggle input:focus-visible + .track { outline: 2px solid var(--ow-green); outline-offset: 2px; }
.ow-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ow-ink-3); }
.ow-sub .chip-btn { border: 1px solid var(--ow-rule) !important; background: #fff !important; }
.ow-sub .chip-btn[aria-pressed="true"] { background: var(--ow-ink) !important; }
.ow-sub[hidden], .ow-more-panel[hidden], .ow-active[hidden] { display: none; }
.ow-more-panel { display: flex; flex-wrap: wrap; gap: 12px 20px; padding-top: 4px; }
.ow-more-panel label, .sheet label:not(.ow-toggle) { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ow-ink-3); }
.ow-status { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--ow-rule); }
.ow-bar.is-stuck .ow-status { padding-top: 8px; }
.ow-active { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ow .tok { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 12px !important; font-size: 13.5px; font-weight: 500; color: var(--ow-ink) !important;
  background: #E3F4EC !important; border: 1px solid #B8E3CF !important; border-radius: 999px; white-space: nowrap; }
.ow .tok span:not(.ow-ico) { color: var(--ow-ink-3); font-weight: 400; }
.ow .tok:hover { border-color: var(--ow-gtext) !important; }
.ow-clear { font-size: 14px; font-weight: 500; color: var(--ow-gtext) !important; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; min-height: 32px; }

/* ───────────── Lists ───────────── */
.ow-list { padding: 40px 0 72px; }
.ow-hint { margin: 0 0 20px !important; font-size: 14.5px; color: var(--ow-ink-2); }
.ow-hint[hidden] { display: none; }
.ow-hint .ow-link { font-size: inherit; }
.ow .sec + .sec { margin-top: 64px; }
.ow .sec[hidden] { display: none; }
.ow .sec[hidden] + .sec { margin-top: 8px; }
.ow .sec-head { display: grid; gap: 4px; margin-bottom: 22px; }
.ow .sec-head h2 { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.ow .sec-head p { font-size: 15px; color: var(--ow-ink-3); }
.ow-more-wrap { display: flex; justify-content: center; margin-top: 28px; }
.ow-more-wrap[hidden] { display: none; }

/* ───────────── Case studies: the site on a mint stage beside the story ───────────── */
.ow .showcase { display: grid; gap: 28px; }
.sc { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; align-items: stretch;
  padding: 14px; background: var(--ow-card); border: 1px solid var(--ow-rule); border-radius: 28px;
  transition: border-color .2s, box-shadow .3s var(--ow-ease); }
.sc:hover { border-color: rgba(0, 178, 107, .45); box-shadow: 0 28px 56px -34px rgba(5, 60, 36, .45); }
.sc:has(.sc-hit:focus-visible) { outline: 2px solid var(--ow-green); outline-offset: 3px; }
.sc-flip .sc-media { order: 2; }

/* Stage: a soft mint panel with the site's window centred on it */
.sc-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 28px 24px; overflow: hidden; border-radius: 20px;
  background: radial-gradient(60% 55% at 50% 52%, rgba(0, 178, 107, .32), transparent 72%), radial-gradient(90% 60% at 100% 0%, rgba(0, 178, 107, .14), transparent 70%), linear-gradient(160deg, #E4F4EC, #F3F9F6 60%, #E9F5EF); }
.sc-media::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(rgba(0, 116, 74, .14) 1px, transparent 1px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, transparent 30%, #000); mask-image: radial-gradient(60% 60% at 50% 50%, transparent 30%, #000); }
.sc-media .frame { position: relative; width: 100%; border-radius: 14px; border: 1px solid var(--ow-rule);
  box-shadow: 0 30px 60px -28px rgba(5, 60, 36, .45), 0 2px 6px rgba(5, 60, 36, .06); transition: transform .45s var(--ow-ease); }
.sc:hover:not(:has(.sc-live:hover)) .sc-media .frame { transform: translateY(-6px) scale(1.01); }
.sc-tile { position: relative; width: 100%; aspect-ratio: 16 / 10; display: grid; align-content: end; gap: 6px; padding: 26px 28px; border-radius: 16px;
  background: #fff; border: 1px solid var(--ow-tint-line); box-shadow: 0 20px 40px -26px rgba(5, 60, 36, .35); }
.sc-tile b { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; color: var(--ow-ink); }
.sc-tile span { font-size: 14px; color: var(--ow-ink-3); }
.sc-tile::before { content: ""; position: absolute; top: 24px; left: 28px; width: 44px; height: 4px; border-radius: 4px; background: var(--ow-green); }

/* Story */
.sc-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 14px 0; }
.sc-flip .sc-body { padding: 18px 0 14px 20px; }
.sc-svc { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sc-svc li { padding: 4px 11px; border-radius: 999px; background: #E3F4EC; color: var(--ow-gtext); font-size: 12px; font-weight: 600; }
.sc-name { margin-top: 2px; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.sc-hit { color: inherit !important; }
.sc-hit::after { content: ""; position: absolute; inset: 0; border-radius: 28px; }
.sc-hit:focus-visible { outline: none; }
.sc-built { font-size: 16px; line-height: 1.55; color: var(--ow-ink-2); max-width: 48ch; }
.sc-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sc-parts li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; color: var(--ow-ink-2); }
.sc-parts li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ow-green) url("../img/our-work/icons/tick.svg") center / 10px no-repeat; }
.sc-metric { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(100deg, #E3F4EC, #F1F8F4); border: 1px solid var(--ow-tint-line); }
.sc-metric small { grid-column: 1 / -1; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ow-gtext); }
.sc-metric b { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--ow-gtext); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.sc-metric span { padding-left: 18px; border-left: 1px solid var(--ow-tint-line); font-size: 14px; line-height: 1.45; color: var(--ow-ink); }
.sc-extra { grid-column: 1 / -1; list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--ow-tint-line); display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--ow-ink-2); }
.sc-extra li::before { content: "+"; color: var(--ow-gtext); font-weight: 700; margin-right: 6px; }
.sc-quote { position: relative; margin: 0; padding: 12px 14px 12px 44px; border-radius: 14px; background: #F6F8F7; }
.sc-quote::before { content: "“"; position: absolute; left: 14px; top: 4px; font-size: 46px; line-height: 1; font-weight: 700; color: var(--ow-green); }
.sc-quote blockquote { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ow-ink); }
.sc-quote figcaption { margin-top: 6px; font-size: 12.5px; color: var(--ow-ink-3); }
.sc-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; padding-top: 12px; border-top: 1px solid var(--ow-rule); }
.sc-kv dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ow-ink-3); }
.sc-kv dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ow-ink); }
.sc-ctx { font-size: 13.5px; line-height: 1.5; color: var(--ow-ink-3); }
.sc-eng { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #F6F8F7; font-size: 13px; font-weight: 500; color: var(--ow-ink); }
.sc-eng::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ow-green); box-shadow: 0 0 0 3px rgba(0, 178, 107, .2); }
.sc-acts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.sc-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--ow-ink); font-size: 15px; font-weight: 600; color: var(--ow-ink);
  transition: background-color .2s, color .2s; }
.sc-go .ow-ico { transition: transform .15s var(--ow-ease); }
/* Each button reacts only to its own hover (not the whole card's), so pointing
   at "Visit the live site" never lights up "Read the case study". The button
   sits above the card's link overlay; a click on it still opens the case study. */
.sc-go { position: relative; z-index: 1; cursor: pointer; }
.sc-go:hover { background: var(--ow-ink); color: #fff; }
.sc-go:hover .ow-ico { transform: translateX(3px); }
.sc-live { position: relative; z-index: 1; font-size: 13.5px; color: var(--ow-ink-2) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.sc-live:hover { color: var(--ow-gtext) !important; text-decoration-thickness: 2px !important; }

/* Browser frame */
.ow .frame { overflow: hidden; background: #fff; }
.ow .frame-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #F1F4F2; border-bottom: 1px solid var(--ow-rule); }
.ow .frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #CFD6D2; }
.ow .frame-bar i:nth-child(1) { background: #FF6159; } .ow .frame-bar i:nth-child(2) { background: #FFBF2F; } .ow .frame-bar i:nth-child(3) { background: #2ACB42; }
.ow .frame-bar span { margin-left: 10px; flex: 1; max-width: 60%; height: 18px; border-radius: 6px; background: #fff; font-size: 11px; line-height: 18px; color: var(--ow-ink-3); padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ow .frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; display: block; }

/* Call to action after the third case study */
.ow-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 22px 26px; background: var(--ow-tint); border: 1px solid var(--ow-tint-line); border-radius: 18px; }
#moreSec > .ow-cta { margin-top: 28px; }
.ow-cta-h { flex: 1 1 220px; font-size: 20px; font-weight: 700; color: var(--ow-ink); }
.ow-cta-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ow-how-card { flex: 1 1 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--ow-card); border: 1px solid var(--ow-tint-line); border-radius: 12px; color: inherit !important; }
.ow-how-card:hover { border-color: rgba(0, 178, 107, .6); }
.ow-how-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #E3F4EC; }
.ow-how-t { flex: 1; display: grid; gap: 1px; }
.ow-how-t b { font-size: 15.5px; font-weight: 600; color: var(--ow-ink); }
.ow-how-t span { font-size: 13.5px; color: var(--ow-ink-3); }
.ow-how-go { font-size: 18px; color: var(--ow-gtext); }
.ow-free { flex: 1 1 100%; padding-top: 14px; border-top: 1px solid var(--ow-tint-line); }
.ow-free[hidden] { display: none; }
.ow-free-h { margin-bottom: 10px !important; font-size: 14px; font-weight: 600; color: var(--ow-ink); }
.ow-free-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ow-free-list a.offer { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; background: var(--ow-card); border: 1px solid var(--ow-rule); border-radius: 12px; color: inherit; }
.ow-free-list a.offer:hover { border-color: rgba(0, 178, 107, .55); }
.ow-free-list a.offer b { color: var(--ow-ink); font-weight: 600; }
.ow-free-list a.offer span { flex: 1; font-size: 13.5px; color: var(--ow-ink-3); }
.ow-free-list a.offer em { font-style: normal; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ow-gtext); display: inline-flex; align-items: center; gap: 6px; }

/* More of our work: compact four-up grid */
.mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mini { background: var(--ow-card); border: 1px solid var(--ow-rule); border-radius: 16px; overflow: hidden; transition: border-color .15s, box-shadow .2s var(--ow-ease), transform .2s var(--ow-ease); }
.mini:hover { border-color: rgba(0, 178, 107, .45); box-shadow: 0 14px 28px -20px rgba(12, 30, 22, .4); transform: translateY(-2px); }
.mini-hit { display: flex; flex-direction: column; height: 100%; color: inherit !important; }
.mini-hit:focus-visible { outline-offset: -3px; border-radius: 16px; }
.mini img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; display: block; background: #E9ECEA; border-bottom: 1px solid var(--ow-rule); }
.mini-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mini h3 { font-size: 15.5px; font-weight: 600; }
.mini-built { font-size: 13.5px; color: var(--ow-ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Name tile where there is no clean screenshot yet */

/* Empty state */
.ow-empty { max-width: 520px; margin: 0 auto; padding: 48px 16px; display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--ow-ink-2); }
.ow-empty[hidden] { display: none; }
.ow-empty h3 { font-size: 19px; font-weight: 600; color: var(--ow-ink); }
.ow-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

/* Closing band */
.ow-end { background: radial-gradient(90% 140% at 100% 100%, rgba(0, 178, 107, .38), rgba(0, 178, 107, 0) 60%), #000; color: #fff; padding: 56px 0; }

.ow-end h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.ow-end p { color: rgba(255, 255, 255, .72); max-width: 560px; }
.ow-end-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.ow-end .btn-wa { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; }

/* ───────────── Mobile filter sheet and project summary ───────────── */
/* Above the cookie bar (z-index 99999), which would otherwise cover the sheet's buttons on phones */
.sheet-scrim { position: fixed; inset: 0; z-index: 100000; background: rgba(8, 12, 10, .55); }
.sheet-scrim[hidden], .sheet[hidden], .proj[hidden] { display: none !important; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; max-height: 88vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); background: #fff; color: var(--ow-ink); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .2); }

.sheet-handle { justify-self: center; width: 40px; height: 4px; border-radius: 4px; background: #D5DBD8; }
.sheet-head h2 { font-size: 18px; font-weight: 600; }
.sheet-x { font-size: 26px !important; line-height: 1; width: 40px; height: 40px; border-radius: 10px; }
.sheet-x:hover { background: #F0F3F1 !important; }
.sheet-scroll { overflow: auto; display: grid; gap: 18px; padding: 2px 0 4px; }

.sheet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-foot .btn-primary[disabled] { background: #D5DBD8; color: #4F5753; cursor: not-allowed; transform: none; }

.proj { position: fixed; z-index: 100001; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  background: #fff; color: var(--ow-ink); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.proj .sheet-x { position: absolute; top: 10px; right: 10px; z-index: 1; background: rgba(255, 255, 255, .92) !important; }
.proj img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; display: block; }

.proj-body { padding: 20px 22px 24px; display: grid; gap: 10px; }
.proj-body h2 { font-size: 22px; font-weight: 700; }
.proj-body .ow-link { justify-self: start; }

.proj-body .sc-quote { margin-top: 6px; }
.proj-cta { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--ow-rule); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.proj-cta p { flex: 1 1 180px; font-weight: 500; color: var(--ow-ink); }
.proj-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 22px 18px; border-top: 1px solid var(--ow-rule); background: #FAFBFA; }
.proj-nav button { font-size: 14px; font-weight: 500; color: var(--ow-ink); min-height: 40px; padding: 0 12px !important; border-radius: 10px; border: 1px solid var(--ow-rule) !important; background: var(--ow-card) !important; }
.proj-nav button:hover:not([disabled]) { border-color: #B9C3BE !important; }
.proj-nav button[disabled] { opacity: .45; cursor: default; }
.proj-nav span { font-size: 13px; color: var(--ow-ink-3); font-variant-numeric: tabular-nums; }

/* ───────────── Responsive ───────────── */
@media (max-width: 1100px) {
  .sc { gap: 28px; }
  .sc-media { padding: 24px; }
  .sc-name { font-size: 26px; }
  .sc-built { font-size: 16px; }
  .mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
@media (max-width: 1240px) {
  .ow-head-in { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px 40px; }
}
@media (max-width: 860px) {
  .ow-head-in { grid-template-columns: 1fr; }
  .sc { grid-template-columns: 1fr; gap: 0; padding: 10px; }
  .sc-flip .sc-media { order: 0; }
  .sc-media { padding: 28px 22px; }
  .sc-body, .sc-flip .sc-body { padding: 20px 8px 10px; gap: 12px; }
  .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Toolbar: chips on their own row, then the controls (a wide row of both no longer fits) */
@media (max-width: 1139px) and (min-width: 761px) {
  .ow-bar-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ow-head { padding: calc(var(--ow-header) + 32px) 0 88px; }
  .ow-head h1 { font-size: 44px; margin-bottom: 14px; }
  .ow-lede { font-size: 16px; }
  /* Reviews: one compact row of three */
  .ow-reviews { padding: 12px; border-radius: 18px; }
  .ow-reviews-h { margin-bottom: 8px !important; }
  .ow-rate { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ow-rate a { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; height: 100%; }
  .ow-rate a:hover { transform: none; }
  .ow-rate img { width: 28px; height: 28px; }
  .ow-ico--ext { display: none; }
  .ow .rt-top { flex-wrap: wrap; gap: 2px 6px; }
  .ow .rt-top b { font-size: 15px; }
  .ow .stars { width: 62px; height: 11px; -webkit-mask-size: 62px 11px; mask-size: 62px 11px; }
  .ow .rt-src { font-size: 11.5px; line-height: 1.35; }
  .ow-bar { margin-top: -56px; }
  .ow-console { padding: 10px 10px 8px; border-radius: 18px; }
  /* Toolbar: scrolling chips + one Filters button that opens the sheet */
  .ow-bar-inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .ow-chips { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .ow-chips::-webkit-scrollbar { display: none; }
  .ow .chip-btn { flex: none; padding: 7px 10px !important; }
    .ow .chip-long { display: none; }
  .ow-controls > .ow-ms, .ow-controls > .ow-more, .ow-controls > .ow-toggle, .ow-more-panel { display: none !important; }
  .ow-filters-btn { display: inline-flex; flex: none; min-height: 44px; padding: 0 12px !important; gap: 6px; border-radius: 999px; }
  .ow-bar.is-stuck .ow-console { padding: 8px 0; }
  .ow-filters-btn .ow-dot { position: absolute; top: 7px; right: 7px; }
  .ow-active { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ow-active::-webkit-scrollbar { display: none; }
  .ow .tok { flex: none; }
  .ow-list { padding-top: 28px; }
  .ow .sec + .sec { margin-top: 44px; }
  .ow .sec-head h2 { font-size: 22px; }
  .ow .sec-head p { font-size: 13.5px; }
  .ow .showcase { gap: 16px; }
  .sc { border-radius: 22px; }
  .sc-hit::after { border-radius: 22px; }
  .sc-name { font-size: 24px; }
  .sc-built { font-size: 15.5px; }
  .sc-metric { grid-template-columns: 1fr; row-gap: 6px; }
  .sc-metric b { font-size: 34px; }
  .sc-metric span { padding-left: 0; border-left: 0; }
  .sc-media { padding: 20px 14px; border-radius: 16px; }
  .sc-kv { gap: 10px 14px; }
  .sc-go { flex: 1 1 100%; justify-content: center; }
  .ow .frame-bar { height: 24px; }
  .ow-cta { padding: 18px; }
  .ow-cta-h { font-size: 17px; }
  .ow-cta-acts { width: 100%; }
  .ow-cta-acts .btn-primary, .ow-cta-acts .btn-wa { flex: 1 1 0; justify-content: center; }
  /* Small project rows: thumbnail beside the text */
  .mini-grid { grid-template-columns: 1fr; gap: 10px; }
  .mini-hit { flex-direction: row; align-items: center; }
  .mini img { width: 124px; flex: none; aspect-ratio: 16 / 10; margin-left: 10px; border: 1px solid var(--ow-rule); border-radius: 8px; object-position: left top; }

  .mini-body { padding: 10px 12px; }
  .ow-end-acts { width: 100%; }
  .ow-end-acts .btn-primary, .ow-end-acts .btn-wa { flex: 1 1 0; }
  .proj { top: auto; bottom: 0; left: 0; transform: none; width: 100%; border-radius: 18px 18px 0 0; max-height: 85vh; }
  .proj-cta p { flex-basis: 100%; }
  .proj-cta .btn-primary, .proj-cta .btn-wa { flex: 1 1 0; justify-content: center; }
  .proj-nav { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .sc, .mini, .sc-media .frame, .sc-go, .sc-go .ow-ico, .ow .btn-primary { transition: none; }
  .sc:hover .sc-media .frame, .mini:hover, .ow .btn-primary:hover { transform: none; }
}

/* ───────────── Multi-select dropdowns (Industry, Integration, Platform, Region) ───────────── */
.ow-ms { position: relative; }
.ow-ms-btn { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; padding: 0 34px 0 14px !important; border: 1px solid var(--ow-rule) !important; border-radius: 12px; background-color: var(--ow-card) !important;
  font-size: 14px; font-weight: 500; color: var(--ow-ink); white-space: nowrap; max-width: 220px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ow-ink-3) 50%), linear-gradient(135deg, var(--ow-ink-3) 50%, transparent 50%) !important;
  background-position: calc(100% - 17px) 19px, calc(100% - 12px) 19px !important; background-size: 5px 5px !important; background-repeat: no-repeat !important; }
.ow-ms-btn:hover { border-color: #B9C3BE !important; }
.ow-ms-btn[aria-expanded="true"] { border-color: var(--ow-ink) !important; }
.ow-ms-l { font-size: 12px; font-weight: 500; color: var(--ow-ink-3); }
.ow-ms-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ow-ms.is-set .ow-ms-btn { border-color: var(--ow-green) !important; background-color: #EEF7F2 !important; }
.ow-ms.is-set .ow-ms-v { color: var(--ow-gtext); font-weight: 600; }
.ow-ms-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 280px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--ow-rule);
  box-shadow: 0 24px 48px -20px rgba(5, 30, 18, .4); }
.ow-ms-pop[hidden] { display: none; }
.ow-ms-list { display: grid; max-height: 300px; overflow-y: auto; padding: 2px; }
.ow-ms-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; color: var(--ow-ink); cursor: pointer; }
.ow-ms-opt:hover { background: var(--ow-paper); }

.ow-ms-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ow-ms-box { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #B9C3BE; background: #fff; transition: background-color .15s, border-color .15s; }
.ow-ms-opt input:checked + .ow-ms-box { border-color: var(--ow-green); background: var(--ow-green) url("../img/our-work/icons/tick.svg") center / 12px no-repeat; }
.ow-ms-opt input:focus-visible + .ow-ms-box { outline: 2px solid var(--ow-green); outline-offset: 2px; }
.ow-ms-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--ow-rule); }
.ow-ms-clear { font-size: 13.5px; font-weight: 500; color: var(--ow-ink-3) !important; text-decoration: underline; text-underline-offset: 3px; }
.ow-ms-done { min-height: 34px; padding: 0 16px !important; border-radius: 10px; background: var(--ow-ink) !important; color: #fff !important; font-size: 13.5px; font-weight: 600; }
.ow-more-panel .ow-ms-pop { top: calc(100% + 6px); }
.ow-controls .ow-ms:last-of-type .ow-ms-pop { left: auto; right: 0; }
/* Sheet: multi-select chip groups */

/* ───────────── Mobile filter sheet: sections that fold, chips with a tick ───────────── */
.sheet { padding: 8px 0 0; gap: 0; border-radius: 22px 22px 0 0; }
.sheet-handle { margin-bottom: 4px; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 6px 12px 12px 20px; border-bottom: 1px solid var(--ow-rule); }
.sheet-head h2 { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; }
.sheet-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ow-green); color: #fff; font-size: 12px; font-weight: 700; }
.sheet-badge[hidden], .sheet-head .ow-clear[hidden] { display: none; }
.sheet-head .ow-clear { min-height: 36px; font-size: 14px; }
.sheet-scroll { padding: 14px 20px 8px; gap: 10px; overscroll-behavior: contain; }
.sheet-cs { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--ow-tint); border: 1px solid var(--ow-tint-line); cursor: pointer; }
.sheet-cs b { display: block; font-size: 15px; font-weight: 600; color: var(--ow-ink); }
.sheet-cs small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ow-ink-3); }
.sheet-cs .ow-toggle { min-height: 0; }
.ow .sg { border-bottom: 1px solid var(--ow-rule); }
.ow .sg:last-child { border-bottom: 0; }
.ow .sg-h { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 2px !important; text-align: left; }
.ow .sg-t { flex: 1; font-size: 15.5px; font-weight: 600; color: var(--ow-ink); }
.ow .sg-v { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: #E3F4EC; color: var(--ow-gtext); font-size: 12.5px; font-weight: 600; }
.ow .sg-v.is-any { background: transparent; color: var(--ow-ink-3); font-weight: 500; padding: 0; }
.ow .sg-chev { flex: none; width: 10px; height: 10px; margin: 0 6px 4px 4px; border-right: 2px solid var(--ow-ink-3); border-bottom: 2px solid var(--ow-ink-3); transform: rotate(45deg); transition: transform .2s var(--ow-ease); }
.ow .sg.is-open .sg-chev { transform: rotate(-135deg); margin-bottom: -4px; }
.ow .sg-b { padding: 0 0 16px; }
.ow .sg-b[hidden] { display: none; }
.sheet .sheet-chips { gap: 8px; }
.sheet .sheet-chips .chip-btn { min-height: 40px; padding: 8px 14px !important; border: 1px solid var(--ow-rule) !important; background: #fff !important; color: var(--ow-ink) !important; font-size: 14px; }
.sheet .sheet-chips .chip-btn[aria-pressed="true"] { background: #E3F4EC !important; border-color: var(--ow-green) !important; color: var(--ow-gtext) !important; font-weight: 600; padding-left: 10px !important; }
.sheet .sheet-chips .chip-btn[aria-pressed="true"]::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--ow-green) url("../img/our-work/icons/tick.svg") center / 10px no-repeat; }
.ow .sg-more { margin-top: 12px; min-height: 36px; padding: 0 14px !important; border-radius: 10px; border: 1px dashed #B9C3BE !important; font-size: 13.5px; font-weight: 600; color: var(--ow-ink) !important; }
.sheet-foot { display: block; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ow-rule); background: #fff; box-shadow: 0 -10px 24px -18px rgba(5, 30, 18, .35); }
.sheet-foot .btn-primary { width: 100%; min-height: 52px; border-radius: 14px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .ow .sg-chev { transition: none; } }
.sheet label.sheet-cs { display: flex; color: var(--ow-ink); font-size: 14px; }
.ow .sheet-foot .btn-primary[disabled] { background: #E4E9E6; color: var(--ow-ink-3); opacity: 1; cursor: not-allowed; transform: none; }

/* Screenshots keep their true 16:10 proportions (never cropped or zoomed);
   the stage wraps the window and sits centred beside the story. */
@media (min-width: 861px) {
  .sc { align-items: center; }
  .sc-media { min-height: 0; align-self: center; padding: 28px; }
}

/* ───────────── View toggle: list / grid ───────────── */
.ow-view { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: #EEF3F0; }
.ow-view button { display: grid !important; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--ow-ink-3) !important; transition: background-color .15s, color .15s; }
.ow-view button:hover { color: var(--ow-ink) !important; }
.ow-view button[aria-pressed="true"] { background: #fff !important; color: var(--ow-ink) !important; box-shadow: 0 1px 3px rgba(5, 30, 18, .18); }
.ow-ico--list { --ow-ico: url("../img/our-work/icons/view-list.svg"); width: 20px; height: 20px; }
.ow-ico--grid { --ow-ico: url("../img/our-work/icons/view-grid.svg"); width: 18px; height: 18px; }

/* Grid view: case studies as compact cards, three across */
.ow[data-view="grid"] .showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ow[data-view="grid"] .showcase > .ow-cta { grid-column: 1 / -1; }
.ow[data-view="grid"] .sc { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border-radius: 22px; }
.ow[data-view="grid"] .sc-hit::after { border-radius: 22px; }
.ow[data-view="grid"] .sc-flip .sc-media { order: 0; }
.ow[data-view="grid"] .sc-media { flex: none; min-height: 0; aspect-ratio: 16 / 11.5; padding: 18px; border-radius: 16px; align-self: auto; align-items: center; }
.ow[data-view="grid"] .sc-media .frame, .ow[data-view="grid"] .sc-tile { width: 100%; }
.ow[data-view="grid"] .sc-tile { padding: 18px 20px; }
.ow[data-view="grid"] .sc-tile b { font-size: 24px; }
.ow[data-view="grid"] .sc-tile::before { top: 18px; left: 20px; }
.ow[data-view="grid"] .sc-body, .ow[data-view="grid"] .sc-flip .sc-body { flex: 1; padding: 16px 8px 8px; gap: 10px; }
.ow[data-view="grid"] .sc-name { font-size: 21px; }
.ow[data-view="grid"] .sc-built { font-size: 14.5px; }
.ow[data-view="grid"] .sc-parts, .ow[data-view="grid"] .sc-quote, .ow[data-view="grid"] .sc-kv,
.ow[data-view="grid"] .sc-ctx, .ow[data-view="grid"] .sc-eng, .ow[data-view="grid"] .sc-extra, .ow[data-view="grid"] .sc-live { display: none; }
.ow[data-view="grid"] .sc-metric { grid-template-columns: 1fr; row-gap: 2px; padding: 10px 14px; }
.ow[data-view="grid"] .sc-metric b { font-size: 26px; }
.ow[data-view="grid"] .sc-metric span { padding-left: 0; border-left: 0; font-size: 13px; }
.ow[data-view="grid"] .sc-go { min-height: 40px; padding: 8px 14px; font-size: 14px; }

@media (max-width: 1100px) {
  .ow[data-view="grid"] .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ow-view button { width: 34px; height: 38px; }
  .ow[data-view="grid"] .showcase { grid-template-columns: 1fr; }
}

/* ───────────── "Talk to the team" band ───────────── */
.ow .ow-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  padding: 28px 32px; border: 1px solid rgba(0, 178, 107, .35); border-radius: 26px; color: #fff;
  background: radial-gradient(55% 140% at 0% 50%, rgba(0, 178, 107, .38), transparent 65%), radial-gradient(40% 120% at 100% 100%, rgba(0, 178, 107, .18), transparent 60%), #06100B; }
.ow .ow-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
.ow-cta > * { position: relative; z-index: 1; }
.ow-cta-who { flex: 1 1 420px; display: flex; align-items: center; gap: 18px; }
.ow .ow-cta-h { flex: none; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.ow-cta-sub { margin-top: 4px !important; max-width: 56ch; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.ow .ow-cta .btn-primary { min-height: 50px; padding: 12px 22px; font-size: 15.5px; box-shadow: 0 10px 24px -10px rgba(0, 178, 107, .8); }
.ow .ow-cta .btn-primary .ow-ico { transition: transform .15s var(--ow-ease); }
.ow .ow-cta .btn-primary:hover .ow-ico { transform: translateX(3px); }
.ow .ow-cta .btn-wa { min-height: 50px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); color: #fff; }
.ow .ow-cta .btn-wa:hover { border-color: var(--ow-green); background: rgba(0, 178, 107, .12); }
.ow .ow-how-card, .ow .ow-free-list a.offer { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff !important; }
.ow .ow-how-t b, .ow .ow-free-list a.offer b, .ow .ow-free-h { color: #fff; }
.ow .ow-how-t span, .ow .ow-free-list a.offer span { color: rgba(255, 255, 255, .65); }
.ow .ow-free { border-top-color: rgba(255, 255, 255, .12); }
@media (max-width: 760px) {
  .ow .ow-cta { padding: 22px 18px; border-radius: 22px; }
  .ow-cta-who { flex-basis: 100%; align-items: flex-start; gap: 14px; }
  .ow .ow-cta-h { font-size: 19px; }
  .ow-cta-sub { font-size: 13.5px; }
  .ow-cta-acts { width: 100%; }
  .ow .ow-cta-acts .btn-primary { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding: 12px 16px; }
  .ow .ow-cta-acts .btn-wa { flex: 0 1 auto; justify-content: center; padding: 12px 14px; }
}

/* ───────────── More of our work: picture cards on a mint stage ───────────── */
.mini-grid { gap: 20px; }
.ow .mini { border-radius: 22px; padding: 8px; transition: border-color .2s, box-shadow .3s var(--ow-ease), transform .3s var(--ow-ease); }
.ow .mini:hover { border-color: rgba(0, 178, 107, .45); box-shadow: 0 22px 44px -28px rgba(5, 60, 36, .45); transform: translateY(-4px); }
.mini-hit:focus-visible { border-radius: 22px; }
.mini-stage { position: relative; display: grid; place-items: start center; aspect-ratio: 16 / 11; padding: 38px 16px 0; overflow: hidden; border-radius: 16px;
  background: radial-gradient(70% 70% at 50% 100%, rgba(0, 178, 107, .25), transparent 70%), linear-gradient(160deg, #E6F5ED, #F4F9F6); }
/* The site's top (header, hero) shows; a tall page runs off the stage's bottom edge */
.mini-frame { align-self: start; width: 100%; overflow: hidden; border-radius: 10px 10px 0 0; background: #fff; border: 1px solid var(--ow-rule); border-bottom: 0;
  box-shadow: 0 -6px 24px -12px rgba(5, 60, 36, .35); transition: transform .4s var(--ow-ease); }
.mini-frame i { display: block; height: 14px; background: #F1F4F2 radial-gradient(circle, #FF6159 2.5px, transparent 3px) 8px 50% / 10px 10px no-repeat,
  radial-gradient(circle, #FFBF2F 2.5px, transparent 3px) 18px 50% / 10px 10px no-repeat, radial-gradient(circle, #2ACB42 2.5px, transparent 3px) 28px 50% / 10px 10px no-repeat; border-bottom: 1px solid var(--ow-rule); }
.ow .mini .mini-frame img { width: 100%; height: auto; aspect-ratio: auto; display: block; margin: 0; border: 0; border-radius: 0; background: #fff; }
.ow .mini:hover .mini-frame { transform: translateY(-5px); }
.mini-tile { align-self: center; width: 100%; height: 72%; display: grid; place-items: center; padding: 14px; margin-bottom: 16px; border-radius: 12px; text-align: center;
  background: #fff; border: 1px solid var(--ow-tint-line); box-shadow: 0 14px 28px -20px rgba(5, 60, 36, .4); }
.mini-tile b { font-size: 19px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--ow-ink); }
.mini-tile b::before { content: ""; display: block; width: 28px; height: 3px; margin: 0 auto 10px; border-radius: 3px; background: var(--ow-green); }

.ow .mini-body { padding: 14px 8px 6px; gap: 6px; }
.ow .mini h3 { font-size: 16px; font-weight: 700; }
.mini-foot { margin-top: auto !important; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--ow-rule); }
.mini-reg { font-size: 12.5px; color: var(--ow-ink-3); }
.mini-go { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ow-ink); white-space: nowrap; }
.mini-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #EEF3F0; color: var(--ow-ink); transition: background-color .2s, color .2s; }
.mini-arrow .ow-ico { width: 13px; height: 13px; }
.ow .mini:hover .mini-arrow { background: var(--ow-green); color: #fff; }
@media (max-width: 760px) {
  .ow .mini { padding: 6px; border-radius: 18px; }
  .ow .mini-hit { flex-direction: row; align-items: center; gap: 4px; }
  .mini-stage { flex: none; width: 128px; aspect-ratio: 1 / 1; padding: 12px 8px 0; border-radius: 12px; }
  .mini-frame i { height: 10px; background-size: 8px 8px; }

  .mini-tile { height: 70%; margin-bottom: 10px; padding: 8px; }
  .mini-tile b { font-size: 13px; }
  .mini-tile b::before { width: 20px; margin-bottom: 6px; }
  .ow .mini-body { padding: 4px 8px; }
  .ow .mini h3 { font-size: 15px; }
  .mini-go { font-size: 12.5px; }
  .mini-arrow { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ow .mini, .mini-frame, .mini-arrow { transition: none; } .ow .mini:hover, .ow .mini:hover .mini-frame { transform: none; } }

/* ───────────── Closing band: a centred dark card ───────────── */
.ow .ow-end { padding: 8px 0 88px; background: var(--ow-paper); color: var(--ow-ink); }
.ow-end-card { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 14px; padding: 64px 32px; border-radius: 32px; text-align: center; color: #fff;
  background: radial-gradient(50% 90% at 50% 120%, rgba(0, 178, 107, .55), transparent 70%), radial-gradient(40% 60% at 0% 0%, rgba(0, 178, 107, .18), transparent 70%), #050806; border: 1px solid rgba(0, 178, 107, .3); }
.ow-end-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 80%); mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 80%); }
.ow-end-card > * { position: relative; }
.ow .ow-end-card h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0; color: #fff; }
.ow .ow-end-card > p:not(.ow-end-mail) { max-width: 560px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.ow .ow-end-acts { justify-content: center; margin-top: 10px; gap: 12px; }
.ow .ow-end-card .btn-primary { min-height: 52px; padding: 12px 24px; font-size: 16px; box-shadow: 0 12px 28px -10px rgba(0, 178, 107, .8); }
.ow .ow-end-card .btn-primary .ow-ico { transition: transform .15s var(--ow-ease); }
.ow .ow-end-card .btn-primary:hover .ow-ico { transform: translateX(3px); }
.ow .ow-end-card .btn-wa { min-height: 52px; padding: 12px 20px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); color: #fff; }
.ow .ow-end-card .btn-wa:hover { border-color: var(--ow-green); background: rgba(0, 178, 107, .12); }
.ow-end-mail { margin-top: 4px !important; font-size: 14px; color: rgba(255, 255, 255, .6); }
.ow-end-mail a { color: #6EE7B7 !important; font-weight: 500; text-decoration: underline !important; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .ow .ow-end { padding-bottom: 56px; }
  .ow-end-card { padding: 44px 20px; border-radius: 24px; }
  .ow .ow-end-card > p:not(.ow-end-mail) { font-size: 15.5px; }
  .ow .ow-end-acts { width: 100%; }
  .ow .ow-end-card .btn-primary, .ow .ow-end-card .btn-wa { flex: 1 1 100%; justify-content: center; }
}

/* ───────────── Project summary pop-up ───────────── */
.ow .proj { width: min(620px, calc(100vw - 32px)); border-radius: 24px; scrollbar-width: thin; }
.ow .proj .sheet-x { top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .95) !important; box-shadow: 0 4px 12px rgba(5, 30, 18, .15); }
/* The whole screenshot shows, at its true proportions; the stage grows to fit it */
.pj-stage { position: relative; display: grid; place-items: center; padding: 28px 32px; overflow: hidden;
  background: radial-gradient(70% 80% at 50% 110%, rgba(0, 178, 107, .3), transparent 70%), linear-gradient(160deg, #E6F5ED, #F4F9F6); }
.ow .proj .pj-stage .mini-frame { align-self: center; border-radius: 12px; border-bottom: 1px solid var(--ow-rule); box-shadow: 0 18px 40px -20px rgba(5, 60, 36, .45); }
.ow .proj .pj-stage .mini-frame i { height: 18px; background-size: 12px 12px; }
.ow .proj .pj-stage img { aspect-ratio: auto; height: auto; object-fit: initial; }
.ow .proj .pj-stage .mini-tile { height: 160px; margin: 0; align-self: center; }
.ow .proj .pj-stage .mini-tile b { font-size: 26px; }
.ow .proj-body { padding: 22px 26px 24px; display: grid; gap: 14px; }
.ow .proj-body h2 { margin-top: -4px; font-size: 26px; letter-spacing: -.02em; }
.pj-lead { font-size: 17px; line-height: 1.5; color: var(--ow-ink); }
.pj-about { font-size: 14.5px; line-height: 1.6; color: var(--ow-ink-2); }
.pj-kv { margin-top: 2px; }
.pj-live { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--ow-gtext) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.pj-live .ow-ico--ext { color: var(--ow-gtext); width: 14px; height: 14px; }
.ow .proj-cta { margin-top: 4px; padding: 16px 18px; border: 0; border-radius: 16px; background: var(--ow-tint); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ow .proj-cta p { flex: 1 1 160px; font-size: 15px; font-weight: 600; color: var(--ow-ink); }
.pj-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ow .proj-cta .btn-wa img, .ow .proj .btn-wa img { width: 18px !important; height: 18px !important; aspect-ratio: auto !important; flex: none; }
.ow .proj-nav { padding: 12px 18px; }
.ow .proj-nav span { font-weight: 500; }
@media (max-width: 760px) {
  .pj-stage { padding: 20px 16px; }
  .ow .proj .pj-stage .mini-tile { height: 120px; }
  .ow .proj-body { padding: 18px 18px 20px; }
  .ow .proj-body h2 { font-size: 22px; }
  .pj-lead { font-size: 15.5px; }
  .ow .proj-cta p { flex-basis: 100%; }
  .pj-acts { width: 100%; }
  .pj-acts .btn-primary { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding: 12px 14px; }
  .pj-acts .btn-wa { flex: 0 1 auto; justify-content: center; padding: 12px 14px; }
}

/* QA fixes */
/* Card text may shrink below its longest word, so long words ("air-conditioning")
   wrap instead of pushing the text past the card's edge on narrow phones. */
.ow .mini-body { min-width: 0; }
.ow .mini-built, .ow .mini h3 { overflow-wrap: anywhere; }
/* The closing band's email link: a comfortable tap target */
.ow-end-mail a { display: inline-block; padding: 8px 2px; }
/* Phones: one layout only (list); the view toggle is hidden */
@media (max-width: 760px) { .ow-view { display: none !important; } }

/* Phones: the project summary is a bottom sheet (full width, handle, slides up, drag down to close) */
.proj-handle { display: none; }
@media (max-width: 760px) {
  .ow .proj { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-height: 90vh; border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .25); overscroll-behavior: contain; }
  .proj-handle { display: block; position: sticky; top: 0; z-index: 3; height: 22px; margin-bottom: -22px; cursor: grab; touch-action: none;
    background: linear-gradient(#D5DBD8, #D5DBD8) center 9px / 40px 4px no-repeat; }
  .ow .proj .pj-stage { padding-top: 30px; }
  .ow .proj .sheet-x { position: absolute; top: 14px; right: 12px; }
  .ow .proj-nav { position: sticky; bottom: 0; z-index: 2; }
}

/* ───────────── Sheet motion: slide fully in and out, backdrop fades ─────────────
   our-work.js unhides the element, then adds .is-open on the next frame (and
   removes it before hiding again), so both opening and closing animate. */
.ow .sheet-scrim { opacity: 0; transition: opacity .32s ease; }
.ow .sheet-scrim.is-open { opacity: 1; }
.ow .sheet { transform: translateY(100%); transition: transform .42s cubic-bezier(.32, .72, 0, 1); will-change: transform; }
.ow .sheet.is-open { transform: translateY(0); }
/* Desktop and tablet: the project pop-up fades and settles into place */
.ow .proj { opacity: 0; transform: translate(-50%, -47%) scale(.97); transition: opacity .26s ease, transform .34s cubic-bezier(.32, .72, 0, 1); }
.ow .proj.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 760px) {
  .ow .proj { opacity: 1; transform: translateY(100%); transition: transform .42s cubic-bezier(.32, .72, 0, 1); will-change: transform; }
  .ow .proj.is-open { transform: translateY(0); }
}
/* While a finger drags the sheet, it follows the finger with no easing */
.ow .sheet.is-dragging, .ow .proj.is-dragging { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ow .sheet, .ow .proj, .ow .sheet-scrim { transition: none !important; }
}

/* ───────────── Phones: "More of our work" rows ───────────── */
.mini-ind { display: none; }
@media (max-width: 760px) {
  .mini-grid { gap: 12px; }
  .ow .mini { padding: 10px; border-radius: 18px; }
  .ow .mini:hover { transform: none; }
  .ow .mini-hit { flex-direction: row; align-items: center; gap: 14px; }
  /* The thumbnail is the screenshot itself, landscape, filling a rounded frame */
  .ow .mini-stage { flex: none; width: 132px; aspect-ratio: 16 / 10; padding: 0; border-radius: 12px; background: #EEF3F0; border: 1px solid var(--ow-rule); display: block; }
  .ow .mini-frame { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; transform: none !important; }
  .ow .mini-frame i { display: none; }
  .ow .mini .mini-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

  .ow .mini-tile { width: 100%; height: 100%; margin: 0; padding: 8px; border: 0; border-radius: 0; box-shadow: none;
    background: radial-gradient(80% 90% at 50% 110%, rgba(0, 178, 107, .3), transparent 70%), linear-gradient(160deg, #E6F5ED, #F4F9F6); }
  .ow .mini-tile b { font-size: 13px; }
  .ow .mini-tile b::before { width: 18px; margin-bottom: 5px; }
  .ow .mini-body { padding: 0; gap: 3px; align-self: stretch; justify-content: center; }
  .mini-ind { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ow-gtext);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ow .mini h3 { font-size: 15.5px; line-height: 1.25; }
  .ow .mini-built { font-size: 13px; line-height: 1.4; -webkit-line-clamp: 2; }
  .ow .mini-foot { margin-top: 4px !important; padding-top: 6px; border-top: 0; }
  .mini-go { font-size: 0; gap: 0; }
  .mini-go .mini-arrow { font-size: 13px; width: 28px; height: 28px; background: #EEF3F0; }
  .ow .mini-hit:active .mini-arrow { background: var(--ow-green); color: #fff; }
}
@media (max-width: 374px) { .ow .mini-stage { width: 112px; } }

/* Dropdown options inside "More" (Platform, Client region): checkbox and text
   on one line, like Industry and Integration (the panel's label rule stacked them). */
.ow .ow-more-panel .ow-ms-opt { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; color: var(--ow-ink); }

/* Dropdown buttons keep one width whether they read "All", "Any" or "2 selected" */
.ow .ow-controls .ow-ms-btn { width: 196px; max-width: none; }
.ow .ow-controls .ow-ms[data-ms="integration"] .ow-ms-btn { width: 210px; }
.ow .ow-more-panel .ow-ms-btn { width: 200px; max-width: none; }
.ow .ow-more-panel .ow-ms[data-ms="region"] .ow-ms-btn { width: 214px; }

/* Status line: the consumer-brands shortcut and the active-filter tags share one row */
.ow .ow-status { flex-wrap: wrap; gap: 8px 10px; }
.ow .ow-status .ow-sub { flex: none; gap: 6px; font-size: 13px; }
.ow .ow-status .ow-sub .chip-btn { min-height: 32px; padding: 4px 12px !important; font-size: 13px; }
.ow .ow-status .ow-sub:not([hidden]) + .ow-active:not([hidden]) { padding-left: 10px; border-left: 1px solid var(--ow-rule); }
.ow .tok { max-width: 260px; }
.ow .tok > :not(.ow-ico):not(span) , .ow .tok { overflow: hidden; text-overflow: ellipsis; }

/* Industry tag lives inside the card (label above the name), not over the image */

.ow .mini-ind { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ow-gtext);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 761px) { .ow .mini-stage { padding-top: 18px; } }

/* Project popup: the panel itself never scrolls; only the content between the × and the Prev/Next bar does */
.ow .proj { display: flex; flex-direction: column; overflow: hidden; }
.ow .proj > #projBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ow .proj > .proj-nav, .ow .proj > .proj-handle { flex: none; }
/* The popup is anchored at a fixed top edge, not centred, so moving to a shorter or
   taller project never shifts the box (or its ×). Phones: the sheet is a fixed height. */
@media (min-width: 761px) {
  .ow .proj { top: 24px; max-height: calc(100vh - 48px); transform: translate(-50%, 16px) scale(.97); }
  .ow .proj.is-open { transform: translate(-50%, 0) scale(1); }
}
@media (max-width: 760px) {
  .ow .proj { height: 90vh; height: 90dvh; max-height: 90dvh; }
}

/* Phones: the CTA band's buttons stack, full width */
@media (max-width: 760px) {
  .ow .ow-cta-acts { flex-direction: column; align-items: stretch; }
  .ow .ow-cta-acts .btn-primary, .ow .ow-cta-acts .btn-wa { flex: none; width: 100%; justify-content: center; }
}

/* "More of our work": the full description (never cut mid-sentence), then the result when we have one */
.ow .mini-built { display: block; -webkit-line-clamp: unset; overflow: visible; }
.ow .mini-res { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--ow-gtext); }
.ow .mini-res::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ow-green) url("../img/our-work/icons/tick.svg") center / 10px no-repeat; }
/* Provis's own products */
.ow .mini-own { color: var(--ow-ink); }

@media (max-width: 760px) {
  /* Reviews: one slim row (logo + score), so the first screen reaches the projects */
  .ow-reviews { padding: 0; background: none; border: 0; box-shadow: none; }
  .ow-reviews-h { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ow-rate { display: flex; flex-wrap: wrap; gap: 8px; }
  .ow-rate a { flex-direction: row; align-items: center; gap: 7px; height: auto; padding: 6px 12px 6px 6px; border-radius: 999px; }
  .ow-rate img { width: 24px; height: 24px; }
  .ow .rt-top b { font-size: 14px; }
  .ow-rate .stars, .ow-rate .rt-src { display: none; }

  /* Case studies: a big screenshot, the title, one result and the button; the rest sits behind "Details" */
  .sc:not(.is-details) :is(.sc-svc, .sc-built, .sc-parts, .sc-quote, .sc-kv, .sc-ctx, .sc-eng, .sc-extra, .sc-live) { display: none !important; }
  .sc:not(.is-details):not(:has(.sc-metric)) .sc-built { display: block !important; }   /* no result: the summary takes its place */
  .sc.is-details .sc-live { order: 3; flex-basis: 100%; }
  .sc-body, .sc-flip .sc-body { gap: 10px; padding-top: 14px; }
  .sc { padding: 6px; }
  .sc-media { padding: 12px 8px; }
  .sc-name { font-size: 22px; }
  .sc-acts { gap: 10px; }
  .sc-go { flex: 1 1 auto; justify-content: center; }
  .sc-more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px !important; border-radius: 12px;
    border: 1px solid var(--ow-rule) !important; background: var(--ow-card) !important; font-size: 14.5px; font-weight: 500; color: var(--ow-ink); }
  .sc-more::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; }
  .sc.is-details .sc-more::after { margin-top: 3px; transform: rotate(-135deg); }
  .sc-metric { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; }
  .sc-metric b { font-size: 26px; }
  .sc-metric span { padding-left: 12px; border-left: 1px solid var(--ow-tint-line); font-size: 13px; }
}

/* Shorter hero so the first case study is in view on the first screen (desktop and tablet) */
@media (min-width: 761px) {
  .ow-head { padding: calc(var(--ow-header) + 28px) 0 84px; }
  .ow-head h1 { font-size: clamp(44px, 4.6vw, 64px); margin-bottom: 12px; }
  .ow-lede { font-size: 17px; line-height: 1.6; }
  .ow-reviews { padding: 12px; border-radius: 18px; }
  .ow-reviews-h { margin: 0 4px 8px !important; font-size: 11px; }
  .ow-rate { gap: 6px; }
  .ow-rate a { gap: 12px; padding: 8px 12px; border-radius: 12px; }
  .ow-rate img { width: 32px; height: 32px; }
  .ow .rt { gap: 0; }
  .ow .rt-top b { font-size: 16px; }
  .ow .rt-src { font-size: 12.5px; }
  .ow-list { padding-top: 28px; }
  .ow-hint { margin-bottom: 14px !important; }
  .ow .sec-head { margin-bottom: 16px; }
  .ow .sec-head h2 { font-size: 26px; }
}
/* Tablet: one column, the three reviews as tiles side by side */
@media (min-width: 761px) and (max-width: 1023px) {
  .ow-head-in { grid-template-columns: 1fr; gap: 20px; }
  .ow-rate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ow-rate a { height: 100%; }
  .ow-rate .ow-ico--ext { display: none; }
  .ow .rt-top { flex-wrap: wrap; gap: 2px 8px; }
}
.ow .ow-more-panel .ow-ms[data-ms="integration"] .ow-ms-btn { width: 210px; }

/* Details toggle is a phone-only control */
@media (min-width: 761px) { .sc-more { display: none !important; } }
/* Detail labels (Industry, Built with…): darker and larger so they read clearly */
.ow .sc-kv dt { font-size: 11.5px; font-weight: 700; color: var(--ow-ink-2); }

/* Phones (this page): the cookie notice is a slim strip along the bottom edge */
@media (max-width: 760px) {
  body .js-cookie-consent.cookie-consent { left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none; width: 100%; max-width: none;
    flex-wrap: nowrap; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) 14px !important; border-radius: 14px 14px 0 0; animation-name: owCookieUp; }
  body .js-cookie-consent.cookie-consent .cookie-consent__message { flex: 1 1 auto; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .85) !important; }
  body .js-cookie-consent.cookie-consent .cookie-consent__agree,
  body .js-cookie-consent.cookie-consent .cookie-consent__reject { flex: none; margin: 0; padding: 0 12px !important; min-height: 36px; font-size: 13px; }
  @keyframes owCookieUp { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Phones: arrow buttons are at least 44px, so they are easy to tap */
@media (max-width: 760px) {
  .ow .mini-arrow { width: 44px; height: 44px; }
  .ow .proj-nav button, .ow .sheet-x, .ow .proj .sheet-x { min-height: 44px; min-width: 44px; }
  .ow .proj .sheet-x { width: 44px; height: 44px; }
}

/* `hidden` always wins on this page. Cards beyond "Show more" (or outside the
   filters) are in the HTML with `hidden`, and many of them set display: grid/flex,
   which would otherwise beat the browser's [hidden] rule. Tailwind's base styles
   happen to do the same, but this page must not depend on that. */
.ow [hidden] { display: none !important; }