/* ==========================================================================
   Arth - Our Work page (/our-work/).
   Cards + popup reuse Home's arth-home4-projects.css (same classes); this file lays out
   the navy page, the filters and the grid. Projects come from Dashboard > Projects
   via [arth_projects] (novamira-sandbox/arth-work.php).
   Desktop (>=1025px): 25% sticky sidebar, multi-select Category + Service, 3-up grid.
   Tablet + phone: Category pills, Service button -> bottom sheet, bar reappears on scroll up.
   ========================================================================== */

body.arth-sp--our-work { background: #021C42; }

/* tokens Home defines on .ar-work, needed by the shared card rules */
body.arth-sp .wk, body.arth-sp .sp-work {
  --navy: #021C42; --berry: #A6445D; --ochre: #D89B65;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans); --ed-serif: var(--sans); --mono: var(--sans);
  --ease: cubic-bezier(.22, .8, .2, 1);
  --wk-line: rgba(255, 255, 255, .14);
}

/* ------------------------------------------------------------------ section */
body.arth-sp .e-con.sp-work {
  position: relative; isolation: isolate; display: block !important; color: #fff; background: #021C42;
  padding: calc(72px + clamp(40px, 6vw, 88px)) var(--sp-gutter) var(--sp-pad) !important;
}
/* printed-stock grain, as on Home */
body.arth-sp .e-con.sp-work::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.arth-sp .sp-work > * { max-width: var(--sp-max, 1440px); margin-inline: auto; }
body.arth-sp .sp-work a { color: inherit; text-decoration: none; }

/* head: wordmark left, one line of intro right */
body.arth-sp .e-con.wk-head { display: flex !important; flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important;
  gap: 32px; width: 100%; padding-bottom: clamp(28px, 3.4vw, 48px) !important; margin-bottom: clamp(28px, 3.4vw, 48px); border-bottom: 1px solid var(--wk-line); }
body.arth-sp .wk-word { width: clamp(260px, 30vw, 520px) !important; max-width: 80vw; }
body.arth-sp .wk-word img { display: block; width: 100%; height: auto; }
body.arth-sp .wk-intro { width: auto !important; max-width: 36ch; padding-bottom: .4em; font: 400 clamp(.9rem, 1vw, 1rem)/1.6 var(--sans); color: rgba(255, 255, 255, .72); text-align: right; }
body.arth-sp .wk-sc, body.arth-sp .wk-sc .elementor-shortcode { width: 100%; }
body.arth-sp .wk :focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

/* -------------------------------------------------------- desktop: sidebar */
body.arth-sp .wk-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; }
body.arth-sp .wk-side { position: sticky; top: calc(var(--wk-top, 0px) + 24px); transition: top .45s var(--ease); }
body.arth-sp .wk-side-in { max-height: calc(100vh - var(--wk-top, 0px) - 48px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; padding-right: 8px; }
body.arth-sp .wk-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--wk-line); }
body.arth-sp .wk-side-title { margin: 0; font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
body.arth-sp .wk-group { padding: 20px 0 22px; border-bottom: 1px solid var(--wk-line); }
body.arth-sp .wk-group-label { margin: 0 0 12px; font: 600 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); }
body.arth-sp .wk-opts { display: flex; flex-direction: column; gap: 2px; }

/* one option = a checkbox row with its project count */
body.arth-sp .wk-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; border: 0; border-radius: 0; background: none; cursor: pointer; text-align: left;
  font: 500 .86rem/1.3 var(--sans); letter-spacing: .01em; text-transform: none; color: rgba(255, 255, 255, .86); transition: color .25s var(--ease), opacity .25s; }
body.arth-sp .wk-opt::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .5); border-radius: 2px;
  background: transparent center / 10px no-repeat; transition: background-color .2s, border-color .2s; }
body.arth-sp .wk-opt:hover, body.arth-sp .wk-opt:focus-visible { color: #fff; background: none; }
body.arth-sp .wk-opt:hover::before { border-color: #fff; }
body.arth-sp .wk-opt.is-active { color: #fff; }
body.arth-sp .wk-opt.is-active::before { background-color: var(--ochre); border-color: var(--ochre);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.6' fill='none' stroke='%23021C42' stroke-width='1.6'/%3E%3C/svg%3E"); }
/* "All" is a round radio: it clears the group */
body.arth-sp .wk-opt--all::before { border-radius: 50%; }
body.arth-sp .wk-opt--all.is-active::before { background-image: none; box-shadow: inset 0 0 0 3px #021C42; }
body.arth-sp .wk-opt-t { flex: 1 1 auto; min-width: 0; }
body.arth-sp .wk-opt-n { flex: 0 0 auto; font: 500 .7rem/1 var(--sans); color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
body.arth-sp .wk-opt.is-sub { padding-left: 26px; font-size: .8rem; color: rgba(255, 255, 255, .7); }
body.arth-sp .wk-opt.is-sub.is-active, body.arth-sp .wk-opt.is-sub:hover { color: #fff; }
/* an option that would show nothing with the other filters */
body.arth-sp .wk-opt.is-none:not(.is-active) { opacity: .35; }

body.arth-sp .wk-clear { padding: 0 0 3px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); border-radius: 0; background: none; cursor: pointer;
  font: 500 .62rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
body.arth-sp .wk-clear:hover { color: var(--ochre); border-color: var(--ochre); background: none; }
body.arth-sp .wk [hidden] { display: none !important; }

/* phone / tablet only bits */
body.arth-sp .wk-mbar, body.arth-sp .wk-sheet-head .wk-sheet-x, body.arth-sp .wk-sheet-foot, body.arth-sp .wk-scrim { display: none; }
body.arth-sp .wk-sheet-head { display: block; }

/* --------------------------------------------------------------------- grid */
body.arth-sp .wk-count { margin: 0; padding: 0 0 18px; font: 500 .62rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
body.arth-sp .wk .ar-wk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 60px) clamp(16px, 1.7vw, 26px); }
/* open page: cards keep one landscape shape instead of Home's screen-fitted height */
body.arth-sp .wk .ar-tile-media { height: auto; aspect-ratio: 43 / 25; }
body.arth-sp .wk .ar-tile.is-out { display: none; }
body.arth-sp .wk .ar-tile { animation: wk-in .5s var(--ease) both; }
@keyframes wk-in { from { opacity: 0; transform: translateY(10px); } }
body.arth-sp .wk .ar-tile-slide img { display: block; max-width: none; }
body.arth-sp .wk .ar-tile-name { margin-top: 14px; }
body.arth-sp .wk .ar-tile-name .elementor-heading-title { font-size: clamp(1.05rem, 1.25vw, 1.3rem); }

body.arth-sp .wk-empty { padding: 64px 0; text-align: center; font: 400 1rem/1.6 var(--sans); color: rgba(255, 255, 255, .8); }
body.arth-sp .wk-empty p { margin: 0 0 16px; }
body.arth-sp .wk-foot { display: flex; justify-content: center; padding-top: clamp(40px, 5vw, 64px); }
body.arth-sp .wk-more { padding: 1.1em 2em; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: none; color: #fff; cursor: pointer;
  font: 500 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background-color .3s, color .3s; }
body.arth-sp .wk-more:hover { background: #fff; color: #021C42; }

/* popup: Home's popup, minus the "More details" button (not output on this page) */
.ar-case-modal .ar-cs-link { display: none; }

/* ------------------------------------------------------------ closing band */
body.arth-sp .e-con.sp-cta--ivory { background: #F5F4EB; color: #021C42; }
body.arth-sp .sp-cta--ivory .sp-cta-title .elementor-heading-title { color: #021C42; }
body.arth-sp .sp-cta--ivory .sp-cta-text p { color: rgba(2, 28, 66, .74); }

/* ============================================================ tablet + phone */
@media (max-width: 1024px) {
  body.arth-sp .wk-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* the bar sits in the page; when the visitor scrolls back up it slides in under the header (JS: .is-peek) */
  body.arth-sp .wk-side { position: relative; top: auto; margin-inline: calc(var(--sp-gutter) * -1); min-height: var(--wk-bar-h, auto); }
  body.arth-sp .wk-side-in { max-height: none; overflow: visible; padding: 0 0 14px; background: #021C42; }
  body.arth-sp .wk-side.is-peek .wk-side-in { position: fixed; left: 0; right: 0; top: var(--wk-top, 0px); z-index: 30; padding: 12px 0; border-bottom: 1px solid var(--wk-line);
    background: rgba(2, 28, 66, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: wk-peek .35s var(--ease) both; }
  @keyframes wk-peek { from { transform: translateY(-100%); } }
  body.arth-sp .wk-side-head { display: none; }
  body.arth-sp .wk-group--genre { padding: 0; border: 0; }
  body.arth-sp .wk-group--genre .wk-group-label { display: none; }

  /* category: one row of pills (swipe), like Home */
  body.arth-sp .wk-group--genre .wk-opts { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-inline: var(--sp-gutter); }
  body.arth-sp .wk-group--genre .wk-opts::-webkit-scrollbar { display: none; }
  body.arth-sp .wk-group--genre .wk-opt { flex: 0 0 auto; width: auto; padding: .9em 1.3em; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
    font: 500 .64rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .82); white-space: nowrap; }
  body.arth-sp .wk-group--genre .wk-opt::before, body.arth-sp .wk-group--genre .wk-opt-n { display: none; }
  body.arth-sp .wk-group--genre .wk-opt.is-active { background: #fff; border-color: #fff; color: #021C42; }

  /* service: a button + the chosen services as removable chips */
  body.arth-sp .wk-mbar { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-inline: var(--sp-gutter); overflow-x: auto; scrollbar-width: none; }
  body.arth-sp .wk-mbar::-webkit-scrollbar { display: none; }
  /* a filled ochre button with a filter icon, so it reads as a separate control from the category pills */
  body.arth-sp .wk-mbar { margin-top: 14px; }
  body.arth-sp .wk-svc-open { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; padding: 1em 1.3em; border: 1px solid var(--ochre); border-radius: 999px; background: var(--ochre); cursor: pointer;
    font: 700 .66rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #021C42; }
  body.arth-sp .wk-svc-open::before { content: ""; width: 13px; height: 11px; flex: 0 0 auto; background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cg stroke='%23021C42' stroke-width='1.4' fill='none'%3E%3Cpath d='M0 2h13M0 5.5h13M0 9h13'/%3E%3C/g%3E%3Cg fill='%23D89B65' stroke='%23021C42' stroke-width='1.4'%3E%3Ccircle cx='4' cy='2' r='1.6'/%3E%3Ccircle cx='9' cy='5.5' r='1.6'/%3E%3Ccircle cx='5' cy='9' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
  body.arth-sp .wk-svc-open::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 1px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
  body.arth-sp .wk-svc-open:hover, body.arth-sp .wk-svc-open:focus { background: #E6B384; border-color: #E6B384; color: #021C42; }
  body.arth-sp .wk-svc-n { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #021C42; color: #fff; font: 700 .6rem/18px var(--sans); letter-spacing: 0; text-align: center; }
  body.arth-sp .wk-chips { display: flex; gap: 6px; }
  body.arth-sp .wk-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: .75em .9em .75em 1.1em; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); cursor: pointer;
    font: 500 .62rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; }
  body.arth-sp .wk-chip::after { content: "\2715"; font-size: .7rem; opacity: .7; }
  body.arth-sp .wk-chip:hover, body.arth-sp .wk-chip:focus { background: rgba(255, 255, 255, .2); color: #fff; }

  /* service sheet */
  body.arth-sp .wk-group--service { display: none; }
  body.wk-sheet-open { overflow: hidden; }
  body.wk-sheet-open.arth-sp .wk-scrim { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0, 8, 24, .55); }
  body.wk-sheet-open.arth-sp .wk-group--service { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 151; max-height: min(82vh, 640px);
    padding: 0; border: 0; border-radius: 16px 16px 0 0; background: #021C42; box-shadow: 0 -20px 60px rgba(0, 8, 24, .45); animation: wk-sheet .4s var(--ease) both; }
  @keyframes wk-sheet { from { transform: translateY(100%); } }
  body.arth-sp .wk-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--sp-gutter) 14px; border-bottom: 1px solid var(--wk-line); }
  body.arth-sp .wk-sheet-head .wk-group-label { margin: 0; }
  body.arth-sp .wk-sheet-head .wk-sheet-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: none; color: #fff; cursor: pointer; font: 400 .9rem/1 sans-serif; }
  body.arth-sp .wk-group--service .wk-opts { flex: 1 1 auto; overflow-y: auto; padding: 8px var(--sp-gutter); overscroll-behavior: contain; }
  body.arth-sp .wk-group--service .wk-opt { padding: 12px 0; font-size: .92rem; }
  body.arth-sp .wk-group--service .wk-opt.is-sub { padding-left: 26px; font-size: .86rem; }
  body.arth-sp .wk-sheet-foot { display: flex; gap: 10px; padding: 14px var(--sp-gutter) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--wk-line); }
  body.arth-sp .wk-sheet-foot button { flex: 1 1 0; padding: 1.15em 1em; border-radius: 999px; cursor: pointer; font: 600 .68rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
  body.arth-sp .wk-sheet-clear { border: 1px solid rgba(255, 255, 255, .5); background: none; color: #fff; }
  body.arth-sp .wk-sheet-done { flex-grow: 2 !important; border: 1px solid #fff; background: #fff; color: #021C42; }
  body.arth-sp .wk-sheet-clear:hover, body.arth-sp .wk-sheet-clear:focus { background: none; color: #fff; }
  body.arth-sp .wk-sheet-done:hover, body.arth-sp .wk-sheet-done:focus { background: var(--ochre); border-color: var(--ochre); color: #021C42; }

  body.arth-sp .wk-main { padding-top: 22px; }
  body.arth-sp .wk .ar-wk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 16px; }
}
@media (max-width: 767px) {
  body.arth-sp .e-con.sp-work { padding-top: calc(64px + 36px) !important; }
  body.arth-sp .e-con.wk-head { flex-direction: column !important; align-items: flex-start !important; gap: 14px; padding-bottom: 24px !important; margin-bottom: 22px; }
  body.arth-sp .wk-word { width: min(78vw, 360px) !important; }
  body.arth-sp .wk-intro { text-align: left; }
  /* two cards a row: swipe images, tap to open; thumbnails + "View details" hidden at this size */
  body.arth-sp .wk .ar-wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  body.arth-sp .wk .ar-tile-media { aspect-ratio: 4 / 5; }
  body.arth-sp .wk .ar-tile-thumbs { display: none; }
  body.arth-sp .wk .ar-tile-frame .ar-tile-cat { top: 6px; left: 6px; padding: 5px 7px 4px; font-size: .5rem; }
  body.arth-sp .wk .ar-tile-name { margin-top: 10px; }
  body.arth-sp .wk .ar-tile-name .elementor-heading-title { font-size: .92rem; }
  body.arth-sp .wk .ar-tile-scope { font-size: .72rem; }
  body.arth-sp .wk .ar-tile-dots { display: flex; gap: 4px; margin-top: 8px; }
}
body.arth-sp .wk .ar-tile-dots { display: none; }
body.arth-sp .wk .ar-tile-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background-color .3s, width .3s; }
body.arth-sp .wk .ar-tile-dots i.is-active { width: 12px; border-radius: 2px; background: var(--ochre); }
/* popup on phones: a floating card over the blurred page (not full screen, so it reads as a popup),
   one scrolling column - square image, thumbnails, then the text */
@media (max-width: 767px) {
  body.arth-sp--our-work .ar-case-modal { padding: max(20px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)); align-items: center;
    background: rgba(2, 18, 44, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  body.arth-sp--our-work .ar-case-panel { display: block; width: 100%; height: auto; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 8, 24, .6); -webkit-overflow-scrolling: touch; }
  body.arth-sp--our-work .ar-case-ctrl { position: sticky; top: 0; right: auto; z-index: 3; justify-content: flex-end; gap: 8px; padding: 12px 16px;
    background: rgba(2, 28, 66, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  body.arth-sp--our-work .ar-case-ctrl button { width: 40px; height: 40px; }
  body.arth-sp--our-work .ar-case-gallery { padding: 0 16px; }
  body.arth-sp--our-work .ar-case-track { flex: none; width: 100%; aspect-ratio: 1 / 1; }
  body.arth-sp--our-work .ar-case-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; margin-top: 10px; }
  body.arth-sp--our-work .ar-case-thumbs::-webkit-scrollbar { display: none; }
  body.arth-sp--our-work .ar-case-thumbs button { flex: 0 0 auto; width: 56px; height: 56px; }
  body.arth-sp--our-work .ar-case-info { display: flex; overflow: visible; padding: 26px 20px calc(40px + env(safe-area-inset-bottom)); }
  body.arth-sp--our-work .ar-case-panel .ar-cs-name { margin-top: 12px; font-size: 1.75rem; }
  body.arth-sp--our-work .ar-case-panel .ar-cs-sum { margin-top: 16px; font-size: .95rem; line-height: 1.6; }
  body.arth-sp--our-work .ar-case-panel .ar-cs-stats { gap: 10px; }
  body.arth-sp--our-work .ar-case-panel .ar-cs-stat strong { font-size: 1.25rem; white-space: nowrap; }
  body.arth-sp--our-work .ar-case-panel .ar-cs-stat span { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.arth-sp .wk .ar-tile,body.arth-sp .wk-side.is-peek .wk-side-in, body.wk-sheet-open.arth-sp .wk-group--service { animation: none; }
}

/* house rule: no italics anywhere */
body.arth-sp .wk em, body.arth-sp .wk i:not([class]), .ar-case-modal em, .ar-case-modal i:not([class]) { font-style: normal; }