/* components part 5 of 9 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

.filters button{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);background:transparent;border:1.5px solid var(--hair);padding:10px 20px;border-radius:999px;cursor:pointer;transition:.22s}
.filters button:hover,.filters button:focus{background:var(--wash-lt)}
.filters button.on:focus{background:var(--ink);color:#fff}
.filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters.country button.on{background:transparent;color:var(--ink);border-color:var(--ink);border-width:2px}
.pf-full{padding-inline:0;position:relative;width:var(--vw);max-width:none;margin-left:calc(50% - var(--vw)/2)}
.masonry{display:flex;gap:7px;align-items:flex-start}
.masonry .mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px}
/* before JS runs, and if JS fails, it still reads as a sane single column */
.masonry:not(.cols) .card{width:100%}
/* 2-up at 0 side padding still reads far bigger than the old inset single column,
   and halves the vertical scroll the client complained about. */

.card{break-inside:avoid;margin-bottom:7px;display:block;overflow:hidden;position:relative;border-radius:0}
.card figure{overflow:hidden;background:var(--grey);position:relative}
/* Lightbox — the 2-column mobile gallery makes each tile small, so a tap opens the
   full render. Enabled at every width; on desktop it doubles as a closer look. */
/* ---------------------------------------------------------- ANIMATED STILLS
   A still that quietly becomes a loop. The plan is for many of these: the closing CTA,
   hero bands, and eventually a large share of the portfolio wall. So it is a component,
   not a one-off.

   Contract: put data-motion="<mp4 url>" on any element that already contains an <img>.
   The image ships as normal and is what everyone sees first; the script below adds a
   <video> over it only when the element is near the viewport AND the page has finished
   its important loading. On failure, on a slow connection, or under reduced motion, the
   still simply stays. */
[data-motion]{position:relative}
[data-motion] > .motion-v{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .7s ease;pointer-events:none;z-index:0}
/* .pagecta stacks: bg image z0, scrim ::after z1, copy z2. The loop replaces the
   image, so it takes the image's layer, not one above the scrim. */
.pagecta > .motion-v{z-index:0}
[data-motion] > .motion-v.on{opacity:1}
.lb{position:fixed;inset:0;z-index:200;background:rgba(20,19,16,.94);display:none;align-items:center;justify-content:center;padding:16px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:88vh;width:auto;height:auto;border-radius:4px;display:block}
/* SHARE. Top-left: the close button owns top-right, the counter owns top-centre, and
   the caption and the panorama bar both own the bottom. Copy link comes first because in
   this business that is the one that gets used -- the link goes into an email to a client
   -- and the rest are icons. Instagram is deliberately not here: there is no web share
   intent for it and a link cannot be posted to it from a browser, so the button would do
   nothing. On a phone the native share sheet covers Instagram and everything else the
   device has, and it is shown only where navigator.share actually exists. */
.lb-share{position:absolute;left:16px;top:14px;z-index:6;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap}
.lb-share button,.lb-share a{display:inline-flex;align-items:center;gap:7px;height:34px;
  padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:rgba(20,19,16,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:background .18s,border-color .18s,color .18s}
.lb-share a{padding:0;width:34px;justify-content:center}
.lb-share svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.lb-share button:hover,.lb-share a:hover,
.lb-share button:focus-visible,.lb-share a:focus-visible{
  background:rgba(20,19,16,.68);border-color:rgba(255,255,255,.5);color:#fff}
.lb-share button[hidden]{display:none}
.lb-share .ok{border-color:var(--accent);color:var(--accent)}@media(max-width:700px){.lb-share{left:12px;top:12px;gap:6px}
  .lb-share button span{display:none}
  .lb-share button{width:34px;padding:0;justify-content:center}}
.lb-cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:rgba(255,255,255,.82);font-size:13.5px;padding-inline:16px}
/* Step through the gallery without closing and re-opening. Same visual language as the
   panorama viewer's arrows so the lightbox has one grammar, and disabled rather than
   hidden at the ends so the control does not jump about. */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(255,255,255,.14);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s,opacity .18s;z-index:2}
.lb-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lb-nav:hover,.lb-nav:focus-visible{background:rgba(255,255,255,.26)}
.lb-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-nav[disabled]{opacity:.28;cursor:default}
.lb-prev{left:16px} .lb-next{right:16px}
.lb-count{position:absolute;left:50%;top:18px;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:12px;font-weight:700;letter-spacing:.09em;
  font-variant-numeric:tabular-nums}@media(max-width:700px){
  .lb-nav{width:40px;height:40px}
  .lb-prev{left:6px} .lb-next{right:6px}}
.lb-x{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center}
.lb button:hover,.lb button:focus{background:rgba(255,255,255,.26)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.card{cursor:zoom-in}
/* No forced tile shape. The card classes imposed a ratio unrelated to the image
   inside, so landscape renders dropped into a 3/4 'tall' tile lost most of the
   frame to a centre crop. Each card now takes the aspect of its own image, which
   is what makes this a real masonry rather than a grid of crops. */
/* Square aesthetic: no radius, and no zoom on hover — the caption/overlay hover
   stays, only the scale is gone. */
.card img{width:100%;height:auto;display:block}
.card .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px 18px;background:linear-gradient(0deg,rgba(20,19,16,.82),rgba(20,19,16,.12) 62%,transparent);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.card:hover .meta{opacity:1;transform:none}
.card .t{font-family:var(--disp);font-size:18px;font-weight:700;color:#fff;line-height:1.12;letter-spacing:-0.02em}
.card .loc{font-size:13.5px;color:rgba(255,255,255,.85);margin-top:5px;display:inline-flex;align-items:center;gap:6px}
/* soft clean-edge fade at the bottom of the grid */
.pf-fade{position:relative;height:0}
.pf-fade::before{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--white));pointer-events:none;z-index:3}
.pf-more{text-align:center;margin-top:30px}

/* STUDIO vs AI */
.vs{background:var(--warm);color:#cfcec9}
/* MASTER. Every section header on every page derives from this — an eyebrow, an
   h2 and its subtext, held to a readable measure instead of running the full
   width of the page. It used to be scoped to `.vs`, so it styled exactly one
   block on one page and nothing on any page built after it. Do not re-scope it,
   and do not write a per-page copy: change it here and every page follows. */
.head{max-width:820px;margin-bottom:clamp(38px,5vw,56px)}
.vs .eyebrow{color:var(--accent)}
.vs h2{color:#fff;font-size:clamp(31px,4vw,50px);font-weight:800;letter-spacing:-0.035em;margin-bottom:20px;line-height:1.03}
.head p{font-size:17px;line-height:1.65;margin-bottom:14px;color:var(--muted)}
.vs .head p{color:#a8a7a1}   /* the dark section needs a lighter subtext */
.vs-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px)}
.vs-card{border:1px solid rgba(255,255,255,.13);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.02)}
.vs-card.ai{background:rgba(199,154,60,.11);border-color:rgba(199,154,60,.45)}
.vs-card.ours{background:rgba(63,107,84,.14);border-color:rgba(63,107,84,.5)}
.vs-fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0f0d0b}
.vs-fig img{width:100%;height:100%;object-fit:cover}
.vs-fig .flag{position:absolute;left:14px;top:14px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(20,18,14,.6);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px}
.vs-card.ai .vs-fig .flag{background:rgba(155,120,42,.9)}
.vs-card.ours .vs-fig .flag{background:rgba(63,107,84,.9)}
.vs-body{padding:clamp(26px,3.2vw,40px)}
.vs-card .tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.vs-card.ai .tag{color:#D8B36A}
.vs-card.ours .tag{color:#7FB79A}
.vs-card h3{color:#fff;font-size:23px;font-weight:700;margin-bottom:16px;letter-spacing:-0.02em}
.vs-card ul{list-style:none}
.vs-card li{position:relative;padding-left:26px;margin-bottom:12px;color:#b7b6b0;font-size:15.5px;line-height:1.5}
.vs-card li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--faint)}
.vs-card.ai li::before{background:#D8B36A}
.vs-card.ours li::before{background:#7FB79A}@media(max-width:760px){.vs-cols{grid-template-columns:1fr}}

/* PRICING — drivers + gated guide */
.price-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(36px,5vw,64px);align-items:start}
.drivers{list-style:none}
.drivers li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--hair)}
.drivers li:last-child{border-bottom:1px solid var(--hair)}
.drivers .ic{width:44px;height:44px;border-radius:10px;background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--ink);border:1px solid var(--hair)}
.drivers .ic svg{width:22px;height:22px}
.drivers h4{font-size:17px;font-weight:700;letter-spacing:-0.01em;margin-bottom:4px}
.drivers p{font-size:15px;color:var(--muted);line-height:1.5}