/* ═══════════════════════════════════════════════════════════════
   CLICKABILY · עמודי שירות
   One stylesheet for every service page — /web/ and the four the
   nav points at. They are the same skeleton by design (see
   page-service.php), so the layout lives here once instead of
   inside each template's own <style> block.

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

/* ── the three cards' drawn art ───────────────────────────────
   The same glyph classes the blog's covers use (inc/blog.php ->
   clickabily_glyph), so a service card and an article cover are
   drawn in one language. /web/ keeps its own hand-built
   wireframes and simply does not use these. */
.tcard__art .g-s{stroke:rgba(0,234,173,.85);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  transition:stroke .45s var(--ease)}
.tcard__art .g-d{stroke:rgba(0,234,173,.45);stroke-width:1.4;fill:none;
  stroke-dasharray:4 5;stroke-linecap:round;vector-effect:non-scaling-stroke;
  transition:stroke .45s var(--ease),stroke-dasharray .5s var(--ease)}
.tcard__art .g-ax{stroke:rgba(242,242,242,.30);stroke-width:1.3;fill:none;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.tcard__art .g-f{fill:rgba(0,234,173,.09);stroke:none;transition:fill .45s var(--ease)}
.tcard__art .g-fill{fill:var(--mint);stroke:none}
.tcard__art .g-dot{fill:rgba(0,234,173,.55);stroke:none;transition:fill .45s var(--ease)}
.tcard:hover .tcard__art .g-d{stroke:rgba(0,234,173,.8);stroke-dasharray:1 0}
.tcard:hover .tcard__art .g-f{fill:rgba(0,234,173,.18)}
.tcard:hover .tcard__art .g-dot{fill:var(--mint)}

/* ═══ HERO · the home skeleton, centred ═══════════════════════
   Same grid as .hero — copy in the 1fr row, the client strip on
   the auto row — but the copy is centred rather than held on the
   rail's start edge: there is no object beside it to balance
   against, and an off-centre column with nothing opposite it just
   reads as a layout that lost a piece. */
.wb-hero .body{justify-items:center;
  /* the strip needs air under the buttons, or the marks read as
     part of the call to action */
  padding-block-end:clamp(1.6rem,5vh,3.4rem)}
.wb-hero .body__rail{justify-items:center}
.wb-copy{max-width:min(52rem,100%);text-align:center}
/* the running text is wider here than on the home page: centred under
   a two-line headline, the shell's 31rem measure reads pinched rather
   than considered. Still inside a comfortable line length. */
.wb-copy .sub{max-width:38rem;margin-inline:auto}
.wb-copy .sub--pay{max-width:40rem;margin-inline:auto}
.wb-copy .actions{justify-content:center}
.wb-copy .link svg{fill:currentColor}
/* two declared lines. The setup runs on one row, so the size is
   capped at what that row can be without outgrowing the column —
   three lines were taller than the hero could give them. */
.wb-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.022em;
  margin:0 0 clamp(1.1rem,2.6vh,1.7rem);
  text-shadow:0 4px 26px rgba(4,18,46,.92),0 0 70px rgba(4,18,46,.7)}
.wb-title > span{display:block;white-space:nowrap}
.wb-title .b{color:var(--mint);
  text-shadow:0 0 38px rgba(0,234,173,.42),0 4px 26px rgba(4,18,46,.95)}

/* ── the hero's atmosphere ────────────────────────────────────
   A generated plate per service, sitting between the section's own
   navy wash and the copy. Never a photograph you look AT: it is
   held at half strength and masked hollow through the middle,
   where the headline is, so it reads as the room the words are
   standing in rather than as a picture behind them. */
.wb-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--bg) center/cover no-repeat;
  opacity:.5;
  -webkit-mask-image:radial-gradient(96% 78% at 50% 46%,
    transparent 6%,rgba(0,0,0,.45) 40%,#000 76%);
          mask-image:radial-gradient(96% 78% at 50% 46%,
    transparent 6%,rgba(0,0,0,.45) 40%,#000 76%)}
/* and a floor under the client strip, so the marks never sit on
   the brightest part of the plate */
.wb-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;z-index:0;
  height:38%;pointer-events:none;
  background:linear-gradient(to top,var(--navy-900),transparent)}
@media (max-width:860px){
  /* a phone hero is mostly words — the plate steps back further */
  .wb-bg{opacity:.34}
}

/* ═══ 02 · three kinds of pages · wireframe→paint on hover ════ */
.tcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem)}
.tcard{position:relative;display:flex;flex-direction:column;
  padding:clamp(1.4rem,2.1vw,2rem);
  border:1px solid rgba(242,242,242,.11);border-radius:var(--r-md);
  background:linear-gradient(160deg,#0a2663 0%,#061a44 100%);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(242,242,242,.05);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             border-color .3s var(--ease)}
.tcard:hover{transform:translateY(-3px);border-color:rgba(0,234,173,.34);
  box-shadow:0 30px 70px -34px rgba(0,234,173,.30)}
.tcard__art{display:block;width:100%;margin:0 0 1.1rem}
/* draft state: dashed & dim. hover: the drawing turns real —
   strokes solid, fills arrive. */
.tcard__art .tw{fill:none;stroke:rgba(0,234,173,.42);stroke-width:1.5;
  stroke-dasharray:4 5;stroke-linecap:round;vector-effect:non-scaling-stroke;
  transition:stroke .45s var(--ease),stroke-dasharray .45s var(--ease)}
.tcard__art .tw-f{fill:rgba(0,234,173,0);stroke:none;
  transition:fill .45s var(--ease)}
.tcard:hover .tcard__art .tw{stroke:rgba(0,234,173,.9);stroke-dasharray:1 0}
.tcard:hover .tcard__art .tw-f{fill:rgba(0,234,173,.09)}
.tcard__n{font-family:var(--font-meta);font-size:.72rem;letter-spacing:.22em;
  color:var(--mint);margin:0 0 .45rem}
.tcard__t{font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:700;margin:0 0 .5rem}
.tcard__b{margin:0 0 1.05rem;color:var(--paper-2);font-size:.97rem;line-height:1.62}
.tcard__for{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;
  color:var(--mint);font-weight:700;font-size:.92rem}
.tcard__for svg{flex:none;transition:transform .3s var(--ease)}
.tcard:hover .tcard__for svg{transform:translateX(-5px)}

/* ═══ 03 · the work · a GRID, not a runner ════════════════════
   The home page already owns three auto-scrolling rows. Here the
   sites are the evidence, so they hold still and are read — one
   clean row rhythm, every card on the same baseline. Hovering
   scrolls the page inside its own frame; clicking opens the real
   site in a new tab. */
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,2vw,1.7rem);align-items:start}
.wsite{display:block;transition:transform .3s var(--ease)}
.wsite:hover{transform:translateY(-5px)}
.wsite__win{position:relative;display:block;aspect-ratio:5/4;border-radius:14px;
  overflow:hidden;container-type:size;
  border:1px solid rgba(242,242,242,.13);background:#05163a;
  box-shadow:0 26px 56px -32px rgba(0,0,0,.95);
  transition:border-color .3s var(--ease),box-shadow .35s var(--ease)}
.wsite:hover .wsite__win{border-color:rgba(0,234,173,.55);
  box-shadow:0 28px 58px -28px rgba(0,234,173,.45)}
.wsite__bar{position:absolute;inset-inline:0;top:0;height:24px;z-index:2;
  display:flex;align-items:center;gap:4px;padding-inline:9px;
  background:rgba(4,18,46,.92);border-bottom:1px solid rgba(242,242,242,.10)}
.wsite__bar i{width:5px;height:5px;border-radius:50%;background:rgba(242,242,242,.24)}
.wsite__win img{display:block;width:100%;height:auto;
  transition:transform .6s var(--ease)}
@media (hover:hover){
  .wsite:hover .wsite__win img{transform:translateY(calc(100cqh - 100%));
    transition:transform 4.6s linear}
}
/* the caption: the name, and the type as a badge. Nothing else —
   a paragraph under every card turned the row into a wall of text
   and buried the thing that is actually the proof. */
.wsite__c{display:flex;align-items:center;justify-content:space-between;
  gap:.7rem;padding:.9rem .15rem 0}
.wsite__t{display:inline-flex;align-items:center;gap:.4rem;min-width:0;
  font-weight:700;font-size:1.05rem;line-height:1.3;
  transition:color .25s var(--ease)}
.wsite__t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsite:hover .wsite__t{color:var(--mint)}
/* the little arrow only appears on cards that really leave the site */
.wsite__out{flex:none;opacity:.55;transition:opacity .25s var(--ease),
  transform .25s var(--ease)}
.wsite:hover .wsite__out{opacity:1;transform:translate(-2px,-2px)}
/* the badge · display face, not the mono: it is a label on the work,
   not a measurement */
.wsite__k{flex:none;padding:.3rem .72rem;border-radius:var(--r-pill);
  border:1px solid rgba(0,234,173,.34);background:rgba(0,234,173,.08);
  color:var(--mint);font-family:var(--font-display);font-weight:700;
  font-size:.78rem;line-height:1.5;white-space:nowrap;
  transition:background .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease),box-shadow .28s var(--ease)}
.wsite:hover .wsite__k{background:var(--mint);color:var(--navy-900);
  border-color:var(--mint);box-shadow:0 0 22px -8px rgba(0,234,173,.8)}

/* ── view: plain · a square creative, nothing framing it ─────
   A campaign creative is a finished 1:1 image. Sitting it inside a
   browser chrome said "this is a website", which it is not. */
.wgrid--plain{grid-template-columns:repeat(4,minmax(0,1fr))}
.wgrid--plain .wsite__win{aspect-ratio:1;container-type:normal}
.wgrid--plain .wsite__win img{height:100%;object-fit:cover}
.wgrid--plain .wsite:hover .wsite__win img{transform:scale(1.05);transition:transform .6s var(--ease)}

/* ── view: video · vertical, with the play badge ──────────────
   The shape footage is actually shot in, and the same mint badge
   with the ring that keeps expanding out of it that the home
   page's video wall carries. The lift moves onto the frame so the
   tilt and the hover compose instead of overwriting each other. */
/* the gap has to clear the tilt, not just separate the cards. A
   9:16 card rotated 3deg swings its corners about h/2·sin(3°) — at
   three columns that was ~15px per side into a 22px gutter, and
   neighbours collided. Smaller angle, and a gap sized against what
   the rotation actually costs. */
.wgrid--video{grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2.2rem,3.4vw,2.8rem) clamp(1.8rem,2.8vw,2.2rem);
  align-items:start}
.wgrid--video .wsite:hover{transform:none}
.wgrid--video .wsite__win{aspect-ratio:9/16;container-type:normal;
  transform:rotate(var(--r,0deg)) translateY(var(--y,0px));
  transition:transform .45s var(--ease),border-color .3s var(--ease),
             box-shadow .35s var(--ease)}
.wgrid--video .wsite:nth-child(odd)  .wsite__win{--r:-2.2deg;--y:10px}
.wgrid--video .wsite:nth-child(even) .wsite__win{--r:2.2deg;--y:-10px}
.wgrid--video .wsite:hover .wsite__win{--r:0deg;--y:-18px}
.wgrid--video .wsite__win img{height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.wgrid--video .wsite:hover .wsite__win img{transform:scale(1.06)}
/* a scrim so the play badge and the caption never sit on a bright frame */
.wgrid--video .wsite__win::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(4,18,46,.7),transparent 46%);
  pointer-events:none}
.wsite__play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,234,173,.94);color:var(--navy-900);
  box-shadow:0 0 28px -4px rgba(0,234,173,.85);
  transition:scale .3s var(--ease)}
/* the ring is a pseudo so the hover scale stays on the button and
   the two never fight — same trick the home page's wall uses */
.wsite__play::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(0,234,173,.9);
  animation:playPing 2.6s cubic-bezier(.2,.6,.35,1) infinite}
.wgrid--video .wsite:nth-child(2n) .wsite__play::after{animation-delay:-.9s}
.wgrid--video .wsite:nth-child(3n) .wsite__play::after{animation-delay:-1.7s}
.wgrid--video .wsite:hover .wsite__play{scale:1.14}
.wgrid--video .wsite:hover .wsite__play::after{animation-duration:1.5s}
@media (prefers-reduced-motion:reduce){
  .wsite__play::after{animation:none;opacity:0}
  .wgrid--video .wsite__win{transform:none}
}

/* ═══ 04 · the process · the home page's own rail ═════════════
   Same object as #process on the home page — a line that draws
   with scroll and nodes that ignite in sequence — widened from
   three stations to four. */
#how{isolation:isolate}
#how::before{
  background:
    radial-gradient(120% 88% at 50% 46%, rgba(0,234,173,.14), transparent 66%),
    rgba(4,18,46,.62)}
#how .s__in{z-index:2}
#how .flow{--fgap:clamp(1.4rem,3.2vw,3.4rem);--fpad:clamp(1.2rem,2vw,1.8rem);
  grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--fgap)}
/* The rail has to start and end ON the outer nodes. The node is NOT
   at its column's centre — .step__n is a block in normal flow, so it
   sits at the column's inline-start edge, one .step padding in, and
   its centre is padding + half of its 70px. That makes the two insets
   different, which is why the inherited symmetric `inset-inline:16%`
   never actually touched a circle. Same numbers the rail's own `top`
   is already built from. */
#how .flow__rail{
  inset-inline-start:calc(var(--fpad) + 35px);
  inset-inline-end:calc((100% - 3 * var(--fgap)) / 4 - var(--fpad) - 35px)}

/* ═══ 05 · the questions ══════════════════════════════════════
   <details>, not a JS accordion: it opens with the keyboard, it
   opens with the script blocked, and Ctrl+F finds the answer
   inside a closed one in every current browser. */
.qa-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
  margin-top:clamp(1.6rem,3.6vh,2.4rem)}
.qa{max-width:52rem;min-width:0}
/* in the rail, not against the section: a prop measured off a
   full-bleed <section> drifts to the viewport edge on a wide screen */
.qa__bot{display:block;width:clamp(170px,15vw,240px);
  margin-block-end:clamp(.5rem,2vh,1.4rem);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.85))}
.qa__bot img{width:100%;height:auto;display:block;
  animation:propFloat 11s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .qa__bot img{animation:none} }
.q{border-top:1px solid rgba(242,242,242,.12)}
.q:last-of-type{border-bottom:1px solid rgba(242,242,242,.12)}
.q__q{display:flex;align-items:center;gap:1rem;cursor:pointer;
  padding-block:clamp(1rem,2.2vh,1.35rem);list-style:none;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.35;
  transition:color .25s var(--ease)}
.q__q::-webkit-details-marker{display:none}
.q__q:hover{color:var(--mint)}
.q__q:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:8px}
/* the sign: a plus that becomes a minus, drawn from two rules so it
   inherits the mint and needs no icon font */
.q__s{position:relative;flex:none;margin-inline-start:auto;
  width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(0,234,173,.4);
  transition:background .3s var(--ease),border-color .3s var(--ease),
             rotate .35s var(--ease)}
.q__s::before,.q__s::after{content:"";position:absolute;inset:50% 6px auto 6px;
  height:1.5px;border-radius:2px;background:var(--mint);translate:0 -50%;
  transition:opacity .25s var(--ease)}
.q__s::after{rotate:90deg}
.q[open] .q__s{background:rgba(0,234,173,.14);border-color:var(--mint);rotate:180deg}
.q[open] .q__s::after{opacity:0}
.q__a{padding-block:0 clamp(1rem,2.2vh,1.4rem);margin:0;
  color:var(--paper-2);font-size:1rem;line-height:1.72;max-width:58ch}
.q__a b{color:var(--paper);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .q[open] .q__a{animation:qOpen .4s var(--ease)}
}
@keyframes qOpen{from{opacity:0;translate:0 -6px}}

/* ═══ 07 · close ══════════════════════════════════════════════ */
#contact .h2 > span{display:block}
#contact .h2{margin:0 0 clamp(1.1rem,2.6vh,1.6rem)}
#contact .btn{width:100%}

/* ═══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width:1100px){
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wgrid--plain,.wgrid--video{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* four stations will not sit on one horizontal rail this narrow —
     the rail turns and runs down the inline-start edge, the same
     move the home page's three make at 820px */
  #how .flow{grid-template-columns:1fr;gap:1.8rem}
  #how .flow__rail{inset-inline:auto;right:34px;top:34px;bottom:34px;
    width:2px;height:auto}
  #how .flow__rail i{inset-inline:0;width:auto;height:var(--p,0%)}
  #how .flow__rail i::after{inset-block:auto;bottom:-3px;
    inset-inline:-3px;width:auto;height:8px}
}
@media (max-width:980px){
  .tcards{grid-template-columns:1fr}
  /* no margin left to bleed into — the questions take the full rail */
  .qa-wrap{grid-template-columns:minmax(0,1fr)}
  .qa__bot{display:none}
}
@media (max-width:860px){
  /* only the nowrap goes. A second font-size clamp here jumped the
     headline from 40px to 56px across the breakpoint — the one scale
     above already lands where a phone needs it. */
  .wb-title > span{white-space:normal}
}
@media (max-width:760px){
  .btn,.link{width:100%}
  .wgrid{grid-template-columns:1fr}
  /* a square and a 9:16 still read at two-up on a phone; a full-page
     screenshot does not, which is why only .wgrid drops to one */
  .wgrid--plain,.wgrid--video{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wgrid--video .wsite__win{--r:0deg !important;--y:0 !important}
  .wsite__play{width:44px;height:44px}
  .wsite__t{font-size:1.1rem}
  /* the site's 14px floor, and a thumb-sized target on the one link
     that was a 24px-tall line of text */
  .tcard__n{font-size:.875rem}
  .wsite__k{font-size:.875rem}
  .rstep__n,.lrow__n{font-size:.875rem}
  .tcard__for{min-height:44px;padding-block:.6rem}
}

/* ── the centred lede under a rule headline ──────────────────
   Was an inline style on /web/; a class, now that four more
   pages print the same paragraph. */
.lede--mid{margin-inline:auto;text-align:center;max-width:52ch;text-wrap:balance}
.lede--mid b{color:var(--paper);font-weight:700}

/* ── 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){
  .tcard__n,.wsite__k,.rstep__n,.lrow__n{font-size:.875rem}
}
/* touch targets follow the INPUT, not the width: a finger on a
   tablet needs the same 44px a finger on a phone does */
@media (max-width:1024px) and (pointer:coarse){
  .tcard__for{min-height:44px;padding-block:.6rem}
}