/* ============================================================
   TECHNION - SHARED CORE
   Canonical copy: _template/base.css. This file is a copy, and it
   must stay byte identical to it. Every page folder ships its own
   copy so the folder can be deployed on its own, see HANDOFF.md.

   Loads before the page stylesheet. Tokens follow design-system.md
   (technion.ac.il/new-home-page).

   What lives here: the design tokens, the reset, the header and
   footer reproduced from the live site, buttons, the one icon
   scale, the form kit, the floating contact menu, the lead panel,
   the reveal system and the motion policy.

   What does NOT live here: anything a single page owns. A page
   stylesheet loads after this file and may override it.

   Palette rule: no grey anywhere. Every hairline, secondary text,
   icon and surface is either white or a brand colour.

   Shape rule:
     interactive  -> pill (999px)
     surfaces     -> 16px
     inputs/small -> 8px

   Icon rule: one family, stroke-width 1.7, round caps and joins.

   Motion policy: entrances are deliberately kept under
   prefers-reduced-motion, only ?motion=off gives a static page.
   See HANDOFF.md before changing that.
   ============================================================ */

/* ============================================================
   Technion - contact page
   Tokens follow design-system.md (technion.ac.il/new-home-page)

   Palette rule for this page: no grey anywhere. Every hairline,
   secondary text, icon and surface is either white or a brand
   colour. Light surfaces use the pale blue family, dark surfaces
   use navy tints, and #C59514 is the accent on navy, exactly as
   on the live home page.

   Shape rule:
     interactive  -> pill (999px)
     surfaces     -> 16px
     inputs/small -> 8px

   Icon rule: one family, stroke-width 1.7, round caps and joins.
   ============================================================ */

:root{
  /* brand */
  --navy:        #002147;
  --navy-ink:    #02244A;
  --navy-3:      #051930;
  --navy-deep:   #0D1838;
  --red:         #EA094B;
  --red-dark:    #C70840;

  /* gold accent, taken from the home page section rules */
  --gold:        #C59514;
  --gold-lift:   #E0B441;

  /* blues */
  --sky:         #E8F3FF;
  --blue:        #3390FF;
  --blue-mid:    #346DB2;
  --pale:        #F9FAFF;
  --pale-2:      #E6EBFF;
  --pale-3:      #DFE7F9;

  /* on light */
  --white:       #FFFFFF;
  --body:        #02244A;
  --muted:       #346DB2;
  --line:        #DFE7F9;

  /* on navy */
  --on-navy:     #FFFFFF;
  --on-navy-2:   #C3D4EE;
  --on-navy-line:#2C4770;
  --on-navy-fill:#062A52;

  /* spacing scale 8 / 12 / 16 / 20 / 24 / 32 / 40 */
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 20px; --s5: 24px; --s6: 32px; --s7: 40px;

  --wrap: 1200px;
  --gutter: 32px;

  --r-pill: 999px;
  --r-card: 16px;
  --r-in: 8px;

  --sh-card: 0 10px 30px rgba(0,33,71,.14);
  --sh-soft: 0 4px 16px rgba(0,33,71,.08);
  --sh-bar:  0 0 16px rgba(0,0,0,.24);
  /* same idea as the header pill, scaled down for the round elements */
  --sh-disc: 0 0 14px rgba(0,33,71,.22);
  --sh-disc-up: 0 0 20px rgba(0,33,71,.30);

  --ease: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s var(--ease);
  --t-mid:  .32s var(--ease);
  --t-slow: .6s var(--ease);

  --hdr-h: 74px;
  --hdr-top: 30px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }

body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:'Noto Sans Hebrew','Noto Sans',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.6;
  text-align:right;
  overflow-x:hidden;
}
h1,h2,h3{ margin:0; color:var(--navy); font-weight:500; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
img{ max-width:100%; display:block; }
svg.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.vh{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* one icon scale for the whole page */
.ico{ width:22px; height:22px; flex:none; }
.ico--xs{ width:15px; height:15px; }
.ico--sm{ width:18px; height:18px; }
.ico--md{ width:26px; height:26px; }
.ico--lg{ width:30px; height:30px; }
/* the chevron reproduced from the home page: 8.3 : 16 inside a 24 grid */
.ico--chev{ width:20px; height:20px; }

:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed; top:var(--s1); right:var(--s1); z-index:200;
  transform:translateY(-200%);
  background:var(--navy); color:var(--white);
  padding:var(--s2) var(--s4); border-radius:var(--r-pill);
  font-size:16px; font-weight:500;
  transition:transform var(--t-fast);
}
.skip-link:focus{ transform:translateY(0); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  border-radius:var(--r-pill);
  padding:11px 24px;
  font-size:16px; font-weight:500; line-height:1.5;
  white-space:nowrap;
  transition:background-color var(--t-fast), color var(--t-fast),
             border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn .ico{ transition:transform var(--t-mid); }
.btn:hover .ico{ transform:translateX(-4px); }
.btn:active{ transform:translateY(1px); }

.btn--primary{ background:var(--red); color:var(--white); }
.btn--primary:hover{ background:var(--red-dark); }

.btn--gold{ background:var(--gold); color:var(--navy); }
.btn--gold:hover{ background:var(--gold-lift); }

/* white pill, brand navy label */
.btn--ivory{ background:var(--white); color:var(--navy); font-weight:600; }
.btn--ivory:hover{ background:var(--sky); }

.btn--solid{ background:var(--white); color:var(--navy); }
.btn--solid:hover{ background:var(--sky); }

.btn--navy{ background:var(--navy); color:var(--white); }
.btn--navy:hover{ background:var(--navy-ink); box-shadow:0 8px 20px rgba(0,33,71,.28); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{ position:fixed; inset-inline:0; top:var(--hdr-top); z-index:100; }

.hdr__bar{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  min-height:var(--hdr-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5);
  background:var(--white);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-bar);
  padding:14px 30px;
  transition:box-shadow var(--t-mid);
}
.hdr.is-stuck .hdr__bar{ box-shadow:0 6px 24px rgba(0,33,71,.22); }

.hdr__logo img{ width:140px; height:auto; }

.hdr__menu{ display:flex; align-items:center; gap:var(--s5); }
.hdr__menu a{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  font-size:16px; color:var(--navy-ink);
  padding-block:6px;
  transition:color var(--t-fast);
}
.hdr__menu a::after{
  content:''; position:absolute; inset-inline:0; bottom:0;
  height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-mid);
}
.hdr__menu a:hover{ color:var(--navy); }
.hdr__menu a:hover::after{ transform:scaleX(1); }
.hdr__menu .ico{ transition:transform var(--t-fast); }
.hdr__menu a:hover .ico{ transform:translateY(2px); }

.hdr__side{ display:flex; align-items:center; gap:var(--s3); }
.hdr__icon,.hdr__lang{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--navy-ink); font-size:16px;
  padding:6px; border-radius:var(--r-pill);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.hdr__icon:hover,.hdr__lang:hover{ background:var(--sky); color:var(--navy); }

.hdr__burger{ display:none; width:40px; height:40px; position:relative; }
.hdr__burger span{ pointer-events:none; }
.hdr__burger span{
  position:absolute; inset-inline:9px; height:2px; background:var(--navy);
  border-radius:2px; transition:transform var(--t-mid), opacity var(--t-fast);
}
.hdr__burger span:nth-child(1){ top:13px; }
.hdr__burger span:nth-child(2){ top:19.5px; }
.hdr__burger span:nth-child(3){ top:26px; }

/* ============================================================
   ACCESSIBILITY WIDGET
   ============================================================ */
/* physical left edge on purpose, matching the live site */
.a11y{
  position:fixed; left:0; top:150px; z-index:90;
  display:grid;
  background:var(--white);
  border:1px solid var(--line); border-left:0;
  border-radius:0 var(--r-in) var(--r-in) 0;
  box-shadow:var(--sh-soft);
  overflow:hidden;
}
.a11y__btn{
  width:40px; height:40px;
  display:grid; place-items:center; color:var(--navy);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.a11y__btn + .a11y__btn{ border-top:1px solid var(--line); }
.a11y__btn:hover,.a11y__btn[aria-pressed="true"]{ background:var(--navy); color:var(--gold); }

/* high contrast mode */
body.hc{ background:#000; color:#fff; }
body.hc .hdr__bar,body.hc .fcard,
body.hc .panel,body.hc .a11y,body.hc .rail-fixed__item{ background:#000; color:#fff; border:1px solid #fff; }
body.hc h1,body.hc h2,body.hc h3,body.hc .hdr__menu a{ color:#fff; }
body.hc .sec--one,body.hc .dark,body.hc .ftr,body.hc .hero__veil{ background:#000; }
body.hc .hero__media > img,body.hc .lines{ display:none; }
body.big{ font-size:20px; }

/* media placeholder (used anywhere an asset is not supplied yet) */
.ph{
  position:absolute; inset:var(--s3);
  display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:2px dashed rgba(255,255,255,.55);
  border-radius:var(--r-in);
  color:var(--white);
  text-align:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px);
}
.ph__kind{ font-size:14px; font-weight:600; letter-spacing:.08em; color:var(--gold); }
.ph__file{ font-size:20px; font-weight:500; direction:ltr; }
.ph__path,.ph__dims{ font-size:14px; direction:ltr; color:var(--on-navy-2); }

/* ============================================================
   SECTION SHELL
   Heading + 1px #C59514 rule, reproducing the home page pattern
   (full container width, 10px under the heading block).
   ============================================================ */
.sec{ position:relative; }

.sec__head{
  position:relative;
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5);
  padding-bottom:10px;
  margin-bottom:var(--s7);
}
.sec__head::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
}
.sec__head.is-in::after{
  transform:scaleX(1);
  transition:transform .9s var(--ease) .14s;
}
.sec__title{ font-size:48px; font-weight:400; line-height:1.05; }
.sec__head--light .sec__title{ color:var(--white); }

/* ============================================================
   SHARED - big phone number, plain inline action
   ============================================================ */
.bignum{ display:grid; gap:4px; margin-top:var(--s5); justify-items:start; }
.bignum__label{ font-size:16px; font-weight:400; color:var(--on-navy-2); }
/* the chevron is centred on the number, and every chevron on the
   page shares this alignment */
.bignum__line{ display:flex; align-items:center; gap:var(--s2); }
.bignum__val{
  color:var(--white);
  font-size:44px; font-weight:600; line-height:1.1; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; unicode-bidi:isolate;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat; background-position:100% 100%;
  background-size:0 2px;
  padding-bottom:6px;
  transition:background-size var(--t-slow);
}
.bignum__chev{ color:var(--gold); transition:transform var(--t-mid); }
.bignum:hover .bignum__val,.bignum:focus-visible .bignum__val{ background-size:100% 2px; }
.bignum:hover .bignum__chev{ transform:translateX(-8px); }
.bignum--major .bignum__val{ font-size:52px; }

/* the phone desk keeps everything white, no accent colour */
.bignum--white .bignum__chev{ color:var(--white); }
.bignum--white .bignum__val{ background-image:linear-gradient(var(--white),var(--white)); }

/* ------------------------------------------------------------
   Icon loops.
   Each mark carries one small idea of its own: the envelope seals,
   the pencil writes a line, the form fills its rows.

   These are continuous loops, not replays. With stroke-dasharray:1 on a
   path normalised to pathLength:1 the dash pattern repeats every 2 units,
   so animating stroke-dashoffset from 1 to -1 lands exactly one period on
   and the motion carries straight through the loop point. Linear timing
   keeps the speed constant across the seam; any easing would dwell there
   and read as a restart. Colour still comes from currentColor, so the
   negative hover is untouched.
   The loop only starts once the row has arrived, and parks itself
   while the strip is off screen, see script.js.
   ------------------------------------------------------------ */
.icoa__draw,.icoa__rule,.icoa__l1,.icoa__l2{
  stroke-dasharray:1;
  stroke-dashoffset:0;
}


/* form revealed in place under the container, never a modal */
/* The revealed form is padded on all four sides, so it reads as a block
   inside the section rather than something wedged between components. */
.fcard-wrap{
  overflow:hidden;
  display:grid; grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .55s var(--ease), opacity .45s var(--ease);
}
.fcard-wrap.is-open{ grid-template-rows:1fr; opacity:1; }
.fcard-wrap > .fcard{ min-height:0; margin:var(--s7) 0; }

/* The strip is white now, so a white panel would vanish into it. The card
   takes the pale sky tint and keeps its fields white, which reads the same
   way round as before. */
.fcard{
  background:var(--sky);
  border:1px solid var(--pale-3);
  border-radius:var(--r-card);
  padding:var(--s6);
  box-shadow:0 20px 48px -20px rgba(0,33,71,.30);
}
.fcard:focus-visible{ outline:3px solid var(--blue); outline-offset:4px; }
/* clears the fixed header when the CTA scrolls the form into view */
.fcard{ scroll-margin-top:calc(var(--hdr-top) + var(--hdr-h) + var(--s5)); }
.fcard__title{ color:var(--navy); font-size:26px; font-weight:600; margin-bottom:var(--s5); }

/* ============================================================
   FORMS
   ============================================================ */
.form{ display:grid; gap:var(--s4); }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.form__legend{ color:var(--navy); font-size:16px; font-weight:600; }
.form__legend--sub{ margin-top:var(--s2); }

.field{ display:grid; gap:var(--s1); margin:0; border:0; padding:0; min-width:0; }
.field label{ font-size:16px; font-weight:500; color:var(--navy); }
.field input[type=text],
.field input[type=tel],
.field input[type=email],
.field select{
  width:100%;
  height:50px;
  padding:0 var(--s4);
  font:inherit; font-size:16px;
  color:var(--navy);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  appearance:none;
}
.field input:hover,.field select:hover{ border-color:var(--blue-mid); }
.field input:focus,.field select:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(51,144,255,.18);
  background:var(--white);
}
.field:focus-within > label{ color:var(--blue-mid); }
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:var(--red);
  box-shadow:0 0 0 4px rgba(234,9,75,.14);
}
.field input:disabled,.field select:disabled{ background:var(--pale-2); color:var(--blue-mid); cursor:not-allowed; }
.field__hint{ font-size:14px; color:var(--muted); }
.field__err{ font-size:14px; color:var(--red); }
.field__err:empty{ display:none; }

.select{ position:relative; display:block; }
/* physical left, so the chevron does not flip to the right in RTL */
.select .ico{ position:absolute; left:var(--s3); top:50%; transform:translateY(-50%); pointer-events:none; color:var(--navy); }
.select select{ padding-left:44px; }

/* segmented radio group */
.seg{ display:flex; flex-wrap:wrap; gap:var(--s1); }
.seg__opt{ position:relative; }
.seg__opt input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.seg__opt label{
  display:block; cursor:pointer;
  padding:9px 20px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--white);
  font-size:16px; font-weight:400; color:var(--navy);
  transition:background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.seg__opt input:hover + label{ border-color:var(--blue-mid); }
.seg__opt input:focus-visible + label{ outline:3px solid var(--blue); outline-offset:3px; }
.seg__opt input:checked + label{ background:var(--navy); border-color:var(--navy); color:var(--white); }

.check{ display:grid; grid-template-columns:auto 1fr; align-items:start; gap:var(--s2); margin:var(--s2) 0 0; }
.check input{
  width:22px; height:22px; margin:1px 0 0;
  accent-color:var(--navy);
  border-radius:4px; cursor:pointer;
}
.check label{ font-size:16px; color:var(--navy); cursor:pointer; }
.check .field__err{ grid-column:1 / -1; }

/* left edge of the form, RTL end */
.form__submit{ justify-self:end; margin-top:var(--s2); }
.form__submit[disabled]{ opacity:.55; cursor:wait; }
.form__status{ font-size:16px; color:var(--muted); }
.form__status:empty{ display:none; }

/* form panel treatment (part 3) */
.fcard .form__legend{ color:var(--navy); }
.fcard .field label{ color:var(--navy); font-weight:600; }
.fcard .field:focus-within > label{ color:var(--blue-mid); }
/* rounded, light, not heavy */
.fcard .field input,.fcard .field select{
  background:var(--white);
  border:1px solid rgba(0,33,71,.34);
  color:var(--navy);
}
.fcard .field input::placeholder{ color:var(--muted); }
.fcard .field input:hover,.fcard .field select:hover{
  background:var(--pale); border-color:rgba(0,33,71,.6);
}
.fcard .field input:focus,.fcard .field select:focus{
  border-color:var(--navy); border-width:1.5px; background:var(--white);
  box-shadow:0 0 0 4px rgba(51,144,255,.22);
}
.fcard .select .ico{ color:var(--navy); }
.fcard .field__hint{ color:var(--muted); }
.fcard .field__err{ color:var(--red); }
.fcard .seg__opt label{ background:var(--white); border:1px solid rgba(0,33,71,.34); color:var(--navy); }
.fcard .seg__opt input:hover + label{ background:var(--pale); border-color:rgba(0,33,71,.6); }
.fcard .seg__opt input:checked + label{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.fcard .form__status{ color:var(--muted); }
.fcard select option{ color:var(--navy); }

/* ============================================================
   FOOTER - reproduced from the live home page
   ============================================================ */
.ftr{
  position:relative; z-index:1;
  background:var(--navy-deep);
  color:var(--white);
  padding:40px 0 30px;
  font-weight:300;
}

.ftr__top{
  display:grid; grid-template-columns:1fr 1fr; align-items:end;
  padding-bottom:60px;
}
.ftr__logo{ justify-self:start; }
.ftr__logo img{ width:230px; height:auto; }

.ftr__social{
  justify-self:end;
  display:flex; align-items:center; gap:20px;
}
.ftr__social a{
  display:grid; place-items:center;
  width:25px; height:25px; color:var(--gold);
  transition:color var(--t-fast), transform var(--t-mid);
}
.ftr__social svg{ width:25px; height:25px; }
.ftr__social a:hover{ color:var(--white); transform:translateY(-3px); }

.ftr__cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding-bottom:60px;
}
.ftr__cols ul{ display:grid; gap:20px; align-content:start; padding:10px; }
.ftr__cols a{
  display:inline-block;
  font-size:14px; font-weight:300; line-height:24px; color:var(--white);
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat; background-position:100% 100%;
  background-size:0 1px;
  transition:background-size var(--t-mid), color var(--t-fast);
}
.ftr__cols a:hover{ color:var(--gold); background-size:100% 1px; }

.ftr__app{
  display:flex; align-items:center; gap:20px;
  padding:0 10px 60px;
}
.ftr__app-title{ font-size:20px; font-weight:500; }
.ftr__app img{ width:130px; height:40px; }
.ftr__app a{ transition:transform var(--t-mid); }
.ftr__app a:hover{ transform:translateY(-3px); }

.ftr__legal{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px;
  padding:24px 10px 0;
  border-top:1px solid var(--white);
  font-size:14px; font-weight:300; line-height:1.4;
}
.ftr__legal a{
  transition:color var(--t-fast);
}
.ftr__legal a:hover{ color:var(--gold); }
.ftr__credit--end{ padding-right:20px; border-right:1px solid var(--white); }

/* ============================================================
   FLOATING CONTACT MENU
   One white vertical container holding all three actions, glued
   to the physical left edge. The whole panel widens on hover and
   the row under the pointer reveals its label. Physical LTR box
   so the icons stay pinned to the edge while the labels open to
   their right.
   ============================================================ */
.rail-fixed{
  position:fixed; z-index:95;
  left:12px; top:50%; transform:translateY(-50%);
  direction:ltr;
  width:74px;
  padding:7px;
  background:var(--white);
  border-radius:22px;
  box-shadow:0 10px 34px rgba(0,33,71,.22);
  overflow:hidden;
  transition:width .42s var(--ease), box-shadow var(--t-mid);
}
.rail-fixed:hover,.rail-fixed:focus-within{
  width:212px;
  box-shadow:0 16px 42px rgba(0,33,71,.30);
}

.rail-fixed__list{ display:flex; flex-direction:column; }
.rail-fixed__list > li + li{ border-top:1px solid var(--pale-3); }

.rail-fixed__item{
  display:flex; flex-direction:row; align-items:center;
  width:100%; height:60px;
  border-radius:15px;
  color:var(--navy);
  transition:background-color var(--t-mid);
}
.rail-fixed__item:hover{ background:var(--sky); }

.rail-fixed__ico{
  position:relative;
  display:grid; place-items:center;
  width:60px; height:60px; flex:none;
  color:var(--navy);
}
.rail-fixed__ico .ico{
  width:28px; height:28px; position:relative; z-index:1;
  transition:transform var(--t-mid);
}
.rail-fixed__item:hover .rail-fixed__ico .ico{ transform:scale(1.1); }

/* Every label is navy and stays navy. Once the panel is open they all
   show at normal weight, and only the row under the pointer takes the
   emphasis. Nothing here ever turns a label white. */
.rail-fixed__txt{
  direction:rtl;
  padding-left:18px;
  font-size:16px; font-weight:400; white-space:nowrap;
  color:var(--navy);
  opacity:0; transform:translateX(-10px);
  transition:opacity .22s var(--ease), transform .34s var(--ease),
             font-weight .2s var(--ease);
}
.rail-fixed:hover .rail-fixed__txt,
.rail-fixed:focus-within .rail-fixed__txt{
  opacity:1; transform:translateX(0); transition-delay:.1s;
}
.rail-fixed__item:hover .rail-fixed__txt,
.rail-fixed__item:focus-visible .rail-fixed__txt{
  color:var(--navy); font-weight:600;
}

/* ring that grows out of the form icon and fades away.
   Sized so it never reaches the container edge, which is clipped. */
.rail-fixed__item--pulse .rail-fixed__ico::before{
  content:''; position:absolute;
  left:50%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%;
  border:2px solid var(--navy);
  animation:ring 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes ring{
  0%   { transform:scale(.8);  opacity:0; }
  12%  { opacity:.55; }
  100% { transform:scale(2.1); opacity:0; }
}

/* slides in from the left edge, the same side as the floating menu */
.panel{
  position:fixed; z-index:120;
  top:0; bottom:0; left:0;
  width:560px; max-width:100%;
  background:var(--white);
  display:flex; flex-direction:column;
  box-shadow:0 0 80px rgba(0,33,71,.35);
  transform:translateX(-102%);
  transition:transform .42s var(--ease);
}
.panel.is-open{ transform:translateX(0); }
.panel[hidden]{ display:none; }

.panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) var(--s6);
  border-bottom:1px solid var(--line);
  flex:none;
}
.panel__title{ font-size:26px; font-weight:600; }
.panel__close{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--r-pill); color:var(--navy);
  transition:background-color var(--t-fast), transform var(--t-fast);
}
.panel__close:hover{ background:var(--sky); transform:rotate(90deg); }

.panel__body{ overflow-y:auto; padding:var(--s6); flex:1; -webkit-overflow-scrolling:touch; }

.panel [data-stagger]{ opacity:0; transform:translateY(10px); }
.panel.is-open [data-stagger]{
  opacity:1; transform:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}

body.locked{ overflow:hidden; }

/* ============================================================
   SCROLL REVEAL
   Every block on the page enters, staggered by JS in the order
   the elements appear, see script.js -> IntersectionObserver.
   ============================================================ */
.reveal{ opacity:0; transform:translateY(var(--rv-y, 34px)); }
.reveal--x{ transform:translateX(var(--rv-x, 44px)); }
.reveal--line{ opacity:1; transform:scaleX(0); transform-origin:right; }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .85s var(--ease);
}
.is-ready .hero__media{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ease);
}
.is-ready .hero__media > img,
.is-ready .hero__media .hero__video{
  transform:scale(1);
  transition:transform 1.8s var(--ease) .1s;
}
.is-ready .hero__title{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) .42s, transform .7s var(--ease) .42s;
}
.is-ready .hero__lede{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) .88s, transform .7s var(--ease) .88s;
}

/* ============================================================
   REDUCED MOTION

   The entrance choreography, the hover responses and the pulse
   run for everyone, including under the OS "Reduce motion"
   setting. That is a deliberate decision taken with the client
   in the third review round, after the page read as completely
   static on a machine with the setting switched on.

   What the setting still changes here: the two genuinely
   vestibular effects are dropped (the scroll driven drift of the
   line artwork and the slow zoom on the hero photo), travel
   distances shrink, and every duration is cut roughly in half.

   ?motion=off serves a fully static page for anyone who needs
   one, regardless of the OS setting.
   ============================================================ */
@media (prefers-reduced-motion: reduce){

  html{ scroll-behavior:auto; }

  /* Entrances stay, only shortened. These set the resting distance through
     a variable: a plain transform here would out-specify .reveal.is-in and
     leave every revealed block permanently offset. */
  body:not(.motion-forced) .reveal{ --rv-y:24px; --rv-x:28px; }
  body:not(.motion-forced) .reveal.is-in{
    transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
  /* that rule replaces the whole transition list, so the department
     container has to keep its hover response declared here as well,
     otherwise the lift snaps instead of easing */
  body:not(.motion-forced) .dcard.reveal.is-in{
    transition:opacity .6s var(--ease), transform .6s var(--ease),
               translate var(--t-mid), box-shadow var(--t-mid);
  }
  /* the looping cue is only eased a little, it still has to read as motion */
  body:not(.motion-forced) .scroller__ico{ animation-duration:2s; }

  /* the one thing that really goes: a looping full bleed video */
  body:not(.motion-forced) .hero__media > img,
  body:not(.motion-forced) .hero__video{ transform:none; transition:none; }
  body:not(.motion-forced) .is-ready .hero__media{ transition:clip-path .6s var(--ease); }
}


/* fully static, opt in through the URL */
body.motion-off .reveal,
body.motion-off .panel [data-stagger],
body.motion-off .hero__title,
body.motion-off .hero__lede{ opacity:1 !important; transform:none !important; transition:none !important; }
body.motion-off .hero__media{ clip-path:none !important; transition:none !important; }
body.motion-off .scroller__ico{ animation:none; }
body.motion-off .dcard__img{ transform:none !important; }
body.motion-off .fcard-wrap{ transition:none !important; }
body.motion-off .pcard::after{ transform:scaleX(1) !important; transition:none !important; }
body.motion-off .pcard__title,
body.motion-off .pcard__sub,
body.motion-off .pcard__line,
body.motion-off .pcard__cta,
body.motion-off .pcard__img{ transform:none !important; }
body.motion-off .hero__media > img{ transform:none !important; transition:none !important; }
body.motion-off .sec__head::after{ transform:scaleX(1) !important; transition:none !important; }
body.motion-off .rail-fixed__item--pulse .rail-fixed__ico::before{ animation:none; opacity:0; }
body.motion-off .lines{ transform:translateY(-50%) !important; }
body.motion-off .panel{ transition:transform .18s ease-out; }

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

  body{ font-size:17px; padding-bottom:64px; }
  :root{ --hdr-h:64px; --hdr-top:20px; }

  .hdr__nav{ display:none; }
  .hdr__burger{ display:block; }
  .hdr__logo img{ width:120px; }
  .hdr__bar{ padding:12px 20px; }
  .hdr__lang{ display:none; }

  .a11y{ top:118px; }
  .sec__title{ font-size:36px; }
  .sec__head{ margin-bottom:var(--s6); }
  .bignum__val{ font-size:38px; }
  .bignum--major .bignum__val{ font-size:42px; }

  .panel{ width:480px; }

  .ftr__cols{ grid-template-columns:repeat(2,1fr); gap:var(--s5) 20px; }
  .ftr__cols-spacer{ display:none; }

  /* bottom dock, does not cover content (body reserves 64px) */
  .rail-fixed{
    left:0; right:0; top:auto; bottom:0; width:auto;
    transform:none;
    direction:rtl;
    padding:0 0 env(safe-area-inset-bottom);
    border-radius:0;
    border-top:1px solid var(--gold);
    box-shadow:0 -6px 24px rgba(0,33,71,.20);
    overflow:visible;
  }
  .rail-fixed:hover,.rail-fixed:focus-within{
    width:auto; box-shadow:0 -6px 24px rgba(0,33,71,.20);
  }
  .rail-fixed__list{ flex-direction:row; }
  .rail-fixed__list > li{ flex:1 1 0; }
  .rail-fixed__list > li + li{ border-top:0; border-right:1px solid var(--pale-3); }
  .rail-fixed__item{
    height:64px; border-radius:0;
    flex-direction:column; justify-content:center; gap:2px;
  }
  .rail-fixed__ico{ width:auto; height:auto; }
  .rail-fixed__ico .ico{ width:24px; height:24px; }
  .rail-fixed__txt{ padding-left:0; opacity:1; transform:none; font-size:13px; font-weight:500; }
  .rail-fixed__item--pulse .rail-fixed__ico::before{
    width:22px; height:22px; margin:-11px 0 0 -11px;
  }
}


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

  body{ font-size:16px; }
  :root{ --gutter:20px; --hdr-top:0px; --hdr-h:66px; }

  /* the live site drops the floating pill on mobile: full width, square,
     sitting flush against the top of the viewport */
  .hdr__bar{
    max-width:none; border-radius:0;
    padding:10px var(--gutter);
  }
  .hdr__logo img{ width:104px; }
  .hdr__cta{ padding:8px 16px; font-size:15px; }

  .a11y{ top:auto; bottom:82px; }
  .a11y__btn{ width:36px; height:36px; }

  .ph__file{ font-size:16px; }
  .ph__kind,.ph__path,.ph__dims{ font-size:12px; }
  .sec__head{ margin-bottom:var(--s5); }
  .sec__title{ font-size:30px; }
  .bignum__val,.bignum--major .bignum__val{ font-size:38px; }
  .bignum__chev{ margin-bottom:6px; }

  .fcard{ padding:var(--s5); }
  .form__grid{ grid-template-columns:1fr; }
  .form__submit{ width:100%; justify-content:center; }

  .panel{ width:100%; }
  .panel__head{ padding:var(--s4) var(--s5); }
  .panel__body{ padding:var(--s5); }

  .ftr{ padding:var(--s6) 0 var(--s5); }
  .ftr__top{ grid-template-columns:1fr; gap:var(--s5); padding-bottom:var(--s6); }
  .ftr__logo{ justify-self:start; }
  .ftr__logo img{ width:180px; }
  .ftr__social{ justify-self:start; gap:18px; }
  .ftr__cols{ grid-template-columns:1fr; gap:var(--s4); padding-bottom:var(--s6); }
  .ftr__cols ul{ gap:14px; padding:0; }
  .ftr__app{ flex-wrap:wrap; gap:var(--s3); padding:0 0 var(--s6); }
  .ftr__app-title{ flex:1 0 100%; font-size:18px; }
  .ftr__legal{ gap:var(--s2) var(--s4); padding:var(--s4) 0 0; }
  .ftr__credit--end{ padding-right:0; border-right:0; }
}