/* WRAPS STUDIO polish (20 Oct 2026). Loaded after css/style.css; js/forms.js adds it if the page has no <link> to it.
   1. "What Do You Need?" on the quote form: bright text on every choice (well over 4.5:1 on the dark glass), and a
      ticked choice is a filled mint chip with a tick, not a thin outline.
   2. "The Work" (#finishes): the grid of work photos or designs (js/forms.js), its buttons and the large photo view.
   Logical sides only, so Urdu (right to left) mirrors by itself. */

/* ---- 1. the needs picker */
.needs .need { gap: 8px; padding-inline: 12px 16px; color: var(--ink, #f2f5fb); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); font-weight: 500; }
.needs .need::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); box-sizing: border-box; }
.needs .need:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .45); }
.needs .need:has(input:checked) { color: #04140c; background: var(--mint, #7CFFCB); border-color: var(--mint, #7CFFCB); font-weight: 600; }
.needs .need:has(input:checked)::before { border: 0; background: #04140c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237CFFCB' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px 13px no-repeat; }
.needs .need:has(input:focus-visible) { outline: 3px solid var(--mint, #7CFFCB); outline-offset: 3px; }
.needs > p.muted { color: #c9d0de; }
@media (forced-colors: active) {
  .needs .need:has(input:checked) { border: 2px solid Highlight; }
  .needs .need:has(input:checked)::before { forced-color-adjust: none; background-color: Highlight; }
}

/* ---- 2. The Work */
.work-h { margin: 0 0 12px; }
.work-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.work-grid .work-tile { display: block; width: 100%; border: 1px solid var(--edge, rgba(255, 255, 255, .16)); padding: 0; border-radius: var(--r-s, 14px); overflow: hidden; cursor: zoom-in; background: var(--bg-2, #11141c); }
.work-grid[data-work-kind="designs"] .work-tile { cursor: pointer; }
.work-grid .work-tile img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.work-grid .work-tile:focus-visible { outline: 3px solid var(--mint, #7CFFCB); outline-offset: 3px; }
.work-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 480px) { .work-acts .btn { width: 100%; } }

.work-lb { box-sizing: border-box; width: min(960px, 100vw - 24px); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 56px 12px 16px; border: 1px solid var(--edge, rgba(255, 255, 255, .16)); border-radius: var(--r, 22px); background: rgba(11, 13, 18, .97); color: var(--ink, #f2f5fb); overflow: auto; }
.work-lb::backdrop { background: rgba(5, 6, 10, .88); }
.work-lb figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
.work-lb img { max-width: 100%; max-height: 72vh; max-height: 72dvh; border-radius: 14px; object-fit: contain; }
.work-lb figcaption { color: var(--muted, #a9b2c6); text-align: center; }
.work-lb-btn { position: absolute; top: 6px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--edge, rgba(255, 255, 255, .16)); border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--ink, #f2f5fb); cursor: pointer; }
.work-lb-btn:hover { background: rgba(255, 255, 255, .16); }
.work-lb-btn:focus-visible { outline: 3px solid var(--mint, #7CFFCB); outline-offset: 2px; }
.work-lb-x { inset-inline-end: 6px; }
.work-lb-prev { inset-inline-start: 6px; }
.work-lb-next { inset-inline-start: 60px; }
[dir="rtl"] .work-lb-btn svg { transform: scaleX(-1); }
html:has(.work-lb[open]) { overflow: hidden; }

/* ---- 3. the daily ₹1 offer popup (js/offer-popup.js). Phones: a bottom sheet of at most about 35% of the screen,
   the page stays visible and is not dimmed (Google's rule against full-screen popups). Wider: a centred card. */
.wso { position: fixed; inset: 0; z-index: 980; display: grid; align-items: end; justify-items: center; }
.wso[hidden] { display: none !important; }
.wso-back { position: absolute; inset: 0; background: transparent; }
.wso-card { position: fixed; left: 0; right: 0; bottom: 0; box-sizing: border-box; width: 100%; max-height: 35vh; max-height: 35dvh; overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr; align-items: center; gap: 10px;
  padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
  background: rgba(17, 20, 28, .98); border: 1px solid var(--edge, rgba(255, 255, 255, .16)); border-bottom: 0; box-shadow: 0 -18px 50px -18px rgba(0, 0, 0, .85);
  color: var(--ink, #f2f5fb); font: 16px/1.4 var(--font, Inter, Arial, system-ui, sans-serif); }
.wso-card:focus { outline: none; }
.wso-card:focus-visible { outline: 3px solid var(--mint, #7CFFCB); outline-offset: -3px; }
.wso-copy { min-width: 0; padding-inline-end: 44px; }
.wso-tag { margin: 0 0 2px; color: var(--amber, #FFB547); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.wso-title { margin: 0; font: 800 clamp(18px, 5vw, 22px)/1.15 var(--display, Sora, Inter, sans-serif); letter-spacing: -.01em; }
.wso-line { display: none; margin: 8px 0 0; color: var(--muted, #a9b2c6); }
.wso-stickers { display: flex; gap: 6px; align-items: center; }
.wso-stickers .stk { --s: 34px; }
.wso-go { grid-column: 1 / -1; width: 100%; }
.wso-x { position: absolute; top: 6px; inset-inline-end: 6px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .08); color: var(--ink, #f2f5fb); cursor: pointer; }
.wso-x:hover { background: rgba(255, 255, 255, .16); }
.wso-x:focus-visible { outline: 3px solid var(--mint, #7CFFCB); outline-offset: 2px; }
.wso-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (max-height: 560px) { .wso-stickers { display: none; } }
@media (min-width: 720px) and (min-height: 561px) {
  .wso { align-items: center; padding: 24px; }
  .wso-back { background: rgba(5, 7, 11, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .wso-card { position: relative; left: auto; right: auto; bottom: auto; width: min(520px, 100%); max-height: calc(100vh - 48px); grid-template-columns: 1fr; gap: 16px; padding: 28px; border-radius: var(--r, 22px); border-bottom: 1px solid var(--edge, rgba(255, 255, 255, .16)); text-align: center; }
  .wso-copy { padding-inline: 32px; }
  .wso-title { font-size: clamp(26px, 3vw, 32px); }
  .wso-line { display: block; }
  .wso-stickers { justify-content: center; gap: 12px; }
  .wso-stickers .stk { --s: 64px; }
  .wso-go { justify-self: center; width: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .wso:not([hidden]) .wso-card { animation: wsoUp .32s cubic-bezier(.2, .8, .2, 1); }
  .wso:not([hidden]) .wso-back { animation: wspFade .2s ease-out; }
}
@keyframes wsoUp { from { opacity: 0; transform: translateY(24px); } }
@keyframes wspFade { from { opacity: 0; } }
@media (forced-colors: active) { .wso-card, .wso-x { border: 1px solid CanvasText; } }
/* the phone's bottom action bar (Call / WhatsApp / Quote / Directions) steps aside while the offer sheet is open, so
   "Claim the Offer" is never under it and the sheet stays at about a third of the screen (20 Oct 2026) */
html.wso-open .actionbar { visibility: hidden; pointer-events: none; }
/* html.rest (js/script.js: nobody touched the page for 8 s) pauses every animation; the sheet's slide-in must still
   finish, or it would stay part-way off the bottom of the screen */
.rest .wso .wso-card, .rest .wso .wso-back { animation-play-state: running !important; }