/* ==========================================================================
   NOQAI — V2 preview stylesheet
   Built to the client brief: one fixed cover-template for every page
   (logo + page title + subtitle as separate layers over a text-free image),
   turquoise as the single accent, "פחות אלמנטים, יותר נוכחות".
   ========================================================================== */

:root{
  --ink:#10171a;
  --ink-soft:#3a474c;
  --muted:#5d6b70;
  --line:#e2eaea;
  --paper:#ffffff;
  --soft:#f5f8f8;
  --turq:#23abbb;
  --turq-deep:#0e7c8b;
  --turq-wash:#eaf6f8;

  /* the fixed cover template — one place, every page.
     A wide full-bleed banner of a STABLE height: it depends only on width,
     capped at 560px, so the banner reads the same on every screen and is
     NOT tied to how tall the browser window is. It always spans full width. */
  --hero-h:clamp(400px,44vw,560px);
  --hero-pos:center center;
  --wrap:1120px;
  --gut:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:92px}
body{
  margin:0;
  font-family:"Heebo",-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  line-height:1.75;
  font-size:17px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.25;letter-spacing:-.01em}
p{margin:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* skip link */
.skip{
  position:fixed;inset-inline-start:0;top:-60px;z-index:100;
  background:var(--ink);color:#fff;padding:12px 20px;text-decoration:none;
  transition:top .2s;
}
.skip:focus{top:0}

/* ---------- header / nav ------------------------------------------------ */

.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:clamp(14px,2.5vw,34px);
  min-height:74px;
}
.brand{
  font-size:clamp(15px,1.35vw,18px);
  font-weight:500;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
  direction:ltr;
}
.brand[aria-current]{color:var(--turq-deep)}
/* the brand IS the first tab of the brief's menu, so give it the same
   underline affordance as a nav item — otherwise it reads as a mute logo
   and nobody clicks through to the trilingual bio page */
.brand{position:relative;padding-bottom:6px}
.brand::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;
  background:var(--turq);transition:width .25s;
}
.brand:hover::after,.brand[aria-current]::after{width:100%}
/* on desktop the header brand already carries this label — the duplicate
   nav entry exists only for the mobile burger menu */
.nav-bio{display:none}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,30px);margin-inline-start:auto}
.nav a{
  text-decoration:none;font-size:16px;font-weight:400;color:var(--ink-soft);
  padding:6px 0;position:relative;white-space:nowrap;
  transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;
  background:var(--turq);transition:width .25s;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}
.nav a[aria-current]{color:var(--ink);font-weight:500}

/* social links kept from the current site's header */
.head-social{
  display:flex;align-items:center;gap:14px;list-style:none;
  margin:0;padding:0;margin-inline-start:clamp(10px,2vw,26px);
}
.head-social a{display:block;color:var(--ink-soft);transition:color .2s}
.head-social a:hover{color:var(--turq-deep)}
.head-social svg{width:18px;height:18px;display:block;fill:currentColor}

.nav-toggle{
  display:none;margin-inline-start:auto;background:none;border:0;padding:8px;
  cursor:pointer;color:var(--ink);
}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0}

@media (max-width:900px){
  .nav-toggle{display:block;margin-inline-start:0;order:3}
  .head-social{margin-inline-start:auto;order:2;gap:16px}
  .nav{
    position:absolute;inset-inline:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px var(--gut) 18px;margin:0;display:none;
  }
  .site-head.is-open .nav{display:flex}
  .nav-bio{display:block;direction:ltr;text-align:start}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
}

/* ---------- the fixed cover template ------------------------------------ */

.hero{
  position:relative;
  min-height:var(--hero-h);
  display:flex;
  background-image:var(--hero-img);
  background-size:cover;
  background-position:var(--hero-pos);
  background-color:#0b1418;
  isolation:isolate;
  /* home only: how far the quote is carried past its column so the quotation
     marks reach the composition's outer line, staying tight to the words */
  --qnudge:clamp(14px,2.2vw,30px);
}
/* subtle darkening layer, as permitted by the brief, for legibility only */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to left,rgba(6,14,17,.72) 0%,rgba(6,14,17,.48) 42%,rgba(6,14,17,.12) 78%,rgba(6,14,17,0) 100%),
    linear-gradient(to bottom,rgba(6,14,17,.42) 0%,rgba(6,14,17,0) 38%,rgba(6,14,17,.30) 100%);
}
.hero__in{
  position:relative;z-index:2;
  max-width:var(--wrap);margin-inline:auto;width:100%;
  padding:clamp(26px,3.4vw,40px) var(--gut) clamp(34px,4vw,48px);
  display:grid;grid-template-rows:auto 1fr;
}
/* layer 1 — logo, identical position and size on every page */
.hero__logo{grid-row:1;width:clamp(148px,15vw,208px);height:auto;justify-self:start}
/* layers 2+3 — page title and subtitle.
   The title sits in the optical centre of the banner — the same height on
   every page, as in the client's own mock-up, no matter how the subtitle wraps.
   Title and (on home) the English block share this one flexible row, so the
   English box can never resize the row the title is centred in. */
.hero__text{grid-row:2;align-self:center;padding-top:clamp(16px,2vw,32px)}
.hero__title{
  font-size:clamp(30px,4.4vw,58px);
  font-weight:300;color:#fff;letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
  max-width:20ch;
}
.hero__title .lat{direction:ltr;display:inline-block;text-align:right}
.hero__sub{
  margin-top:14px;
  font-size:clamp(16px,1.6vw,21px);
  font-weight:300;color:rgba(255,255,255,.9);
  line-height:1.55;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
  max-width:34ch;
}
.hero__sub .lat{direction:ltr;display:inline-block;text-align:right}

/* home: the key sentence takes the place of the page title */
.hero__quote{font-size:clamp(28px,4vw,52px);font-weight:300;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.4);max-width:19ch}
.hero__by {
    margin-top: 16px;
    font-size: clamp(14px,1.3vw,17px);
    color: var(--soft);
    letter-spacing: .04em;
    font-style: italic;
}
/* the same sentence in English — shares row 2 with the title but pinned to the
   bottom-left, so its height never moves the centred Hebrew above it.
   Carried the same touch further to the left (outward) toward its own line. */
.hero__en{grid-row:2;justify-self:end;align-self:end;text-align:left;max-width:52ch;padding-top:clamp(24px,4vw,52px);transform:translateX(calc(-1*var(--qnudge)))}
.hero__quote-en{font-size:clamp(16px,1.8vw,25px);font-weight:300;color:#fff;line-height:1.4;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero__by-en{margin-top:8px;font-size:clamp(13px,1.15vw,16px);font-style:italic;color:rgba(255,255,255,.82);text-shadow:0 2px 18px rgba(0,0,0,.5)}

/* UI (הבינות המאוחדות) page: English brand line, pinned bottom-right (RTL start)
   in the title's flexible row, so it can never move the centred title */
.hero__brand-en{grid-row:2;justify-self:start;align-self:end;font-style:italic;font-weight:300;font-size:clamp(15px,1.7vw,22px);color:var(--turq);letter-spacing:.04em;text-shadow:0 2px 18px rgba(0,0,0,.5)}

/* on a phone the 2.75:1 cover shows only a narrow window of its width,
   so each page may pin the part of its image that carries the subject */
@media (max-width:700px){
  /* height is governed by the single clamp above (400px on phones) — only the
     crop position shifts, so each page can pin the subject of its cover */
  /* on the narrow phone column the outward nudge would push a mark against the
     screen edge, so the quote sits flush in its column on mobile */
  .hero{background-position:var(--hero-pos-m,var(--hero-pos));--qnudge:0px}
}

/* ---------- content bands ----------------------------------------------- */

.band{padding:clamp(56px,7vw,104px) 0}
.band--soft{background:var(--soft)}
.band--tight{padding-block:clamp(40px,5vw,72px)}
.band + .band{padding-top:0}
.band--soft + .band,.band + .band--soft{padding-top:clamp(56px,7vw,104px)}

.eyebrow{
  color:var(--turq-deep);font-size:14px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;
}
.eyebrow--plain{text-transform:none;letter-spacing:.04em;font-size:16px}
.h2{font-size:clamp(26px,3.2vw,40px);font-weight:300;letter-spacing:-.02em}
.h3{font-size:clamp(20px,2.1vw,26px);font-weight:400}
/* academic-title affixes (Prof. / , PhD) — not bold, a touch smaller than the name */
.deg{font-weight:300;font-size:.78em}
.sub{margin-top:10px;font-size:clamp(17px,1.7vw,21px);color:var(--muted);font-weight:300}
.lead{margin-top:26px;font-size:clamp(17px,1.75vw,20px);line-height:1.85;color:var(--ink-soft);max-width:62ch}
.lead + .lead{margin-top:18px}
.rule{width:56px;height:2px;background:var(--turq);border:0;margin:0 0 26px}
.measure{max-width:70ch}

/* soft separation, no cards — used by "החיבור" */
.gentle{
  margin-top:clamp(44px,5vw,72px);
  padding-top:clamp(36px,4vw,56px);
  border-top:1px solid var(--line);
}

/* four core values, 2×2 desktop / 1 column mobile, no icons */
.grid2{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);margin-top:clamp(30px,4vw,52px);
}
.grid2 h3{font-size:clamp(19px,1.9vw,23px);font-weight:400}
.grid2 h3::before{
  content:"";display:block;width:34px;height:2px;background:var(--turq);
  margin-bottom:14px;opacity:.85;
}
.grid2 p{margin-top:10px;color:var(--ink-soft);line-height:1.8}

/* team — two portraits, equal, no frames */
.team{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,5vw,72px);margin-top:clamp(32px,4vw,54px);
  align-items:start;
}
.team figure{margin:0}
.team img{width:100%;height:auto;aspect-ratio:19/30;object-fit:cover;object-position:center top}
.team figcaption{padding-top:22px}
.team .name{font-size:clamp(19px,2vw,24px);font-weight:500}
.team .role{margin-top:6px;color:var(--turq-deep);font-size:16px}
.team .role .lat{direction:ltr;display:block;text-align:right;color:var(--muted);font-size:14.5px;letter-spacing:.02em}
.team .bio{margin-top:14px;color:var(--ink-soft);line-height:1.8;font-size:16.5px}

@media (max-width:760px){
  .grid2,.team{grid-template-columns:1fr}
}

/* pull-quote typography for the lecture page */
.pull{
  margin-top:clamp(34px,4vw,56px);
  padding-inline-start:22px;
  border-inline-start:2px solid var(--turq);
  font-size:clamp(21px,2.7vw,32px);
  font-weight:300;line-height:1.5;color:var(--ink);
  letter-spacing:-.01em;max-width:24ch;
}
.pull--wide{max-width:32ch}
.keyline{
  margin-top:clamp(30px,3.5vw,48px);
  font-size:clamp(19px,2.2vw,26px);
  font-weight:400;color:var(--turq-deep);line-height:1.5;max-width:34ch;
}
.stack{margin-top:clamp(24px,3vw,38px);display:grid;gap:12px}
.stack .row{font-size:clamp(18px,2vw,22px);font-weight:300;color:var(--ink-soft)}
.stack .row--on{color:var(--ink);font-weight:400}

/* focus-area chips, kept flat — no boxes */
.chips{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px}
.chips li{list-style:none;position:relative;padding-inline-start:16px;color:var(--ink-soft);font-size:16.5px}
.chips li::before{
  content:"";position:absolute;inset-inline-start:0;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--turq);
}
.chips{padding:0;margin-block:22px 0}

/* language segments (page 1) — a switcher shows ONE language at a time */
.langswitch{display:flex;gap:14px;align-items:center;font-size:16px;color:var(--muted);letter-spacing:.02em;margin-bottom:6px}
.langswitch .lang-btn{
  font:inherit;font-size:16px;background:none;border:0;padding:4px 0;margin:0;
  color:var(--muted);cursor:pointer;letter-spacing:.02em;position:relative;transition:color .2s;
}
.langswitch .lang-btn:hover{color:var(--ink)}
.langswitch .lang-btn.is-on{color:var(--turq-deep);font-weight:500}
.langswitch .lang-btn.is-on::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--turq)}
.langswitch .lang-btn:focus-visible{outline:2px solid var(--turq-deep);outline-offset:3px}
.langswitch .sep{opacity:.4;user-select:none}
.seg{padding-block:clamp(24px,3.5vw,44px) 0}
.seg[hidden]{display:none}
.seg h2{margin-top:20px;font-size:clamp(24px,2.8vw,34px);font-weight:400}
.seg .role{margin-top:8px;color:var(--turq-deep);font-size:clamp(16px,1.6vw,19px)}
.seg p{margin-top:20px;color:var(--ink-soft);line-height:1.85;max-width:66ch}
.seg h3{margin-top:30px;font-size:18px;font-weight:500}
.ltr{direction:ltr;text-align:left}
.ltr .chips li{padding-inline-start:16px}

/* button */
.btn{
  display:inline-block;margin-top:clamp(30px,4vw,48px);
  background:var(--ink);color:#fff;text-decoration:none;
  font-family:inherit;line-height:1.75;
  padding:17px 40px;font-size:17px;font-weight:400;letter-spacing:.01em;
  border:1px solid var(--ink);border-radius:0;
  -webkit-appearance:none;appearance:none;
  text-align:center;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--turq-deep);border-color:var(--turq-deep)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,88px);margin-top:clamp(30px,4vw,50px)}
.details{display:grid;gap:26px;align-content:start}
.details .item .k{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--turq-deep);font-weight:500}
.details .item .v{margin-top:6px;font-size:clamp(17px,1.8vw,20px);color:var(--ink)}
.details .item a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s}
.details .item a:hover{border-color:var(--turq)}
.details .v.lat{direction:ltr;text-align:right}

.form{display:grid;gap:18px}
.form label{display:grid;gap:8px;font-size:15px;color:var(--muted)}
.form input,.form textarea{
  font:inherit;font-size:16.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);
  padding:14px 16px;border-radius:0;width:100%;
  transition:border-color .2s;
}
.form input:focus,.form textarea:focus{border-color:var(--turq)}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--turq-deep);outline-offset:2px}
.form input[dir="ltr"]{text-align:right}
.form textarea{min-height:130px;resize:vertical}
.form .btn{margin-top:6px;justify-self:start;cursor:pointer}
.form .note{font-size:14px;color:var(--muted);line-height:1.6}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* ---------- footer ------------------------------------------------------ */

.site-foot{background:var(--soft);border-top:1px solid var(--line);padding:clamp(46px,5vw,72px) 0 0}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.foot-logo{width:172px;height:auto;margin-bottom:20px}
.site-foot h4{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:16px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.site-foot a{text-decoration:none;color:var(--ink-soft);transition:color .2s}
.site-foot a:hover{color:var(--turq-deep)}
.site-foot .tagline{color:var(--muted);max-width:34ch;line-height:1.7;font-size:16px}
.foot-bar{
  margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--line);
  padding:20px 0 26px;display:flex;flex-wrap:wrap;gap:12px 24px;
  align-items:center;justify-content:space-between;
  font-size:14px;color:var(--muted);
}
.foot-bar .flag{color:var(--turq-deep)}
.lat{direction:ltr}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}