/* =========================================================
   DOWNLOADS.CSS
   Built from Figma node 23:158 "Downloads" (file
   FXmifvLSP3sT25kYn7hTmS), a 1140x2861 frame, read through
   get_metadata + get_design_context rather than off the
   screenshot. Every number below is that frame's own
   coordinate, converted to a position inside its band.

   Frame geometry, same as the rest of the site:
     1140 total = 1053 content zone + 87 rail.

   Band stack, as y-ranges in the frame:
     header      0    -  79
     01 hero     79   - 578   photo + wash          rail #FFFFFF
     02 search   578  - 814   #FCFBFA               rail #F6F5F3
     03 catgs    814  - 1573  #FAF9F9               rail #F1EFEE
     04 popular  1573 - 2106  #FCFBFA               rail #E7E7E6
        cta      2106 - 2241  #F2F1F1               (no rail)
        stats    2241 - 2416  #FCFBFA               (no rail)
        closing  2416 - 2811  photo                 (no rail)
        footer   2811 - 2861  #F9F8F6

   Per the layout system: every <section> runs the FULL viewport
   width and carries its own background; only the inner wrapper
   is capped at 1140 and centred. The rail is an absolute overlay
   on each section's physical right edge.
   ========================================================= */

/* ---------------------------------------------------------
   SHARED
   The blue/red rule, identical in spec to the one on the
   product pages: 67.6px wide, 1.5px tall, blue 70 / red 30.
   Figma puts both instances of it here at the same width
   (67.595), so the same element serves every band.
   --------------------------------------------------------- */
.dl-rule {
  display: flex;
  width: 67.6px;
  height: 1.5px;
  /* physical, so the RTL direction cannot flip it: the comp
     puts red on the physical RIGHT in every instance. */
  margin-left: auto;
  margin-right: 0;
}
.dl-rule__segment--red  { flex: 30; background-color: #CC2F3A; }
.dl-rule__segment--blue { flex: 70; background-color: #005E8E; }

.dl-inner {
  position: relative;
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
}

/* =========================================================
   01 — HERO   (frame y79-578, 499 tall)
   Figma composes this as a photo spanning the whole content
   zone with a wash gradient above it; the light panel the text
   sits on is that wash, not a separate block. So the media is
   inset:0 on the section and the text rides above both.
   ========================================================= */
.dl-hero {
  position: relative;
  height: 499px;
  /* the tone the wash settles to on the right; also the safety
     colour if the photo fails to load. */
  background-color: #F1EDED;
  overflow: hidden;
}
.dl-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* The photo keeps its own proportions -- scaled by HEIGHT only, so it is
   never stretched or cropped -- and is pinned to the physical right. On a
   window wider than the photo the strip left over is filled with the
   photo's own outermost wall column, sampled as a vertical gradient, and
   the photo's left edge dissolves into it. Same approach as the product
   hero. */
.dl-hero__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
/* Each side continues its OWN edge column of the photo, sampled as a
   10-stop vertical gradient. A single flat colour was too far off: the
   left edge is sky over sea over a dark tree line over floor, and a mean
   of it reads as a saturated blue block. This image's edges are uniform
   ACROSS, so extruding the column sideways is exactly right. The 50%
   split is always hidden behind the photo. */
/* Two layers each. Underneath, the photo's own edge column, so the colour
   at the join matches to within a level or two. On top, a calm flat tone
   that is transparent AT the join and opaque by the screen edge -- without
   it the dark tree line at the left edge extrudes sideways as a smear. */
.dl-hero__fill--left {
  left: 0;
  right: 50%;
  background-image:
    linear-gradient(to left, rgba(230,238,248,0) 0, rgba(230,238,248,0.55) 45%, rgba(230,238,248,0.92) 100%),
    linear-gradient(to bottom, rgb(183,216,252) 5%, rgb(191,221,253) 15%, rgb(216,234,253) 25%, rgb(224,238,253) 35%, rgb(244,246,251) 45%, rgb(233,230,228) 55%, rgb(103,96,79) 65%, rgb(88,81,63) 75%, rgb(113,104,94) 85%, rgb(234,224,221) 95%);
}
.dl-hero__fill--right {
  left: 50%;
  right: 0;
  background-image:
    linear-gradient(to right, rgba(240,231,226,0) 0, rgba(240,231,226,0.55) 45%, rgba(240,231,226,0.92) 100%),
    linear-gradient(to bottom, rgb(164,140,123) 5%, rgb(159,134,114) 15%, rgb(177,156,142) 25%, rgb(181,163,154) 35%, rgb(203,187,179) 45%, rgb(242,227,220) 55%, rgb(242,227,219) 65%, rgb(244,229,221) 75%, rgb(222,202,192) 85%, rgb(206,185,173) 95%);
}
.dl-hero__image {
  position: absolute;
  top: 0;
  /* centred in the band. `transform` is not affected by the RTL
     direction, so this holds physically at every width. */
  left: 50%;
  /* shifted 220px left of centre so the interior wall -- not the window --
     sits behind the text block, which is what makes it readable. */
  transform: translateX(calc(-50% - 220px));
  height: 100%;
  width: auto;
  max-width: none;
  /* a 320px dissolve on BOTH vertical edges now that the photo is
     centred, so it melts into the flat tone on either side. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 320px, #000 calc(100% - 320px), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 320px, #000 calc(100% - 320px), transparent 100%);
}
/* Stops are anchored to the band's CENTRE, not to percentages of
   it, so the fade reaches full strength on the same pixel column
   at every viewport width -- otherwise the text panel would
   shrink and grow with the window. Measured off the comp: the
   photo is still unwashed at centre+130 and the panel is flat
   from about centre+430 on. */
/* A plain white veil over the whole band, under the wash. The comp reads
   about 16 levels brighter than the raw photo across the picture area. */
.dl-hero__veil {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.21);
  pointer-events: none;
}
.dl-hero__wash {
  position: absolute;
  inset: 0;
  /* measured from the RIGHT edge now, for the same reason as the text
     above: the panel must stay under the words at every width. The text
     block runs from 134px to 465px in from that edge. */
  background: linear-gradient(to left,
    rgba(244, 241, 240, 0.93) 0,
    rgba(244, 241, 240, 0.88) 570px,
    rgba(244, 241, 240, 0) 850px);
  pointer-events: none;
}
.dl-hero__inner {
  position: relative;
  height: 100%;
  /* NOT capped at 1140 like the rest of the page. 134 = 1140 - 1006, so at
     the comp's own width the text lands exactly where Figma puts it, and
     on a wider window it stays that same 134px from the screen's right
     edge instead of drifting into the middle. */
  max-width: none;
  /* 202 = 87 (the rail) + 115: the text's right edge keeps a 115px gap
     from the rail itself, at every window width. */
  padding-inline-start: 202px;
}
.dl-hero__content {
  /* the widest line in this block is the 331px lede. */
  max-width: 331px;
  margin-inline-start: 0;
  margin-inline-end: auto;
  padding-block-start: 94px;   /* eyebrow box lands on y177 of the frame */
}
.dl-hero__eyebrow {
  margin: 0;
  font-family: var(--font-english);
  font-weight: var(--font-weight-regular);
  font-size: 8px;
  letter-spacing: 0.2em;      /* Figma: 1.6px on 8px */
  line-height: 12px;
  color: #000000;             /* Figma Fill 000000, as on the product pages */
  text-align: start;
}
.dl-hero__rule { margin-block-start: 8px; }   /* rule on frame y193 */
.dl-hero__title {
  margin: 45px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 64px;
  line-height: 57px;
  color: #000000;
}
.dl-hero__lede {
  margin: 46px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 15px;
  line-height: 21px;
  color: #3C3C3C;
}

/* =========================================================
   02 — SEARCH   (frame y578-814, 236 tall)
   One field, 663px wide, its right edge on the frame's x888.
   The magnifier sits at the field's inline START, which in RTL
   is the physical right, with the placeholder to its left.
   ========================================================= */
.dl-search {
  position: relative;
  height: 236px;
  background-color: #FCFBFA;
}
.dl-search__inner { height: 100%; padding-inline-start: 87px; }
.dl-search__field {
  display: flex;
  align-items: center;
  gap: 42px;                    /* icon x865 to placeholder right edge x823 */
  width: 663px;
  /* 165 = 1053 - 888: pulls the field in from the content zone's
     right edge to the comp's x888. */
  margin-inline-start: 165px;
  padding-block: 96px 15px;     /* underline lands on the frame's y712 */
  border-bottom: 1px solid var(--color-line);
}
.dl-search__icon {
  flex: none;
  width: 23px;
  height: 23px;
  color: #707070;
}
/* A real, typeable field. It carries no chrome of its own -- the rule
   under it belongs to .dl-search__field -- so it looks exactly like the
   comp's static placeholder until someone types in it. */
.dl-search__input {
  flex: 1;
  min-width: 0;                 /* or the input's intrinsic width wins */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  line-height: 23px;
  color: #3C3C3C;
  text-align: start;            /* inline-start = physical right here */
}
.dl-search__input::placeholder { color: #707070; opacity: 1; }
.dl-search__input:focus { outline: none; }
.dl-search__field:focus-within { border-bottom-color: #005E8E; }
/* Safari draws its own clear button on type=search */
.dl-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* shown when a search matches nothing in that list */
.dl-empty {
  margin: 28px 148px 0 78px;
  font-family: var(--font-hebrew);
  font-size: 15px;
  color: #707070;
}

/* =========================================================
   03 — CATEGORIES   (frame y814-1573, 759 tall)
   ========================================================= */
.dl-categories {
  position: relative;
  height: 759px;
  background-color: #FAF9F9;
}
.dl-section__head {
  /* 112 = 1140 - 1028, the x both headings on this page share. */
  padding-inline-start: 112px;
  /* the heading now leads and the rule follows it, so the block's
     own top IS the heading's top (frame y870 = the band's y56). */
  padding-block-start: 56px;
}
.dl-section__heading {
  margin: 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 36px;
  line-height: 43px;
  color: #000000;
}
/* Under the word, flush with its right edge and 21px below its ink --
   both measured off the screenshot Yael marked up. */
.dl-section__head .dl-rule { margin-block-start: 20px; }

/* The list sits on its own margins, NOT on the head's padding:
   the comp runs its rows from x78 to x992, wider on both sides
   than the heading above them. */
.dl-list {
  list-style: none;
  margin: 24px 148px 0 78px;    /* physical: rows run x78..x992;
                                   top pulled in so the first divider still
                                   lands on the comp's y1036 now that the
                                   rule occupies space under the heading. */
  padding: 0;
}
.dl-list__item {
  display: flex;
  align-items: center;
  height: 77px;                 /* dividers are a uniform 77px apart */
  /* dotted, not solid -- confirmed by magnifying the comp. */
  border-bottom: 1px dotted #C4C4C4;
}

/* THE FILTER COULD NEVER HIDE A ROW.

   js at the foot of downloads.html sets row.hidden = true on every row
   that does not match what is typed in the search field. The browser's
   own stylesheet turns that attribute into display:none -- but a
   stylesheet the page itself loads always beats the browser's, and the
   rule above sets display:flex on this element unconditionally. So the
   attribute landed, and the row stayed exactly where it was.

   .dl-empty needed no such rule: it is a <p> that sets no display of its
   own, so [hidden] reached it untouched. These two are the only rows the
   filter ever touches. */
.dl-list__item[hidden],
.dl-doc[hidden] {
  display: none;
}
.dl-list__number {
  flex: none;
  width: 76px;                  /* number ink ends on x992, label on x916 */
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: #656565;
  text-align: start;
  direction: ltr;
  /* the element carries its own ltr, so `start` above would flip:
     pin it physically instead. */
  text-align: right;
}
.dl-list__label {
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-emphasis);
  font-size: 16px;
  color: #3C3C3C;
}
.dl-list__arrow {
  /* pushed to the far physical left of the row */
  margin-inline-start: auto;
  width: 13px;
  height: 9px;
  color: #3C3C3C;
}

/* =========================================================
   04 — POPULAR DOCUMENTS   (frame y1573-2106, 533 tall)
   Same row rhythm as the categories list but 81px apart and
   929px wide, with four columns: file icon, document name,
   PDF + size, and the download control.
   ========================================================= */
.dl-popular {
  position: relative;
  height: 533px;
  background-color: #FCFBFA;
}
.dl-docs {
  list-style: none;
  margin: 59px 133px 0 78px;    /* physical: rows run x78..x1007;
                                   same top adjustment as .dl-list, so the
                                   first divider stays on the comp's y1834. */
  padding: 0;
}
.dl-doc {
  display: flex;
  align-items: center;
  height: 81px;
  border-bottom: 1px dotted #C4C4C4;
}
.dl-doc__icon {
  flex: none;
  /* the comp lets the icon overhang its row's right end by 5px
     (icon x974-1012 against a divider that stops on x1007). */
  margin-inline-start: -5px;
  width: 38px;
  height: 38px;
  color: #3C3C3C;
}
.dl-doc__name {
  /* takes the slack, so the columns to its left keep the comp's
     fixed x whatever the document is called. */
  flex: 1;
  margin: 0 28px 0 0;
  font-family: var(--font-english);
  font-weight: var(--font-weight-light);
  font-size: 20px;
  color: #000000;
  direction: ltr;
  text-align: right;            /* physical: the element is ltr */
}
.dl-doc__meta {
  flex: none;
  margin: 0;
  /* PHYSICAL left on purpose. This element carries direction:ltr
     below, and a logical property resolves against the element's
     OWN direction -- margin-inline-end here landed on the RIGHT
     and shoved the column the wrong way. 167 = the gap the comp
     leaves between the size column (x372) and the download
     control (x205). */
  margin-left: 167px;
  font-family: var(--font-english);
  font-weight: var(--font-weight-light);
  font-size: 16px;
  color: #656565;
  direction: ltr;
  white-space: nowrap;
}
.dl-doc__meta-dot {
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 6px;
  border-radius: 50%;
  background-color: #656565;
  vertical-align: middle;
}
.dl-doc__get {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: none;
  /* 64 = 142 - 78: the control's own left edge inside the row. */
  margin-inline-end: 64px;
  font-family: var(--font-hebrew);
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}
.dl-doc__get-icon { width: 9px; height: 20px; flex: none; }

/* =========================================================
   CTA   (frame y2106-2241, 135 tall)
   ========================================================= */
.dl-cta {
  position: relative;
  height: 135px;
  background-color: #F2F1F1;
}
.dl-cta__inner {
  display: flex;
  align-items: center;
  height: 100%;
  /* 132 = 1140 - 1008, the heading's own right edge. */
  padding-inline-start: 132px;
  padding-inline-end: 155px;
}
.dl-cta__text { margin-inline-end: auto; }
.dl-cta__heading {
  margin: 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 24px;
  line-height: 43px;
  color: #000000;
}
.dl-cta__body {
  margin: 12px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 15px;
  line-height: 19px;
  color: #3C3C3C;
}
.dl-cta__link {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-emphasis);
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}
.dl-cta__link-icon { width: 29px; height: 8px; flex: none; }

/* =========================================================
   STATS   (frame y2241-2416)
   Physically left to right the comp reads 30+, 200+, 15, 100%,
   so the row is row-reverse: the DOM keeps the sensible order
   and the first item still lands on the physical left.
   ========================================================= */
/* --dl-stats-air is added at BOTH ends: the band grows around
   the figures without touching the rhythm inside it. Everything
   measured from the band's top -- the item's own padding and the
   separator strokes -- carries the same offset, so the block
   stays exactly where it was relative to itself. */
.dl-stats {
  position: relative;
  --dl-stats-air: 50px;
  height: calc(175px + var(--dl-stats-air) * 2);
  background-color: #FCFBFA;
}
/* A plain row, not row-reverse. The comp's own figures ran
   left to right, but the four facts here are different ones and
   they read as a sentence -- years, then projects, then
   countries, then patents. A plain row in this RTL document
   puts the FIRST dom child on the physical right, which is
   where the reading starts, and makes this band read exactly
   like the Contact page's. */
.dl-stats__inner {
  display: flex;
  height: 100%;
  padding-inline-start: 87px;
}
.dl-stats__item {
  position: relative;
  flex: 1;
  text-align: center;
  padding-block-start: calc(42px + var(--dl-stats-air));
}
/* The comp's separators are short strokes, 81px tall and centred
   in the band (frame y2279-2360), not full-height borders. They
   are drawn on the item's PHYSICAL right, which in this
   row-reverse row is the side facing the previous item. */
.dl-stats__item::before {
  content: "";
  position: absolute;
  top: calc(38px + var(--dl-stats-air));
  right: 0;
  width: 1px;
  height: 81px;
  background-color: var(--color-line);
  transform-origin: top center;
}
/* A plain row puts the FIRST dom child on the physical right, so
   that is now the one whose stroke would dangle off the end. */
.dl-stats__item:first-child::before { content: none; }
.dl-stats__number {
  margin: 0;
  font-family: var(--font-english);
  font-weight: var(--font-weight-light);
  /* Figma's own text node claims 32px, but it renders in a
     substituted font; measuring the comp gives 34px of figure ink,
     which is a 48px face. The render is the truth here. */
  font-size: 50px;
  line-height: 48px;
  color: #000000;
  /* "30+" is a number followed by a NEUTRAL character. Left to
     the surrounding RTL paragraph, bidi reorders it to "+30" --
     which it did. Isolate the run in its own ltr context. */
  direction: ltr;
  unicode-bidi: isolate;
  /* Fixed-width figures, so a digit changing during the count-up
     cannot nudge the number sideways. The <p> is a full-width
     block in a centred item anyway, but this keeps the figures
     themselves from breathing as they run. */
  font-variant-numeric: tabular-nums;
  transition: opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   THE FIGURES' REVEAL
   The same behaviour the Contact band has, driven by the same
   js/stats-reveal.js: .is-armed goes on once the script is
   certainly running, .is-revealed the first time a third of the
   band is in view, and never again.
   ========================================================= */
[data-stats].is-armed .dl-stats__item::before {
  transform: scaleY(0);
}

[data-stats].is-armed.is-revealed .dl-stats__item::before {
  transform: scaleY(1);
  transition: transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--stat-delay, 0ms);
}

/* A shade lighter while the number is still moving; it settles
   to full as soon as it lands on its value. */
.dl-stats__number.is-counting {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  [data-stats].is-armed .dl-stats__item::before { transform: scaleY(1); }
  .dl-stats__number { transition: none; }
  .dl-stats__number.is-counting { opacity: 1; }
}
.dl-stats__label {
  margin: 13px 0 0;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-regular);
  font-size: 13px;
  line-height: 18px;
  color: #000000;
}

/* =========================================================
   CLOSING PHOTO   (frame y2416-2811, 395 tall)
   Full-bleed, no rail -- the rail stops after item 04.
   ========================================================= */
.dl-closing {
  height: 395px;
  overflow: hidden;
  background-color: #DCE3EA;
}
.dl-closing__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------------------------------------------------------
   CLOSING PHOTO — superseded by the site footer's own
   --------------------------------------------------------- */

/* The rebuilt site footer (see footer.css) now carries a
   full-bleed closing photograph on every page, so this page's
   own closing photo would stack a second architectural image
   directly above it. It is hidden rather than deleted — the
   <section class="dl-closing"> markup and the image file are
   both still in place, so removing these three lines brings it
   straight back. */
.dl-closing {
  display: none;
}