/* ============================================================
   Technion - contact page
   Page stylesheet. Loads after ../shared/base.css and only holds
   what this page owns: the hero, the phone desk and its rail,
   the picture cards, the department banner and the line artwork.

   Tokens, header, footer, buttons, icons, forms, the reveal
   system and the motion policy all live in ../shared/base.css.
   ============================================================ */

/* several components set display, so [hidden] needs to win */
[hidden]{ display:none !important; }


/* ============================================================
   HERO
   The image is the top of the document. The header floats on it.
   ============================================================ */
/* no overflow clip here: the scroll cue is meant to hang over the edge.
   The media and its layer do their own clipping. */
/* Two rows: the copy takes the space that is left and centres inside it,
   the anchor bar sits at the foot. The top padding clears the floating
   header, so "centred" means centred in the area the reader actually
   sees, not in the raw box. The text itself stays right aligned. */
.hero{
  position:relative;
  min-height:790px;
  display:grid;
  /* minmax(0,1fr), not 1fr. A grid track defaults to a min-content
     floor, so the anchor bar would widen the column instead of
     scrolling inside it. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:1fr auto;
  padding-top:calc(var(--hdr-top) + var(--hdr-h));
  padding-bottom:72px;
  background:var(--navy-deep);
}
.hero__media{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  background:var(--navy-deep);
}
/* The layer that carries the hero parallax. Its vertical overflow is the
   headroom the drift needs, but every pixel of it forces object-fit: cover
   to scale the clip up and crop more off the sides, so it is kept tight. */
.hero__layer{
  position:absolute; left:0; right:0; top:-3%; bottom:-3%;
  display:block; overflow:hidden;
  will-change:transform;
}
.hero__media > img,
.hero__video{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.07);
}
/* while the file is missing the layer keeps a light texture, so the
   drift stays visible during review. It disappears with the real media. */
.hero__media.is-missing > img,
.hero__media.is-missing .hero__video{ display:none; }
.hero__media.is-missing .hero__layer,
.pcard.is-missing .pcard__img{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 14px, transparent 14px 28px);
}
.pcard.is-missing .pcard__img img{ display:none; }

.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* The copy sits at the vertical centre since the block was centred, and
     the middle of this gradient used to be its thinnest point (.06). The
     band the text actually crosses carries real weight now, and a flat
     scrim underneath lifts the floor everywhere so the video never reads
     through the letters. */
  background:
    linear-gradient(to top,
      rgba(0,20,45,.90) 0%,
      rgba(0,20,45,.62) 26%,
      rgba(0,20,45,.44) 48%,
      rgba(0,20,45,.30) 68%,
      rgba(0,20,45,.18) 100%),
    /* the column the copy sits in */
    linear-gradient(to left, rgba(0,33,71,.34) 0%, rgba(0,33,71,0) 52%),
    linear-gradient(rgba(0,20,45,.14), rgba(0,20,45,.14));
}
/* nothing to darken when the photo has not been supplied yet */
.hero--noimg .hero__veil{ opacity:.25; }

/* the placeholder sits in the free space above the copy, never behind it */
.hero__media .ph{
  inset:var(--s3) var(--s3) auto;
  padding-block:var(--s5);
}

.hero__inner{ position:relative; z-index:2; align-self:center; }

/* ------------------------------------------------------------
   Anchor bar. Secondary navigation, so it reads clearly without
   competing with the H1: one translucent rail rather than four
   buttons, pill radius like every other interactive element, and
   the same negative hover the fixed contact rail uses.
   ------------------------------------------------------------ */
/* No margin on this element. It sits in the second grid row, and any
   margin here lands outside the row the copy centres in, which throws
   the balance above and below the copy out by exactly that amount.
   The separation comes from the centring itself. */
.anchors{
  position:relative; z-index:2;
  align-self:end;
  min-width:0;          /* same reason, see .hero */
}
.anchors__list{
  display:flex; flex-wrap:wrap;
  gap:5px;
  padding:7px;
  border-radius:var(--r-pill);
  /* centred in the hero rather than pinned to the right edge */
  width:max-content; max-width:100%;
  margin-inline:auto;
  background:rgba(255,255,255,.10);
  /* no transform may ever land on this element or an ancestor,
     it silently disables the blur */
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 10px 30px -12px rgba(0,20,45,.5);
}
.anchors__item{
  display:block;
  padding:15px 28px;
  border-radius:var(--r-pill);
  color:var(--white);
  font-size:18px; font-weight:500; line-height:1.2;
  white-space:nowrap;
  transition:background-color var(--t-mid), color var(--t-mid);
}
.anchors__item:hover{ background:var(--white); color:var(--navy); }
/* The section the reader is currently in. Held apart from hover on
   purpose: hover is a solid white face, current is a lit panel, so the
   two never read as the same thing. */
.anchors__item[aria-current]{
  background:rgba(255,255,255,.24);
  font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.anchors__item[aria-current]:hover{
  background:var(--white); color:var(--navy);
  box-shadow:none;
}
/* base.css owns the motion-off block, but .anchors belongs to this page,
   so the static-page override for the rail lives here */
body.motion-off .anchors__list{ scroll-behavior:auto; }
.anchors__item:focus-visible{ outline:3px solid var(--white); outline-offset:2px; }


/* scroll cue: the circle holds still, only the chevron loops */
.scroller{
  position:absolute; z-index:3;
  left:50%; bottom:0; transform:translate(-50%, 50%);
  /* the anchor bar occupies the foot now, the cue keeps straddling the
     very bottom edge below it */
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  background:var(--white); color:var(--navy);
  box-shadow:var(--sh-disc);
  transition:background-color var(--t-fast), box-shadow var(--t-mid), transform var(--t-mid);
}
.scroller:hover{
  background:var(--sky);
  box-shadow:var(--sh-disc-up);
  transform:translate(-50%, calc(50% - 2px));
}
.scroller:focus-visible{ outline:3px solid var(--white); outline-offset:3px; }
/* The chevron holds one opacity and simply travels down and back. First and
   last frame are identical, so the loop has no seam and nothing fades. */
.scroller__ico{ width:22px; height:22px; animation:cue 1.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes cue{
  0%,100% { transform:translateY(-4px); }
  50%     { transform:translateY(5px); }
}
.hero__title{
  color:var(--white);
  font-size:88px; font-weight:500; line-height:1;
  letter-spacing:-.015em;
  margin:0;
}
.hero__lede{
  margin-top:var(--s4);
  max-width:640px;
  color:var(--white);
  font-size:20px; line-height:1.65;
  text-shadow:0 1px 18px rgba(0,20,45,.55);
}
.is-missing .ph{ display:flex; }
.sec--one{ padding-block:104px; background:var(--white); }
.sec--two{ padding-block:104px 88px; }
.sec--three{ padding-block:96px 112px; background:var(--white); }

.act{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:var(--s5);
  font-size:18px; font-weight:500; color:var(--white);
}
.act > .ico:first-child{ transition:transform var(--t-mid); }
.act--white > .ico:first-child,.act--white .act__chev{ color:var(--white); }
.act > span{
  padding-bottom:3px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:100% 100%;
  background-size:0 1.5px;
  transition:background-size var(--t-mid);
}
.act__chev{ opacity:0; transform:translateX(10px); transition:opacity var(--t-mid), transform var(--t-mid); }
.act:hover > span{ background-size:100% 1.5px; }
.act:hover > .ico:first-child{ transform:translateY(-3px) scale(1.06); }
.act:hover .act__chev{ opacity:1; transform:translateX(0); }

/* ============================================================
   PART 1 - phone desk + rail of rows
   ============================================================ */
/* the blue desk is centred against the block of three options */
/* Three photo containers: one across the full width, two halves under
   it. One gap token drives every division, so the space between the top
   container and the pair matches the space between the pair. */
.one{ display:grid; gap:var(--s5); }
.one__pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:stretch; }

/* The two lines are broken by hand in the markup, so no measure here:
   a max-width on top of an explicit <br> only adds a third line. On a
   phone the <br> is ignored and the text wraps on its own. */
.dcard__title--lead{ max-width:none; }

/* The two halves are squarer than the wide one and end on their action.
   space-between, not margin-top:auto: the card is a grid, and an auto
   margin on a grid item centres it in its own row instead of pushing it
   to the foot of the card. */
/* .dcard.dcard--half, not .dcard--half: this block sits above the .dcard
   rules in the file, and at equal specificity the later align-content:start
   would win and leave the action floating in the middle. */
.dcard.dcard--half{
  min-height:230px;
  align-content:space-between;
  gap:var(--s5);
}
.dcard__foot{ position:relative; z-index:3; justify-self:start; }

/* the mail row: address plus a disc that makes the click obvious */
.mailrow{
  display:inline-flex; align-items:center; gap:var(--s3);
  color:var(--white); font-size:20px; font-weight:500;
}
.mailrow__val{
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:100% 100%;
  background-size:0 1.5px;
  transition:background-size var(--t-mid);
  unicode-bidi:isolate;
}
.mailrow:hover .mailrow__val{ background-size:100% 1.5px; }
/* The disc itself is the shared one further down, next to .dcard__icons.
   Only the one thing a flex child needs is set here. */
.mailrow__go{ flex:none; }
.mailrow:focus-visible{ outline:3px solid var(--white); outline-offset:4px; border-radius:var(--r-pill); }

/* the address line under דרכי הגעה, body size, not a heading */
.ocard__addr{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:var(--s2);
  color:var(--navy); font-size:17px;
}

/* content sits as one centred group, balanced top and bottom */
.desk{
  background:var(--navy);
  border-radius:var(--r-card);
  padding:var(--s6) var(--s6) var(--s7);
  box-shadow:var(--sh-card);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.desk__title{ color:var(--white); font-size:26px; font-weight:600; line-height:1.25; }
.desk__sub{ color:var(--on-navy-2); font-size:18px; margin-top:2px; }

/* rail */
/* the rows already carry their own padding, so the block needs none */
.rail{ position:relative; }
/* hairline that threads through the dots, physical right edge (RTL start) */
.rail::before{
  content:''; position:absolute; right:45px;
  top:44px; bottom:44px; width:1px; background:var(--line);
}
.rail__row > a,.rail__row > button{
  position:relative; z-index:1;
  /* centred cross axis, so every chevron on the rail lands on the
     vertical middle of its own row */
  display:flex; align-items:center; gap:var(--s4);
  width:100%; text-align:right;
  padding:var(--s5) var(--s4) var(--s5) var(--s3);
  border-radius:var(--r-card);
  transition:background-color var(--t-mid);
}

/* The separator is a hairline drawn inside the row, not a border on the
   row box, and it fades out around the active row. Nothing new is ever
   drawn on hover: no vertical rule, no accent bar, no extra border. */
.rail__row + .rail__row > a::before,
.rail__row + .rail__row > button::before{
  content:''; position:absolute; z-index:0;
  top:0; right:var(--s4); left:var(--s3);
  height:1px; background:var(--line);
  transition:opacity var(--t-fast);
}
.rail__row > a:hover::before,
.rail__row > button:hover::before,
.rail__row:hover + .rail__row > a::before,
.rail__row:hover + .rail__row > button::before{ opacity:0; }

/* the whole option fills */
.rail__row > a:hover,.rail__row > button:hover{ background:var(--sky); }
.rail__row > a > *,.rail__row > button > *{ position:relative; z-index:1; }

/* Icon disc per option. Rest: white disc, navy edge, navy mark.
   Hover: a clean inversion, so the mark never disappears into the disc. */
.rail__disc{
  width:52px; height:52px; flex:none;
  align-self:flex-start;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  background:var(--white);
  color:var(--navy);
  box-shadow:var(--sh-disc);
  transition:background-color var(--t-mid), color var(--t-mid),
             box-shadow var(--t-mid), transform var(--t-mid);
}
.rail__disc .ico{ transition:transform var(--t-mid); }
.rail[data-hot] .rail__disc{ box-shadow:var(--sh-disc-up); }
.rail__row > *:hover .rail__disc{
  background:var(--navy);
  color:var(--white);
  box-shadow:var(--sh-disc-up);
  transform:scale(1.06);
}
.rail__row > *:hover .rail__disc .ico{ transform:translateY(-2px); }
.rail__row.is-in .icoa--mail .icoa__draw{ animation:iconDraw 2.4s linear infinite; }
/* the pencil and its line share one timing, so the tip is always at the
   point the stroke is being laid down */
.rail__row.is-in .icoa--edit .icoa__rule{ animation:iconTrace 2.4s ease-in-out -.8s infinite; }
.rail__row.is-in .icoa--edit .icoa__nib{ animation:iconWrite 2.4s ease-in-out -.8s infinite; }
.rail__row.is-in .icoa--form .icoa__l1{ animation:iconDraw 2.4s linear -1.6s infinite; }
.rail__row.is-in .icoa--form .icoa__l2{ animation:iconDraw 2.4s linear -1.75s infinite; }
.rail.is-idle .rail__row.is-in .icoa *{ animation-play-state:paused; }

/* one full dash period, so the end state is the start state */
@keyframes iconDraw{
  from { stroke-dashoffset:1; }
  to   { stroke-dashoffset:-1; }
}
/* Full size pencil. It rests slightly left of centre and slides right by
   the exact length of the stroke it lays down, which keeps both ends inside
   the 24 grid without shrinking it. Out and back, so the loop meets itself. */
@keyframes iconWrite{
  0%,100% { transform:translateX(-2px); }
  50%     { transform:translateX(4px); }
}
@keyframes iconTrace{
  0%,100% { stroke-dashoffset:1; }
  50%     { stroke-dashoffset:0; }
}

/* the discs arrive one after another with their rows */
.rail__row.reveal .rail__disc{ opacity:0; transform:scale(.82); }
.rail__row.reveal.is-in .rail__disc{
  opacity:1; transform:scale(1);
  transition:opacity .45s var(--ease) .12s, transform .5s var(--ease) .12s,
             background-color var(--t-mid), color var(--t-mid), box-shadow var(--t-mid);
  box-shadow:var(--sh-disc);
}
.rail__row.reveal.is-in > *:hover .rail__disc{ transform:scale(1.06); }

.rail__body{ display:grid; gap:6px; flex:1; }
.rail__title{
  color:var(--navy); font-size:26px; font-weight:600; line-height:1.25;
  transition:transform var(--t-mid);
}
.rail__row > *:hover .rail__title{ transform:translateX(-6px); }
.rail__sub{ color:var(--muted); font-size:16px; line-height:1.55; }
.rail__value{
  display:inline-flex; align-items:center; gap:var(--s1);
  margin-top:2px;
  color:var(--navy-ink); font-size:17px;
}
.rail__value .ico{ color:var(--blue-mid); transition:transform var(--t-mid), color var(--t-fast); }
.rail__row > *:hover .rail__value .ico{ transform:translateY(-3px) scale(1.06); color:var(--navy); }
/* dark brand blue, centred on the row, no faded grey state */
.rail__chev{
  color:var(--navy);
  transition:transform var(--t-mid);
}
.rail__row > *:hover .rail__chev{ transform:translateX(-9px); }

/* ============================================================
   DARK BLOCK - one continuous navy field for parts 2 and 3
   ============================================================ */
.dark{
  position:relative;
  background:var(--navy);
  isolation:isolate;
}

/* ------------------------------------------------------------
   Decorative line artwork. It belongs to PART 2 only: bounded
   size, contained inside the section, clipped by nothing, and
   it never travels into the section below.
   ------------------------------------------------------------ */
.sec--two{ position:relative; overflow:hidden; }
.sec--two > .wrap{ position:relative; z-index:1; }
/* the picture row needs air under the heading */
.sec--two .sec__head{ margin-bottom:72px; }
/* The wrapper only positions and clips. The artwork sits inside it at a
   size where the arcs still read as fine lines rather than giant sweeps,
   and carries its own edge fade, so every edge of it dissolves wherever it
   happens to sit. */
.lines{
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  overflow:hidden;
}
.lines .lines__svg{
  position:absolute;
  left:6%; top:50%;
  width:88%;
  transform:translateY(-50%);
  will-change:transform;
  height:auto; display:block;
  opacity:.8;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}

/* ------------------------------------------------------------
   Draw animation.
   The source file is built from filled arc shapes, not strokes, so it
   cannot be dashed as it stands. The adaptation: each path also gets a
   stroke that traces itself through stroke-dashoffset, and the stroke
   then fades out while the original fill settles in, so the finished
   state is the artwork's own look. pathLength="1" (set on every path in
   the markup) normalises the arcs so one duration fits them all.

   The cycle draws, holds, fades out, and rewinds while nothing is
   painted, so the restart cannot be seen. It is paused whenever the
   area is off screen, see script.js.
   ------------------------------------------------------------ */
.lines .lines__svg path{
  fill-opacity:0;
  stroke:#FFFFFF;
  stroke-opacity:0;
  stroke-width:1.4;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.lines.is-drawn .lines__svg path{
  animation:drawLine 7s cubic-bezier(.22,.61,.36,1) var(--d, 0s) infinite;
}
.lines.is-idle .lines__svg path{ animation-play-state:paused; }
@keyframes drawLine{
  0%     { stroke-dashoffset:1; stroke-opacity:0;   fill-opacity:0; }
  3%     { stroke-dashoffset:1; stroke-opacity:.52; fill-opacity:0; }
  40%    { stroke-dashoffset:0; stroke-opacity:.52; fill-opacity:.06; }
  50%    { stroke-dashoffset:0; stroke-opacity:0;   fill-opacity:.15; }
  80%    { stroke-dashoffset:0; stroke-opacity:0;   fill-opacity:.15; }
  93%    { stroke-dashoffset:0; stroke-opacity:0;   fill-opacity:0; }
  94%    { stroke-dashoffset:1; stroke-opacity:0;   fill-opacity:0; }
  100%   { stroke-dashoffset:1; stroke-opacity:0;   fill-opacity:0; }
}
/* static end state whenever the drawing is not wanted */
.lines.is-static .lines__svg path{
  fill-opacity:.15; stroke-opacity:0; stroke-dashoffset:0; animation:none;
}

/* ============================================================
   PART 2 - סטודנטים וכללי
   Image led: a tall picture holds one half of the section, the
   שכר לימוד block is the dominant text mass, and the two smaller
   items sit under it as a secondary pair. No repeated cards.
   ============================================================ */
/* Three equal picture cards in a row, offset on the vertical so the
   row reads as a composition rather than a grid. Same width, same
   height, only the baseline moves. */
.two{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s5);
  align-items:start;
  padding-bottom:56px;
}
.two > .pcard:nth-child(2){ margin-top:56px; }

.pcard{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  margin:0; padding:var(--s6);
  aspect-ratio:9 / 12.6;
  border-radius:var(--r-card);
  background:var(--navy-deep);
  box-shadow:0 24px 60px rgba(0,10,30,.38);
  isolation:isolate;
}

/* image layer, parallaxed from script.js, oversized so the drift never
   uncovers an edge */
.pcard__img{
  position:absolute; left:0; right:0; top:-7%; bottom:-7%;
  z-index:0; overflow:hidden;
  will-change:transform;
}
.pcard__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.pcard:hover .pcard__img img{ transform:scale(1.05); }

.pcard__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* The falloff is pulled down: still solid through the band the copy
     occupies, then dropping away quickly so the upper half of the picture
     stays the picture. */
  background:
    linear-gradient(to top,
      rgba(0,20,45,.88) 0%,
      rgba(0,20,45,.80) 22%,
      rgba(0,20,45,.52) 40%,
      rgba(0,20,45,.18) 55%,
      rgba(0,20,45,.04) 70%,
      rgba(0,20,45,0)   100%);
  transition:opacity var(--t-slow);
}
.pcard:hover .pcard__veil{ opacity:.9; }

/* the labelled placeholder lives in the free space above the copy */
.pcard .ph{
  z-index:2;
  inset:var(--s3) var(--s3) auto;
  padding-block:var(--s4);
}

.pcard__body{
  position:relative; z-index:3;
  transition:transform var(--t-slow);
}
.pcard:hover .pcard__body{ transform:translateY(-5px); }

.pcard__title{
  color:var(--white); font-size:32px; font-weight:500; line-height:1.2;
  letter-spacing:-.01em;
}
.pcard__sub{ color:var(--on-navy-2); font-size:17px; margin-top:var(--s2); }
.pcard__line{
  margin-top:var(--s4);
  color:var(--white); font-size:18px; font-weight:500; line-height:1.6;
}
.pcard__line a{
  color:var(--white);
  padding-bottom:2px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat; background-position:100% 100%;
  background-size:100% 1.5px;
  transition:background-size var(--t-mid), color var(--t-fast);
}
.pcard__line a:hover{ color:var(--gold); background-size:0 1.5px; }
.pcard__line [dir="ltr"]{ unicode-bidi:isolate; font-variant-numeric:tabular-nums; }

/* The button lives inside .pcard__body, which is a plain block, so
   align-self has nothing to act on. A max-content box with auto margin on
   the physical right pushes it to the left edge of the card. */
.pcard__cta{
  margin-top:var(--s5);
  display:flex; width:max-content;
  margin-right:auto;
}
.pcard .btn--ivory{
  transition:background-color var(--t-fast), color var(--t-fast),
             transform var(--t-mid), box-shadow var(--t-mid);
}
.pcard:hover .btn--ivory{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,10,30,.34); }

/* Entrance: a plain fade and lift, but the three cards arrive one after
   another so the row visibly builds itself. */
.pcard.reveal{ opacity:0; transform:translateY(var(--rv-y, 38px)); }
.pcard.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .75s var(--ease);
}
.two > .pcard:nth-child(2).is-in{ transition-delay:.20s; }
.two > .pcard:nth-child(3).is-in{ transition-delay:.40s; }

/* the copy follows its own card in */
.pcard__title,.pcard__sub,.pcard__acts,.pcard__cta{ opacity:0; transform:translateY(14px); }
.pcard.is-in .pcard__title,
.pcard.is-in .pcard__sub,
.pcard.is-in .pcard__acts,
.pcard.is-in .pcard__cta{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease), transform .55s var(--ease);
}
.two > .pcard:nth-child(1).is-in .pcard__title{ transition-delay:.30s; }
.two > .pcard:nth-child(1).is-in .pcard__sub{ transition-delay:.38s; }
.two > .pcard:nth-child(1).is-in .pcard__acts,
.two > .pcard:nth-child(1).is-in .pcard__cta{ transition-delay:.46s; }
.two > .pcard:nth-child(2).is-in .pcard__title{ transition-delay:.50s; }
.two > .pcard:nth-child(2).is-in .pcard__sub{ transition-delay:.58s; }
.two > .pcard:nth-child(2).is-in .pcard__cta{ transition-delay:.66s; }
.two > .pcard:nth-child(3).is-in .pcard__title{ transition-delay:.70s; }
.two > .pcard:nth-child(3).is-in .pcard__sub{ transition-delay:.78s; }
.two > .pcard:nth-child(3).is-in .pcard__cta{ transition-delay:.86s; }

/* phone and WhatsApp as two clear actions rather than one long sentence */
.pcard__acts{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s5); }
.pcard__act{
  display:inline-flex; align-items:center; gap:var(--s2);
  color:var(--white); font-size:17px; font-weight:500;
}
.pcard__act .ico{ color:var(--white); transition:transform var(--t-mid); }
/* direct child only. The phone label wraps the number in its own
   <span dir="ltr">, and a descendant selector underlined both of them,
   which drew a second rule under the digits. */
.pcard__act > span{
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:100% 100%;
  background-size:0 1.5px;
  transition:background-size var(--t-mid);
}
.pcard__act:hover > span{ background-size:100% 1.5px; }
.pcard__act:hover .ico{ transform:translateY(-3px) scale(1.06); }
.pcard__act [dir="ltr"]{ unicode-bidi:isolate; font-variant-numeric:tabular-nums; }

/* ============================================================
   PART 3 - department block + form, on its own white strip
   ============================================================ */
/* The pair. Two columns that stretch to a matched height, the dark
   picture card taking the wider share because it carries the contact
   group, the light card the narrower one because it carries a single
   action. Same radius and the same shadow language on both. */
.three{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:stretch;
  gap:var(--s5);
}
/* both containers clear the fixed header when an anchor lands on them */
#dept-computing, #dept-other{
  scroll-margin-top:calc(var(--hdr-top) + var(--hdr-h) + var(--s5));
}
#part-1, #part-2{
  scroll-margin-top:calc(var(--hdr-top) + var(--hdr-h) + var(--s4));
}

/* ------------------------------------------------------------
   OPTION 2 - פניה בנושא אחר
   The light half of the pair. Same shape and shadow as the dark
   card, opposite surface, so the two read as two choices rather
   than a banner with a button stuck to it.
   ------------------------------------------------------------ */
.ocard{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-start;
  gap:var(--s4);
  padding:var(--s7);
  border-radius:var(--r-card);
  background:var(--sky);
  box-shadow:0 28px 64px -18px rgba(0,33,71,.26),
             0 6px 18px -8px rgba(0,33,71,.14);
  transition:box-shadow var(--t-mid);
}
/* same construction as the dark card: the photo overflows top and bottom
   so the parallax has headroom, and the wrapper carries the drift */
.ocard__img{
  position:absolute; left:0; right:0; top:-7%; bottom:-7%;
  z-index:0; overflow:hidden; will-change:transform;
}
.ocard__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow);
}
.ocard.is-missing .ocard__img img{ display:none; }
.ocard.is-missing .ocard__img{
  background:repeating-linear-gradient(135deg, rgba(0,33,71,.06) 0 14px, transparent 14px 28px);
}
.ocard .ph{ z-index:2; inset:var(--s3) var(--s3) auto; padding-block:var(--s3); }

/* A white wash, not a navy one. The picture is a pale map and the type
   over it is navy, so the layer lifts the right hand side where the
   copy sits and falls away to nothing over the left, where the map is
   meant to be seen. */
.ocard__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to left,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.56) 28%,
    rgba(255,255,255,.28) 54%,
    rgba(255,255,255,.08) 76%,
    rgba(255,255,255,0) 92%);
  transition:opacity var(--t-mid);
}
.ocard__title{
  position:relative; z-index:3;
  color:var(--navy);
  font-size:32px; font-weight:500; line-height:1.2;
}
.ocard__cta{
  position:relative; z-index:3;
  margin-top:auto;
}

.ocard:hover{
  box-shadow:0 34px 72px -18px rgba(0,33,71,.30),
             0 8px 22px -10px rgba(0,33,71,.18);
}
.ocard:hover .ocard__img img{ transform:scale(1.035); }



/* Full bleed picture container. The photo is the surface, a gradient
   keeps the copy readable, and the secondary elements stay white so the
   accent colour is not the dominant note. */
.dcard{
  position:relative; overflow:hidden; isolation:isolate;
  /* One column, content pinned to the top, so this title and the title in
     the light card start on exactly the same line. Centring each card
     independently put them at different heights.

     minmax(0,1fr), not the default auto: an auto track has a min-content
     floor, so a long unbreakable heading grows the column straight past
     the padding instead of wrapping inside it. */
  display:grid; grid-template-columns:minmax(0,1fr); align-content:start;
  padding:var(--s7);
  border-radius:var(--r-card);
  background:var(--navy-deep);
  /* on white the shadow finally does work, so it carries the elevation
     and the container needs no drawn edge */
  box-shadow:0 28px 64px -18px rgba(0,33,71,.42),
             0 6px 18px -8px rgba(0,33,71,.22);
}
/* Hover response. data-hot is already set on the container by
   script.js -> contact group, so pointer and keyboard both reach it.
   The lift is small on purpose, the container is large and anything
   bigger reads as the whole strip moving.

   It rides on `translate`, not `transform`: .reveal.is-in owns the
   transform of this element and would win, and the two would fight
   every time the card scrolled back into view. The transition has to
   be redeclared at .dcard.reveal.is-in for the same reason, that rule
   replaces the whole transition list. */
.dcard[data-hot]{
  translate:0 -6px;
  box-shadow:0 40px 80px -20px rgba(0,33,71,.46),
             0 10px 24px -10px rgba(0,33,71,.26);
}
.dcard.reveal.is-in{
  transition:opacity .75s var(--ease), transform .85s var(--ease),
             translate var(--t-mid), box-shadow var(--t-mid);
}
.dcard__img{
  position:absolute; left:0; right:0; top:-7%; bottom:-7%;
  z-index:0; overflow:hidden; will-change:transform;
}
/* the photo eases in a touch under the lift. The wrapper carries the
   parallax transform, so the scale has to live on the img itself. */
.dcard__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow);
}
.dcard[data-hot] .dcard__img img{ transform:scale(1.035); }
.dcard.is-missing .dcard__img img{ display:none; }
.dcard.is-missing .dcard__img{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 14px, transparent 14px 28px);
}
.dcard .ph{ z-index:2; inset:var(--s3) var(--s3) auto; padding-block:var(--s3); }

.dcard__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* The right edge used to sit at .94, which is the section colour itself,
     so the container dissolved into the background. Lighter throughout, and
     the photo now carries the separation. */
  background:
    linear-gradient(to left,
      rgba(0,20,45,.76) 0%,
      rgba(0,20,45,.60) 42%,
      rgba(0,20,45,.32) 74%,
      rgba(0,20,45,.16) 100%);
  transition:opacity var(--t-slow);
}
.dcard[data-hot] .dcard__veil{ opacity:.9; }

.dcard__main{ position:relative; z-index:3; }
.dcard__title{ color:var(--white); font-size:32px; font-weight:500; line-height:1.2; }

/* the whole contact group sits under the title, on the right */
/* One line by default: in a full width container the number and the
   marks beside it read as a single row and leave no dead space at the
   left. The narrow container in the pair below opts out with --stack,
   because side by side there forced the digits onto two lines. */
.dcard__contact{
  /* flex-end, not center: the number block carries a small label above
     the digits, so centring the discs against the whole block floated
     them above the number itself. */
  display:flex; flex-direction:row; align-items:flex-end;
  /* The marks sit next to the number, close enough to read as one
     control rather than two things at opposite ends of the card. The
     left of the container is deliberately left to the photograph. */
  justify-content:flex-start;
  flex-wrap:wrap; gap:var(--s4) var(--s3);
  margin-top:var(--s5);
}
.dcard__contact--stack{
  flex-direction:column; align-items:flex-start;
  justify-content:flex-start;
  gap:var(--s4);
  margin-top:var(--s4);
}
.dcard .bignum__val{ white-space:nowrap; }
.dcard .bignum--major .bignum__val{ font-size:46px; }
.dcard__contact .bignum{ margin-top:0; }
.dcard .bignum__chev{ color:var(--white); }
.dcard .bignum__val{ background-image:linear-gradient(var(--white),var(--white)); }

.dcard__icons{ display:flex; align-items:center; gap:var(--s2); }
/* In the one line layout the discs sit against the foot of the number
   block, and the digits stop short of that foot by their own line box.
   This lifts the discs by that gap so their centres meet the digits.
   Only in the row variant: the stacked container has nothing to line up
   against. */
.dcard__contact:not(.dcard__contact--stack) .dcard__icons{ padding-bottom:5px; }

/* The wide banner carries all of its copy on the right, so the left
   third only needs enough cover to keep the container reading as one
   object. It falls away much further than the standard card gradient
   and lets the photograph through. */
.one .dcard:not(.dcard--half) .dcard__veil{
  background:linear-gradient(to left,
    rgba(0,20,45,.78) 0%,
    rgba(0,20,45,.62) 30%,
    rgba(0,20,45,.34) 55%,
    rgba(0,20,45,.12) 78%,
    rgba(0,20,45,.04) 100%);
}

/* Solid discs, not outlined ones, everywhere on the page. An outlined
   disc only reads when the photo behind it happens to be dark, and it
   vanished on the light picture in רישום וקבלה. A filled white face
   works over any photograph, survives a picture being swapped, and
   makes every action on the page the same control: white face, navy
   mark. .mailrow__go is that disc with a mail glyph in it. */
.dcard__icons a,
.dcard__icons button,
.mailrow__go{
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  background:var(--white);
  border:2px solid var(--white);
  color:var(--navy);
  box-shadow:var(--sh-disc);
  transition:background-color var(--t-mid), border-color var(--t-mid),
             color var(--t-mid), transform var(--t-mid),
             box-shadow var(--t-mid);
}
.dcard__icons a:hover,
.dcard__icons button:hover,
.mailrow:hover .mailrow__go{
  background:var(--sky); border-color:var(--sky); color:var(--navy);
  box-shadow:var(--sh-disc-up);
  transform:translateY(-3px);
}


/* ============================================================
   LEAD PANEL
   ============================================================ */
.scrim{
  position:fixed; inset:0; z-index:110;
  background:rgba(5,25,48,.55);
  opacity:0; transition:opacity var(--t-mid);
}
.scrim.is-open{ opacity:1; }
.scrim[hidden]{ display:none; }

/* hero entrance choreography */
.hero__media{ clip-path:inset(0 0 100% 0); }
.hero__title,.hero__lede{ opacity:0; transform:translateY(26px); }

/* ============================================================
   TABLET  768 - 1024
   ============================================================ */
@media (max-width:1024px){


  /* padding-top clears the header and nothing more, or the copy no longer
     centres against the area the reader sees */
  .hero{
    min-height:620px;
    padding-top:calc(var(--hdr-top) + var(--hdr-h));
    padding-bottom:56px;
  }
  .hero__title{ font-size:60px; }
  .hero__lede{ font-size:18px; max-width:560px; }

  .sec--one{ padding-block:80px; }
  .sec--two{ padding-block:80px 64px; }
  .sec--three{ padding-block:64px 88px; }

  .one{ gap:var(--s4); }
  .one__pair{ gap:var(--s4); }
  .dcard.dcard--half{ min-height:210px; }
  .dcard__title--lead{ max-width:none; }
  .two{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s4); padding-bottom:40px; }
  .two > .pcard:nth-child(2){ margin-top:40px; }
  .pcard{ aspect-ratio:9 / 11; padding:var(--s5); }
  .pcard__title{ font-size:26px; }
  .pcard__line{ font-size:17px; }
  .lines .lines__svg{ width:112%; left:-6%; }

  .dcard{ padding:var(--s5); }
  .dcard__title,.ocard__title{ font-size:26px; }
  .ocard{ padding:var(--s5); gap:var(--s3); }
  .three{ gap:var(--s4); }

  .anchors__item{ padding:12px 20px; font-size:16px; }

  .desk__title,.rail__title,.fcard__title{ font-size:22px; }
}


/* ============================================================
   MOBILE  <= 767
   ============================================================ */
@media (max-width:767px){


  .hero{
    min-height:600px;
    padding-top:calc(var(--hdr-top) + var(--hdr-h));
    padding-bottom:56px;
  }
  .hero__media .ph{ padding-block:var(--s3); gap:2px; }
  .hero__title{ font-size:50px; }
  .hero__lede{ font-size:16px; }
  /* A phone shows the copy over a much smaller slice of the video, and
     this override used to drop to .16 right where the text sits, which
     cancelled the darkening done for desktop. It is now a step heavier
     than desktop everywhere. */
  .hero__veil{
    background:
      linear-gradient(to top,
        rgba(0,20,45,.93) 0%,
        rgba(0,20,45,.72) 26%,
        rgba(0,20,45,.58) 48%,
        rgba(0,20,45,.44) 68%,
        rgba(0,20,45,.30) 100%),
      linear-gradient(rgba(0,20,45,.18), rgba(0,20,45,.18));
  }

  /* 3. the copy sits lower than dead centre on a phone. Centred put it
     high on the screen with the whole lower half of the video empty. */
  .hero__inner{ translate:0 52px; }

  .lines .lines__svg{ opacity:.56; }

  .sec--one{ padding-block:56px; }
  .sec--two{ padding-block:56px 44px; }
  .sec--two .sec__head{ margin-bottom:var(--s5); }
  .sec--three{ padding-block:44px 64px; }

  .one{ gap:var(--s4); }
  /* the pair stacks, same as the two containers further down */
  .one__pair{ grid-template-columns:1fr; gap:var(--s4); }
  .dcard.dcard--half{ min-height:0; }
  .mailrow{ font-size:17px; width:100%; justify-content:space-between; }
  /* At 335px the label is long enough that the content overran the
     button: the 24px side padding collapsed to nothing while the 12px
     gap in the middle stayed, which read as a wide hole and no margins.
     Tighter on both counts so the spacing comes out even. */
  .dcard__foot.btn{
    width:100%;
    justify-content:center;
    padding-inline:var(--s3);
    gap:var(--s1);
    /* the label is long enough at 16px to eat its own padding on a
       335px container, so it steps down one notch here */
    font-size:15px;
  }

  /* The wide banner is 2272px across and lands in a 335px box here, so
     cover throws away most of it. Keep the right hand side, which is
     where the copy sits and where the subject was framed. */
  .one .dcard:not(.dcard--half) .dcard__img img{ object-position:right center; }

  /* the pair stacks: מחשוב first, then פניה בנושא אחר */
  .three{ grid-template-columns:1fr; gap:var(--s5); }
  .ocard{ padding:var(--s5); }
  .ocard__title{ font-size:24px; }
  .ocard__cta{ width:100%; justify-content:center; }

  /* The bar scrolls sideways rather than shrink or wrap. It breaks out of
     .wrap so the track runs edge to edge and the gutter comes back as
     padding inside it, which keeps the first item aligned with the copy
     above and lets the last one run off the screen instead of stopping
     short of it.

     It keeps the glass and the border of the desktop bar rather than
     turning into a flat band, and the leading edge is masked so a
     clipped item reads as "there is more" instead of as broken. */
  .anchors > .wrap{ padding-inline:0; }
  .anchors__list{
    flex-wrap:nowrap;
    width:auto; max-width:none;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    padding:7px var(--gutter);
    border-radius:0;
    border-inline:0;
    border-top:1px solid rgba(255,255,255,.22);
    border-bottom:1px solid rgba(255,255,255,.22);
    box-shadow:none;
    /* No edge mask. A softened or half cut label reads as broken; the
       affordance is the next item sitting partly in view instead. */
    scroll-behavior:smooth;
  }
  .anchors__list::-webkit-scrollbar{ display:none; }
  /* center, not start. The active item is centred by script.js, and a
     start aligned snap point drags it straight back to the edge of the
     track, so the two were pulling against each other. Centre also gives
     the nicer thumb feel at this width. */
  .anchors__item{ scroll-snap-align:center; }
  .anchors__item{
    /* 46px tall, above the 44 minimum, and the text is never compressed */
    padding:13px 18px;
    font-size:16px;
  }

  .desk{ padding:var(--s5); }
  .rail__title,.panel__title{ font-size:20px; }
  /* one size for every section level heading */
  .desk__title,.fcard__title{ font-size:28px; }
  .desk__sub{ font-size:16px; }
  .act{ font-size:17px; }

  .rail__row > a,.rail__row > button{ padding:var(--s4) var(--s2); gap:var(--s3); }
  .rail__sub,.rail__value{ font-size:15px; }
  .rail::before{ display:none; }

  .two{ grid-template-columns:1fr; padding-bottom:0; gap:var(--s3); }
  .two > .pcard:nth-child(2){ margin-top:0; }
  .pcard{ aspect-ratio:9 / 7.4; padding:var(--s4); }
  /* pull the crop window up the source, so the subject drops into view
     instead of being cut off at the top */
  .two > .pcard:nth-child(1) .pcard__img img,
  .two > .pcard:nth-child(2) .pcard__img img{ object-position:center 22%; }
  .pcard__veil{
    background:
      linear-gradient(to top,
        rgba(0,20,45,.90) 0%,
        rgba(0,20,45,.82) 30%,
        rgba(0,20,45,.52) 50%,
        rgba(0,20,45,.18) 70%,
        rgba(0,20,45,0)   100%);
  }
  .pcard__title{ font-size:28px; }
  .pcard__sub{ font-size:16px; margin-top:6px; }
  .pcard__acts{ gap:6px var(--s4); margin-top:var(--s3); }
  .pcard__act{ font-size:16px; }
  .pcard__cta{ margin-top:var(--s3); }
  /* the section is nearly square here, so the artwork needs a much wider
     crop to clear the mask's fade band on the top and bottom edges */
  .lines .lines__svg{ width:150%; left:-25%; }

  .dcard{ padding:var(--s5); gap:var(--s5); }
  .dcard__veil{
    background:linear-gradient(to bottom,
      rgba(0,20,45,.74) 0%, rgba(0,20,45,.60) 50%, rgba(0,20,45,.70) 100%);
  }
  /* The wide banner carries a lighter, side to side gradient on desktop
     so the left of a 1136px container stays open. There is no left half
     to open up at 335px, and it left the banner visibly paler than the
     two containers under it, so it takes the same cover as they do. */
  .one .dcard:not(.dcard--half) .dcard__veil{
    background:linear-gradient(to bottom,
      rgba(0,20,45,.74) 0%, rgba(0,20,45,.60) 50%, rgba(0,20,45,.70) 100%);
  }

  /* לייעוץ לאחר הרישום: the subject stands at the far left of the source
     file, so the crop takes the left slice. object-position picks which
     part of the picture survives, not where it is placed, so a higher
     percentage walks the frame away from her instead of towards her. */
  .one__pair > .dcard:last-child .dcard__img img{
    object-position:left center;
  }
  /* 24px, and the words are allowed to break. הרשמה ללימודי תואר ראשון
     is a single long line that ran past the edge of a 335px container. */
  .dcard__title{ font-size:24px; overflow-wrap:break-word; }
  .dcard .bignum__val{ font-size:38px; }
  .dcard .bignum__label{ font-size:17px; }
  .dcard__contact{ flex-direction:column; align-items:flex-start; gap:var(--s4); }
  .dcard__icons{ padding-bottom:0; }
  .dcard__icons a,
  .dcard__icons button{ width:44px; height:44px; }
}