/* ==========================================================================
   The shared dialog used for both case files and capability modules.
   ========================================================================== */

/* ---------- modal ---------- */
.cs-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:max(4vw,20px); visibility:hidden; cursor:default; }
.cs-modal.open{ visibility:visible; }
.cs-modal button, .cs-modal a{ cursor:pointer; }
.cs-backdrop{ position:absolute; inset:0; background:rgba(var(--backdrop),.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity .55s var(--ease-out); }
.cs-modal.open .cs-backdrop{ opacity:1; }
.cs-dialog{ position:relative; z-index:1; width:min(1040px,94vw); max-height:90vh; overflow:auto; background:var(--elev); border:1px solid var(--line); display:grid; grid-template-columns:1.05fr 1fr; opacity:0; transform:translateY(28px) scale(.975); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.cs-modal.open .cs-dialog{ opacity:1; transform:none; }
.cs-img{ position:relative; overflow:hidden; min-height:300px; }
.cs-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.3) brightness(.72) contrast(1.05); }
[data-theme="light"] .cs-img img{ filter:grayscale(.15) brightness(.95); }
.cs-img .duo{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(var(--duo-rgb),.2), rgba(var(--duo-rgb),.85)); }
.cs-content{ padding:clamp(28px,3.4vw,52px); }
.cs-content .cs-idx{ font-size:var(--fs-sm); letter-spacing:.2em; color:var(--amber); text-transform:uppercase; }
.cs-content .cs-client{ margin-top:10px; font-size:var(--fs-sm); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.cs-content .cs-title{ margin-top:14px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.35rem,2.3vw,2rem); line-height:1.02; letter-spacing:-.02em; }
.cs-content .cs-desc{ margin-top:18px; font-size:var(--fs-base); line-height:1.85; color:var(--muted); }
.cs-content .p-results{ display:flex; flex-wrap:wrap; gap:22px 40px; margin-top:30px; }
.cs-content .p-results .rv{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.45rem,2.3vw,1.95rem); line-height:1.04; color:var(--accent); }
.cs-content .p-results .rl{ display:block; margin-top:8px; font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); max-width:16ch; }
.cs-content .p-quote{ margin-top:30px; font-family:var(--display); font-weight:500; font-size:clamp(1rem,1.8vw,1.35rem); line-height:1.4; color:var(--ink); }
.cs-content .p-quote cite{ display:block; margin-top:14px; font-family:var(--mono); font-style:normal; font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.cs-content .cap-incs-h{ margin-top:32px; font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--amber); }
.cs-content .cap-incs{ list-style:none; margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:13px 26px; }
.cs-content .cap-incs li{ position:relative; padding-left:22px; font-size:var(--fs-md); line-height:1.55; color:var(--muted); }
.cs-content .cap-incs li::before{ content:"\2197"; position:absolute; left:0; top:1px; color:var(--accent); font-size:var(--fs-sm); }
.cs-content .cap-ideal{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); font-size:var(--fs-base); line-height:1.65; color:var(--ink); }
.cs-content .cap-ideal span{ display:block; margin-bottom:7px; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
@media (max-width:600px){ .cs-content .cap-incs{ grid-template-columns:1fr; } }
.cs-content .cs-cta{ display:inline-flex; align-items:center; gap:10px; margin-top:34px; padding:15px 26px; background:var(--accent); color:var(--on-accent); font-size:var(--fs-sm); letter-spacing:.16em; text-transform:uppercase; transition:transform .5s var(--ease-out), filter .5s var(--ease-out); }
.cs-content .cs-cta:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.cs-close{ position:absolute; top:12px; right:16px; z-index:3; width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:28px; line-height:1; color:var(--ink); background:var(--elev); border:1px solid var(--line); transition:background .4s var(--ease-out), color .4s var(--ease-out), transform .4s var(--ease-out); }
.cs-close:hover{ background:var(--accent); color:var(--on-accent); transform:rotate(90deg); }
@media (max-width:760px){ .cs-dialog{ grid-template-columns:1fr; } .cs-img{ min-height:200px; max-height:34vh; } }

/* ==========================================================================
   The enquiry confirmation dialog (success-modal.js).
   Narrower and quieter than .cs-modal above: a receipt, not a content panel.
   ========================================================================== */

.ok-modal{ position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:max(4vw,20px); }
.ok-modal[hidden]{ display:none; }
.ok-modal button, .ok-modal a{ cursor:pointer; }
.ok-backdrop{ position:absolute; inset:0; background:rgba(var(--backdrop),.82); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); opacity:0; transition:opacity .42s var(--ease-out); }
.ok-modal.open .ok-backdrop{ opacity:1; }

.ok-dialog{
  position:relative; z-index:1; width:min(560px,94vw); max-height:88vh; overflow:auto;
  background:var(--elev); border:1px solid var(--line);
  padding:clamp(30px,4vw,48px);
  opacity:0; transform:translateY(24px) scale(.97);
  transition:opacity .42s var(--ease-out), transform .42s var(--ease-out);
}
.ok-modal.open .ok-dialog{ opacity:1; transform:none; }

.ok-close{ position:absolute; top:10px; right:12px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; color:var(--muted); background:none; border:1px solid transparent; transition:color .35s var(--ease-out), border-color .35s var(--ease-out); }
.ok-close:hover{ color:var(--ink); border-color:var(--line); }

/* The tick draws itself once. It is the only motion in the dialog, and it is
   what makes the panel read as a confirmation before a word is processed. */
.ok-mark{ width:52px; height:52px; color:var(--accent); }
.ok-mark svg{ width:100%; height:100%; display:block; }
.ok-ring{ stroke-dasharray:145; stroke-dashoffset:145; animation:ok-draw .62s var(--ease-out) .06s forwards; }
.ok-tick{ stroke-dasharray:34; stroke-dashoffset:34; animation:ok-draw .38s var(--ease-out) .5s forwards; }
@keyframes ok-draw{ to{ stroke-dashoffset:0; } }

.ok-sys{ margin-top:22px; font-size:var(--fs-2xs); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.ok-sys b{ color:var(--accent); font-weight:500; }
.ok-title{ margin-top:12px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.02; letter-spacing:-.02em; }
.ok-desc{ margin-top:16px; font-size:var(--fs-base); line-height:1.8; color:var(--muted); }

/* Same counter treatment as .next-list in contact.css, so the two lists read
   as the same component in two places rather than as two components. */
.ok-steps{ list-style:none; counter-reset:okstep; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); display:grid; gap:12px; }
.ok-steps li{ counter-increment:okstep; position:relative; padding-left:30px; font-size:var(--fs-md); line-height:1.6; color:var(--muted); }
.ok-steps li::before{ content:counter(okstep,decimal-leading-zero); position:absolute; left:0; top:.1em; font-size:var(--fs-2xs); letter-spacing:.1em; color:var(--accent); }

.ok-urgent{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.ok-urgent-k{ font-size:var(--fs-2xs); letter-spacing:.2em; text-transform:uppercase; color:var(--amber); }
.ok-lines{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 26px; }
.ok-lines a{ display:inline-flex; align-items:center; min-height:44px; font-size:var(--fs-md); color:var(--ink); border-bottom:1px solid transparent; transition:color .35s var(--ease-out), border-color .35s var(--ease-out); }
.ok-lines a:empty{ display:none; }
@media (hover:hover){ .ok-lines a:hover{ color:var(--accent); border-bottom-color:var(--accent); } }

.ok-done{
  margin-top:30px; width:100%; min-height:52px; padding:0 28px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent);
  font-size:var(--fs-sm); letter-spacing:.18em; text-transform:uppercase;
  transition:filter .4s var(--ease-out);
}
@media (hover:hover){ .ok-done:hover{ filter:brightness(1.08); } }

@media (prefers-reduced-motion:reduce){
  .ok-backdrop,.ok-dialog{ transition:none; }
  .ok-ring,.ok-tick{ animation:none; stroke-dashoffset:0; }
}