/* ═══════════════════════════════════════════════════════════════
   CLICKABILY · העמודים העצמאיים
   The three pages that are not a service and not the blog:
   /projects/, /about/ and /contact/. One stylesheet between them
   rather than three <style> blocks.

   Everything is inherited from the shell's inline CSS in
   header.php — no token, radius or hex is invented here.
   ═══════════════════════════════════════════════════════════════ */

/* ── a short head, for a page that is mostly its content ───── */
.phead{padding-block:clamp(7rem,13vh,9.5rem) clamp(1.4rem,3vh,2.2rem)}
.phead .s__in{position:relative;display:grid;justify-items:center;text-align:center}
.phead .s__in::before{content:"";position:absolute;z-index:-1;top:2%;left:50%;
  translate:-50% 0;width:min(52rem,94vw);aspect-ratio:2.3/1;
  background:radial-gradient(closest-side,rgba(0,234,173,.09),transparent 72%);
  filter:blur(34px)}
.phead__t{font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.06;letter-spacing:-.022em;
  margin:0 0 clamp(.9rem,2.2vh,1.4rem);text-wrap:balance;max-width:min(24ch,100%)}
.phead__t em{font-style:normal;color:var(--mint)}
.phead__x{margin:0 auto;color:var(--paper-2);max-width:min(56ch,100%);
  font-size:clamp(1rem,1.16vw,1.12rem);line-height:1.7;text-wrap:pretty}
.phead__x b{color:var(--paper);font-weight:700}

/* ═══════════════════════════════════════════════════════════════
   /projects/ · the archive
   ═══════════════════════════════════════════════════════════════ */

/* ── the filter ───────────────────────────────────────────────
   Toggle buttons, not links: everything is already on the page,
   so a filter that reloaded it would be slower and lose the
   reader's place. The count next to each one is the real number
   of projects behind it, so nobody clicks into an empty shelf. */
.pf{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
  margin-block:0 clamp(1.6rem,3.6vh,2.6rem)}
.pf__c{display:inline-flex;align-items:center;gap:.5rem;
  min-height:46px;padding:.5rem 1.05rem;border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  color:var(--paper-2);background:rgba(242,242,242,.05);
  border:1px solid rgba(242,242,242,.16);
  transition:color .28s var(--ease),background .28s var(--ease),
             border-color .28s var(--ease),box-shadow .28s var(--ease)}
.pf__c:hover{color:var(--paper);border-color:rgba(0,234,173,.42);
  background:rgba(0,234,173,.07)}
.pf__c i{font-style:normal;font-size:.8rem;font-weight:400;opacity:.7;
  font-variant-numeric:tabular-nums}
.pf__c[aria-pressed="true"]{background:var(--mint);color:var(--navy-900);
  border-color:var(--mint);box-shadow:0 0 26px -8px rgba(0,234,173,.7)}
.pf__c:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.pf__live{margin:0 0 clamp(1.2rem,2.6vh,1.8rem);text-align:center;
  font-family:var(--font-meta);font-size:.8rem;letter-spacing:.12em;
  color:rgba(242,242,242,.45)}

/* ── the grid ─────────────────────────────────────────────────
   Square cards throughout. The site screenshots are full-page
   grabs 4x taller than they are wide, so they are framed like a
   browser window and scroll inside it on hover — the same
   treatment the home page's wall gives them. Squares next to
   squares is what keeps 33 mixed items from reading as rubble. */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.8rem,1.5vw,1.3rem)}
.pcard{min-width:0}
.pcard[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .pcard.is-in{animation:pcIn .5s var(--ease) both;
    animation-delay:calc(var(--i,0) * 28ms)}
}
@keyframes pcIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
.pcard__l{display:block}
.pcard__win{position:relative;display:block;aspect-ratio:1;border-radius:14px;
  overflow:hidden;container-type:size;
  border:1px solid rgba(242,242,242,.13);background:#05163a;
  box-shadow:0 22px 50px -30px rgba(0,0,0,.95);
  transition:border-color .3s var(--ease),transform .35s var(--ease),
             box-shadow .35s var(--ease)}
.pcard__l:hover .pcard__win{border-color:rgba(0,234,173,.55);transform:translateY(-5px);
  box-shadow:0 26px 54px -28px rgba(0,234,173,.45)}
.pcard__win img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:top center;transition:transform .6s var(--ease)}
/* a full-page grab: keep its own height and walk it up the frame */
.pcard--site .pcard__win img{height:auto;object-fit:unset}
@media (hover:hover){
  .pcard--site .pcard__l:hover .pcard__win img{
    transform:translateY(calc(100cqh - 100%));transition:transform 5s linear}
}
/* the browser bar, on the ones that are a website */
.pcard__bar{position:absolute;inset-inline:0;top:0;height:22px;z-index:2;
  display:flex;align-items:center;gap:4px;padding-inline:8px;
  background:rgba(4,18,46,.92);border-bottom:1px solid rgba(242,242,242,.10)}
.pcard__bar i{width:5px;height:5px;border-radius:50%;background:rgba(242,242,242,.24)}
/* and the play badge on the ones that are footage */
.pcard__play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,234,173,.92);color:var(--navy-900);
  box-shadow:0 0 28px -4px rgba(0,234,173,.8);transition:scale .3s var(--ease)}
.pcard__l:hover .pcard__play{scale:1.12}
.pcard__c{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;padding:.75rem .15rem 0}
.pcard__t{display:inline-flex;align-items:center;gap:.35rem;min-width:0;
  font-weight:700;font-size:.98rem;line-height:1.3;
  transition:color .25s var(--ease)}
.pcard__t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard__l:hover .pcard__t{color:var(--mint)}
.pcard__out{flex:none;opacity:.5;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.pcard__l:hover .pcard__out{opacity:1;transform:translate(-2px,-2px)}
.pcard__k{flex:none;padding:.24rem .6rem;border-radius:var(--r-pill);
  border:1px solid rgba(0,234,173,.32);background:rgba(0,234,173,.07);
  color:var(--mint);font-family:var(--font-display);font-weight:700;
  font-size:.74rem;line-height:1.5;white-space:nowrap;
  transition:background .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease)}
.pcard__l:hover .pcard__k{background:var(--mint);color:var(--navy-900);
  border-color:var(--mint)}
.pempty{grid-column:1/-1;padding:clamp(2rem,5vh,3.4rem) 1rem;text-align:center;
  border:1px dashed rgba(0,234,173,.28);border-radius:var(--r-md);
  background:rgba(0,234,173,.03);color:var(--paper-2)}

/* ═══════════════════════════════════════════════════════════════
   /about/ · the studio
   ═══════════════════════════════════════════════════════════════ */
.astory{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,4.5vw,4rem);align-items:center}
.astory__c > * + *{margin-top:1.1em}
.astory__c p{margin:0;color:var(--paper-2);font-size:clamp(1rem,1.14vw,1.1rem);
  line-height:1.75}
.astory__c b{color:var(--paper);font-weight:700}
.astory__art{position:relative;justify-self:center;width:min(100%,26rem)}
.astory__art img{width:100%;height:auto;display:block;
  animation:propFloat 11s ease-in-out infinite;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.85))}
@media (prefers-reduced-motion:reduce){ .astory__art img{animation:none} }
.astory__art::before{content:"";position:absolute;inset:-8% -12%;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,234,173,.14),transparent 72%);
  filter:blur(34px)}

/* the values · a numbered ledger, the /web/ spec rhythm */
.avals{max-width:52rem;margin-inline:auto}
.aval{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(.9rem,1.8vw,1.4rem);padding-block:clamp(1rem,2vh,1.35rem);
  padding-inline-start:.9rem;border-top:1px solid rgba(242,242,242,.12)}
.aval:last-child{border-bottom:1px solid rgba(242,242,242,.12)}
.aval::before{content:"";position:absolute;inset-block:18%;inset-inline-start:0;
  width:2px;border-radius:2px;background:var(--mint);
  box-shadow:0 0 12px rgba(0,234,173,.75);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.aval:hover::before{transform:scaleY(1)}
.aval__n{font-family:var(--font-meta);font-size:.8rem;color:rgba(242,242,242,.5);
  padding-top:.3rem;transition:color .3s var(--ease)}
.aval:hover .aval__n{color:var(--mint)}
.aval__t{font-weight:700;font-size:clamp(1.02rem,1.35vw,1.25rem);margin:0 0 .3rem}
.aval__b{margin:0;color:var(--paper-2);font-size:.97rem;line-height:1.6;max-width:56ch}

/* ═══════════════════════════════════════════════════════════════
   /contact/ · the ways in
   ═══════════════════════════════════════════════════════════════ */
.cwrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
/* the direct routes, before the form: someone who wants to phone
   should not have to read a form first */
.cways{display:grid;gap:.8rem}
.cway{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:1rem;
  padding:clamp(1rem,1.8vw,1.35rem);border-radius:var(--r-md);
  border:1px solid rgba(242,242,242,.11);
  background:linear-gradient(160deg,#0a2663 0%,#061a44 100%);
  box-shadow:0 20px 50px -34px rgba(0,0,0,.95);
  transition:transform .3s var(--ease),border-color .3s var(--ease),
             box-shadow .3s var(--ease)}
.cway:hover{transform:translateY(-3px);border-color:rgba(0,234,173,.4);
  box-shadow:0 26px 56px -32px rgba(0,234,173,.35)}
.cway__i{display:grid;place-items:center;width:46px;height:46px;flex:none;
  border-radius:14px;background:rgba(0,234,173,.1);
  border:1px solid rgba(0,234,173,.28)}
.cway__i svg{width:21px;height:21px;fill:var(--mint)}
.cway__t{display:block;font-weight:700;font-size:1.05rem;line-height:1.3}
.cway__v{display:block;margin-top:.15rem;color:var(--paper-2);font-size:.95rem}
.cway__v[dir="ltr"]{font-family:var(--font-meta)}
.cway__go{flex:none;color:rgba(0,234,173,.6);
  transition:color .25s var(--ease),transform .25s var(--ease)}
.cway:hover .cway__go{color:var(--mint);transform:translateX(-4px)}
/* whatsapp keeps its own colour on hover, like the footer's buttons */
.cway--wa:hover{border-color:rgba(37,211,102,.55)}
.cway--wa:hover .cway__i{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.5)}
.cway--wa:hover .cway__i svg{fill:#25d366}

.chours{margin-top:clamp(1.2rem,2.6vh,1.8rem);padding:clamp(1rem,1.8vw,1.3rem);
  border-radius:var(--r-md);border:1px solid rgba(0,234,173,.2);
  background:linear-gradient(160deg,rgba(0,234,173,.06),rgba(4,18,46,.5))}
.chours__t{margin:0 0 .5rem;font-family:var(--font-meta);font-size:.78rem;
  letter-spacing:.18em;color:var(--mint)}
.chours dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;
  font-size:.95rem}
.chours dt{color:var(--paper-2)}
.chours dd{margin:0;color:var(--paper);font-variant-numeric:tabular-nums}
.chours__n{margin:.8rem 0 0;font-size:.9rem;color:var(--paper-2);line-height:1.6}

/* ═══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width:1200px){ .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:980px){
  .astory{grid-template-columns:minmax(0,1fr)}
  .astory__art{order:-1;width:min(100%,20rem)}
  .cwrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .btn,.link{width:100%}
  .pf{gap:.4rem}
  .pf__c{font-size:.9rem}
  .pf__c i,.pf__live{font-size:.875rem}
  .pcard__k{font-size:.875rem}
  .aval__n{font-size:.875rem}
  .chours__t{font-size:.875rem}
}
@media (max-width:520px){ .pgrid{grid-template-columns:minmax(0,1fr)} }

/* ── the metadata floor · phones AND tablets ──────────────────
   The mobile pass above is written for a phone and stops at 760.
   An iPad in portrait is 768 — one pixel past it — so every
   measurement label on the site was still at its desktop size on
   the most common tablet there is, some as small as 10.9px.
   Type size follows the DEVICE, not the layout, so it gets its own
   breakpoint. .875rem is 14px exactly. */
@media (max-width:1024px){
  .pcard__k,.pf__c i,.pf__live,.aval__n,.chours__t{font-size:.875rem}
}