/* WeDominators — extras for faqs.html (generated) */

/* ————— case study: media blocks (drop-in image areas) ————— */
.shot{margin:2.2rem 0;border-radius:20px;overflow:hidden;position:relative}
.shot .art{aspect-ratio:16/9}
.shot.tall .art{aspect-ratio:4/3}
.shot.wide .art{aspect-ratio:21/9}
.shot figcaption{padding:.85rem 1.1rem;font-size:.78rem;color:var(--ink2);border-top:1px solid var(--line)}
/* empty image slots read as deliberate placeholders, labelled with the export size */
.ph{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:.55rem;
  pointer-events:none;text-align:center;padding:1rem;
  font:600 .62rem/1.4 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.ph svg{opacity:.5}
.shot .art,.break .art,.gallery .art,.compare .art{position:relative;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ink) 9%,transparent)}
.gallery{display:grid;gap:.85rem;margin:2.2rem 0}
.gallery.two{grid-template-columns:1fr 1fr}
.gallery.three{grid-template-columns:repeat(3,1fr)}
.gallery figure{border-radius:16px;overflow:hidden;position:relative}
.gallery .art{aspect-ratio:4/3}
.gallery figcaption{padding:.7rem .9rem;font-size:.74rem;color:var(--mute)}
.compare{position:relative;border-radius:20px;overflow:hidden;margin:2.2rem 0;aspect-ratio:16/9;
  touch-action:none;user-select:none;cursor:ew-resize;--x:50%}
.compare>.side{position:absolute;inset:0}
.compare>.side.after{clip-path:inset(0 0 0 var(--x))}
.compare .lbl{position:absolute;top:.75rem;z-index:4;padding:.32rem .65rem;border-radius:999px;
  font:600 .62rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);
  background:var(--glass-deep);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.compare .lbl.a{left:.75rem}
.compare .lbl.b{right:.75rem}
.compare .bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;z-index:5;background:var(--accent);pointer-events:none}
.compare .bar::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:38px;height:38px;
  border-radius:50%;background:var(--accent);box-shadow:0 10px 26px -10px color-mix(in oklab,var(--accent) 85%,transparent)}
.compare .bar svg{position:absolute;top:50%;left:50%;translate:-50% -50%;color:#fff}
.compare:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.break{position:relative;border-radius:24px;overflow:hidden;margin:clamp(2rem,4vw,3rem) 0}
.break .art{aspect-ratio:21/9}
.facts{display:grid;grid-template-columns:1fr}
.facts>div{display:grid;gap:.2rem;padding:.62rem 0;border-bottom:1px solid var(--line);min-width:0}
.facts>div:last-child{border-bottom:0;padding-bottom:0}
.facts>div:first-child{padding-top:0}
.facts dt{font:600 .63rem/1 var(--font-b);letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:0;min-width:0;color:var(--ink);font:500 .88rem/1.45 var(--font-b);overflow-wrap:anywhere}
@media (max-width:820px){.gallery.three{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gallery.two,.gallery.three{grid-template-columns:1fr}}
/* ————— device mockups with hover-scrolling screenshots ————— */
.mockset{position:relative;max-width:1020px;padding-right:clamp(0px,11%,150px);
  margin:clamp(2.6rem,5.5vw,4.2rem) auto clamp(3.4rem,6.5vw,5.2rem)}
.mock{position:relative}
.mock-scroll{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.mock-page{display:block;width:100%;transform:translateY(0);will-change:transform;
  transition:transform 8s cubic-bezier(.33,0,.3,1)}
.mock-page .art{display:block;width:100%}
.mock-tag{position:absolute;z-index:6;left:.6rem;top:.6rem;padding:.3rem .6rem;border-radius:999px;
  font:600 .58rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);
  background:var(--glass-deep);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .35s}
.mock:hover .mock-tag{opacity:0}
.mock-hint{position:absolute;z-index:6;left:50%;bottom:1.15rem;translate:-50% 0;padding:.42rem .85rem;border-radius:999px;
  display:inline-flex;align-items:center;gap:.45rem;
  font:600 .62rem/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
  background:var(--glass-deep);border:1px solid var(--line);pointer-events:none;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .35s,translate .35s}
.mock-hint svg{color:var(--accent);animation:hintBob 2.2s var(--ease-io) infinite}
@keyframes hintBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
.mock:hover .mock-hint,.mock:focus-within .mock-hint{opacity:0;translate:-50% 10px}
/* MacBook */
.mb{position:relative}
.mb-lid{position:relative;border-radius:17px;padding:10px 10px 12px;
  background:linear-gradient(160deg,color-mix(in oklab,var(--ink) 9%,var(--bg2)),var(--bg2));
  border:1px solid var(--line);box-shadow:var(--shadow),var(--glow)}
.mb-cam{position:absolute;top:4px;left:50%;translate:-50% 0;width:4px;height:4px;border-radius:50%;
  background:color-mix(in oklab,var(--ink) 32%,transparent)}
.mb-screen{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg)}
.mb-deck{position:relative;width:117%;margin-left:-8.5%;height:12px;border-radius:0 0 13px 13px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--ink) 14%,var(--bg2)),color-mix(in oklab,var(--ink) 27%,var(--bg2)));
  border:1px solid var(--line);border-top:0}
.mb-deck::after{content:"";position:absolute;left:50%;translate:-50% 0;top:0;width:82px;height:5px;
  border-radius:0 0 6px 6px;background:color-mix(in oklab,var(--ink) 30%,transparent)}
/* iPhone */
.ip{position:absolute;right:0;bottom:-1.8rem;z-index:4;width:clamp(128px,22%,228px)}
.ip-body{position:relative;aspect-ratio:9/19.3;padding:6px;border-radius:clamp(20px,3.6vw,34px);
  background:linear-gradient(160deg,color-mix(in oklab,var(--ink) 13%,var(--bg2)),var(--bg2));
  border:1px solid var(--line);box-shadow:var(--shadow),0 34px 64px -34px rgba(0,0,0,.65)}
.ip-screen{position:relative;height:100%;border-radius:clamp(15px,2.9vw,28px);overflow:hidden;
  background:var(--bg);border:1px solid var(--line)}
.ip-island{position:absolute;z-index:6;top:7px;left:50%;translate:-50% 0;width:34%;height:5.4%;min-height:11px;
  border-radius:999px;background:color-mix(in oklab,#000 72%,var(--bg2))}
.ip .mock-hint,.ip .mock-tag{display:none}
@media (max-width:820px){
  .mockset{padding-right:0;margin-bottom:clamp(2.4rem,5vw,3.4rem)}
  .ip{position:static;bottom:auto;width:min(236px,66%);margin:2rem auto 0}
}
/* ————— agency: people grid + milestone rail ————— */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.1rem)}
.team-card{border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.team-card .pic{position:relative;aspect-ratio:4/5;overflow:hidden}
.team-card .pic .art{position:absolute;inset:0;transition:transform 1s var(--ease);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ink) 9%,transparent)}
.team-card:hover .pic .art{transform:scale(1.06)}
.team-card .tb{flex:1;padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.2rem}
.team-card b{font:600 1rem/1.25 var(--font-b)}
.team-card em{font-style:normal;font:600 .76rem/1.3 var(--font-b);color:var(--accent)}
.team-card p{margin-top:.4rem;font-size:.82rem;color:var(--mute);line-height:1.5}
@media (max-width:980px){.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team{grid-template-columns:1fr}}
.tl{position:relative;max-width:50rem;margin-inline:auto;padding-left:.5rem}
.tl::before{content:"";position:absolute;left:5.9rem;top:.9rem;bottom:.9rem;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent)}
.tl-item{position:relative;display:grid;grid-template-columns:5rem 1fr;gap:1.9rem;padding:.95rem 0}
.tl-item::before{content:"";position:absolute;left:5.55rem;top:1.5rem;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:2px solid color-mix(in oklab,var(--accent) 55%,transparent);
  transition:background .35s,border-color .35s,box-shadow .35s}
.tl-item:hover::before{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 16%,transparent)}
.tl-item .yr{font:640 1.02rem/1.5 var(--font-d);letter-spacing:var(--tr-d4);color:var(--accent);
  font-variant-numeric:tabular-nums lining-nums;text-align:right}
.tl-item b{display:block;font:600 1.02rem/1.4 var(--font-b)}
.tl-item p{margin-top:.25rem;font-size:.9rem;color:var(--ink2)}
@media (max-width:640px){
  .tl{padding-left:0}
  .tl::before{left:.3rem}
  .tl-item{grid-template-columns:1fr;gap:.15rem;padding-left:1.9rem}
  .tl-item::before{left:0;top:1.35rem}
  .tl-item .yr{text-align:left}
}
/* ————— FAQ index: filter + search over the accordion ————— */
.faq-list>.faq-item{opacity:0;transform:translateY(10px)}
.faq-list.in>.faq-item{opacity:1;transform:none;
  transition:opacity .45s var(--ease) calc(var(--i,0)*.035s),transform .45s var(--ease) calc(var(--i,0)*.035s)}
.faq-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:52rem;margin:0 auto .9rem}
.faq-bar .cnt{font:500 .84rem/1 var(--font-b);color:var(--mute);font-variant-numeric:tabular-nums}
.faq-search{max-width:52rem;margin:0 auto 1.1rem}
.faq-empty{max-width:52rem;margin-inline:auto;padding:2.2rem 1.4rem;text-align:center;
  border-radius:18px;border:1px dashed var(--line);color:var(--mute);font-size:.92rem}