/* =========================================================
   M. Ben-Zvi Consulting Engineers
   Premium "Systems / Precision" design system.
   Serif display (Frank Ruhl Libre) · grotesk body (Assistant)
   · technical mono (IBM Plex Mono).
   ========================================================= */

:root {
  --ink:        #0E1116;
  --ink-2:      #171C23;
  --paper:      #F7F6F2;
  --paper-2:    #EFEDE6;
  --stone:      #E9E6DD;
  --slate:      #59616B;
  --line:       #DCD8CE;
  --line-soft:  #E8E5DC;
  --accent:     #0E9B94;
  --accent-ink: #0A6E69;
  --accent-soft:#E2F0EE;
  --accent-bright:#2ACabc;

  --display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --body: "Assistant", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --r: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.skip-link { position: fixed; inset-block-start: -100px; inset-inline-start: 16px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); font-family: var(--mono); font-size: 13px; }
.skip-link:focus { inset-block-start: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- shared type devices ---------- */
.eyebrow, .sheet-code, .disc-num, .crit-tag, .sector-idx, .proc-num, .cred-k,
.schematic-cap, .s-lbl, .lang-toggle, .brand-sub, .standards, .tb-k, .tb-v, .contact-row dt {
  font-family: var(--mono); letter-spacing: 0.08em;
}
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 24px; }
.eyebrow .tick { width: 30px; height: 1px; background: var(--accent); display: inline-block; }
.eyebrow-light { color: var(--accent-bright); }
.eyebrow-light .tick { background: var(--accent-bright); }

.sheet-code { display: inline-block; font-size: 12px; color: var(--accent-ink); border: 1px solid var(--line); padding: 4px 10px; border-radius: 100px; margin-bottom: 20px; background: rgba(255,255,255,.4); }
.sheet-code-light { color: var(--accent-bright); border-color: rgba(255,255,255,.2); background: transparent; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--body); font-weight: 700; font-size: 15.5px; padding: 13px 26px; border-radius: var(--r); border: 1.5px solid transparent; cursor: pointer; transition: transform .22s var(--ease), background .22s, color .22s, border-color .22s, box-shadow .22s; }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(14,155,148,.6); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.5); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px); }
.btn-outline-light { border-color: rgba(255,255,255,.28); color: #fff; }
.btn-outline-light:hover { border-color: var(--accent-bright); color: var(--accent-bright); transform: translateY(-2px); }

/* ---------- header ---------- */
.site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; transition: background .35s var(--ease), border-color .35s, box-shadow .35s; border-block-end: 1px solid transparent; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; }
.site-header[data-state="scrolled"] { background: rgba(247,246,242,.9); backdrop-filter: saturate(160%) blur(14px); border-block-end-color: var(--line); }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.08; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; transition: color .35s; }
.brand-sub { font-size: 10px; text-transform: uppercase; color: var(--slate); letter-spacing: .14em; margin-block-start: 3px; transition: color .35s; }

.main-nav { display: flex; gap: 30px; }
.main-nav a { font-size: 14.5px; font-weight: 600; position: relative; padding-block: 6px; transition: color .25s; }
.main-nav a::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 0; height: 1.5px; background: var(--accent-bright); transition: width .28s var(--ease); }
.main-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.member-link { font-weight: 600; font-size: 14px; border: 1.5px solid; border-radius: 100px; padding: 7px 16px; transition: border-color .2s, color .2s, background .2s; }
.lang-toggle { font-family: var(--mono); font-size: 12.5px; background: transparent; border: 1px solid; border-radius: 100px; padding: 6px 12px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.lang-opt { transition: color .2s, opacity .2s; opacity: .55; }
.lang-opt.is-active { opacity: 1; font-weight: 600; }
.lang-divider { opacity: .4; }
.header-cta { padding: 10px 20px; font-size: 14.5px; }

/* header colours over the dark hero (top) */
.site-header[data-state="top"] { color: #fff; }
.site-header[data-state="top"] .brand-name { color: #fff; }
.site-header[data-state="top"] .brand-sub { color: rgba(255,255,255,.6); }
.site-header[data-state="top"] .main-nav a { color: rgba(255,255,255,.86); }
.site-header[data-state="top"] .member-link { border-color: rgba(255,255,255,.28); color: #fff; }
.site-header[data-state="top"] .member-link:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.site-header[data-state="top"] .lang-toggle { border-color: rgba(255,255,255,.28); color: #fff; }
.site-header[data-state="top"] .brand-mark { filter: brightness(0) invert(1); }
/* header colours over light content (scrolled) */
.site-header[data-state="scrolled"] .main-nav a { color: var(--slate); }
.site-header[data-state="scrolled"] .main-nav a:hover { color: var(--ink); }
.site-header[data-state="scrolled"] .member-link { border-color: var(--line); color: var(--ink); }
.site-header[data-state="scrolled"] .member-link:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.site-header[data-state="scrolled"] .lang-toggle { border-color: var(--line); color: var(--slate); }
.header-cta { color: #fff !important; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--ink); color: #fff; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: 120px 80px; }
.hero-grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(120% 100% at 78% 30%, #000 30%, transparent 76%); mask-image: radial-gradient(120% 100% at 78% 30%, #000 30%, transparent 76%); }
[dir="rtl"] .hero-grid { -webkit-mask-image: radial-gradient(120% 100% at 22% 30%, #000 30%, transparent 76%); mask-image: radial-gradient(120% 100% at 22% 30%, #000 30%, transparent 76%); }
.hero-glow { position: absolute; z-index: 0; inset-block-start: -10%; inset-inline-end: -6%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; background: radial-gradient(circle, rgba(14,155,148,.28), transparent 62%); filter: blur(10px); pointer-events: none; }
[dir="rtl"] .hero-glow { inset-inline-end: auto; inset-inline-start: -6%; }

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 5vw, 72px); align-items: center; width: 100%; }
.hero-title { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 6.6vw, 82px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 28px; }
.hero-title span { display: block; }
.hero-accent { color: var(--accent-bright); }
[dir="ltr"] .hero-title { letter-spacing: -0.03em; }
.hero-lede { font-size: clamp(17px, 1.75vw, 21px); line-height: 1.6; color: rgba(255,255,255,.74); max-width: 48ch; margin: 0 0 36px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-schematic { margin: 0; }
.schematic { width: 100%; height: auto; max-width: 460px; display: block; margin-inline: auto; }
.s-frame { fill: rgba(255,255,255,.02); stroke: rgba(255,255,255,.18); stroke-width: 1; }
.s-dim, .s-tick { stroke: rgba(255,255,255,.45); stroke-width: 1; }
.s-unit { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.55); stroke-width: 1.4; }
.s-unit-accent { fill: rgba(42,199,188,.1); stroke: var(--accent-bright); }
.s-duct { fill: none; stroke: rgba(255,255,255,.8); stroke-width: 2; stroke-dasharray: 7 7; animation: flow 2.6s linear infinite; }
.s-pipe { fill: none; stroke: var(--accent-bright); stroke-width: 2; stroke-dasharray: 6 8; animation: flow 4.2s linear infinite; }
.s-node { fill: var(--ink); stroke: var(--accent-bright); stroke-width: 1.6; }
.s-arrow { fill: rgba(255,255,255,.85); }
.s-lbl { font-size: 13px; font-weight: 600; fill: #fff; letter-spacing: .06em; }
.s-lbl-sm { font-size: 9.5px; fill: rgba(255,255,255,.55); font-weight: 400; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.schematic-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: rgba(255,255,255,.5); text-align: center; margin-block-start: 16px; }

.hero-scroll { position: absolute; inset-block-end: 26px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-scroll::after { content: ""; width: 1px; height: 30px; background: linear-gradient(rgba(255,255,255,.5), transparent); animation: scrolldot 2s var(--ease) infinite; }
@keyframes scrolldot { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* hero load animation */
.reveal-load { opacity: 0; transform: translateY(22px); animation: rise .9s var(--ease) forwards; }
.hero-copy .reveal-load:nth-child(1) { animation-delay: .05s; }
.hero-title .reveal-load:nth-child(1) { animation-delay: .12s; }
.hero-title .reveal-load:nth-child(2) { animation-delay: .2s; }
.hero-title .reveal-load:nth-child(3) { animation-delay: .28s; }
.hero-copy > .reveal-load:nth-child(3) { animation-delay: .38s; }
.hero-copy > .reveal-load:nth-child(4) { animation-delay: .46s; }
.hero-schematic.reveal-load { animation-delay: .3s; animation-duration: 1.1s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- standards marquee ---------- */
.standards { background: var(--ink-2); color: rgba(255,255,255,.72); overflow: hidden; border-block: 1px solid rgba(255,255,255,.08); }
.standards-track { display: inline-flex; align-items: center; gap: 26px; white-space: nowrap; padding-block: 15px; font-size: 12.5px; letter-spacing: .12em; animation: marquee 34s linear infinite; }
.standards-track i { color: var(--accent-bright); font-style: normal; }
[dir="rtl"] .standards-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding-block: clamp(70px, 10vw, 138px); position: relative; }
.section-line { border-block-start: 1px solid var(--line); }
.section-head { max-width: 760px; margin-block-end: clamp(40px, 6vw, 64px); }
.section-title { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; text-wrap: balance; }
.section-intro { font-size: clamp(16px, 1.5vw, 19px); color: var(--slate); margin: 0; max-width: 62ch; line-height: 1.65; }
.section-stone { background: var(--paper-2); border-block: 1px solid var(--line); }

/* positioning statement */
.statement-section { padding-block: clamp(64px, 9vw, 120px); }
.statement { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3.4vw, 42px); line-height: 1.28; letter-spacing: -0.01em; margin: 0; max-width: 20ch; text-wrap: balance; }
.statement { max-width: 26ch; }

/* disciplines */
.disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.disc-card { background: var(--paper); padding: clamp(28px, 3.2vw, 44px); transition: background .35s var(--ease); }
.disc-card:hover { background: #fff; }
.disc-num { display: block; font-size: 13px; color: var(--accent); margin-block-end: 26px; }
.disc-card h3 { font-family: var(--display); font-weight: 700; font-size: 23px; margin: 0 0 12px; letter-spacing: -0.01em; }
.disc-card p { margin: 0; color: var(--slate); font-size: 16px; }

/* critical environments (dark) */
.section-dark { background: var(--ink); color: #fff; overflow: hidden; }
.section-dark .section-title { color: #fff; }
.section-dark .section-intro { color: rgba(255,255,255,.66); }
.dark-grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 42%, transparent 82%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 42%, transparent 82%); }
.section-dark .wrap { position: relative; z-index: 1; }
.crit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); }
.crit-card { border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: clamp(30px, 3.4vw, 48px); background: rgba(255,255,255,.025); transition: border-color .35s var(--ease), transform .35s var(--ease); }
.crit-card:hover { border-color: var(--accent-bright); transform: translateY(-5px); }
.crit-tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--accent-bright); border: 1px solid rgba(42,199,188,.4); padding: 4px 10px; border-radius: 100px; margin-block-end: 16px; }
.crit-card h3 { font-family: var(--display); font-weight: 800; font-size: clamp(25px, 3vw, 34px); margin: 0 0 14px; letter-spacing: -0.01em; }
.crit-card p { color: rgba(255,255,255,.72); font-size: 16.5px; margin: 0 0 22px; }
.crit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.crit-list li { position: relative; padding-inline-start: 22px; font-size: 15px; color: rgba(255,255,255,.82); }
.crit-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; width: 10px; height: 1px; background: var(--accent-bright); }

/* sectors */
.sector-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sector { background: var(--paper); padding: clamp(26px, 3vw, 40px); transition: background .35s var(--ease); }
.sector:hover { background: #fff; }
.sector-idx { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.sector h3 { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.1vw, 24px); margin: 14px 0 8px; letter-spacing: -0.01em; }
.sector p { margin: 0; color: var(--slate); font-size: 15px; }

/* approach / process */
.process { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
.process li { padding-block-start: 24px; border-block-start: 2px solid var(--ink); }
.proc-num { display: block; font-size: 13px; color: var(--accent); margin-block-end: 16px; }
.process h3 { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 0 0 10px; letter-spacing: -0.01em; }
.process p { margin: 0; color: var(--slate); font-size: 15.5px; }

/* credentials band */
.creds { background: var(--ink); color: #fff; }
.creds-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.cred { padding: clamp(26px, 3vw, 40px) 0; padding-inline-end: 28px; display: flex; flex-direction: column; gap: 8px; border-inline-start: 1px solid rgba(255,255,255,.12); padding-inline-start: 28px; }
.cred:first-child { border-inline-start: none; padding-inline-start: 0; }
.cred-k { font-size: 11px; letter-spacing: .12em; color: var(--accent-bright); }
.cred-v { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.6vw, 20px); }

/* contact */
.section-contact { border-block-start: 1px solid rgba(255,255,255,.1); }
.contact-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.contact-list { margin: 0; }
.contact-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding-block: 18px; border-block-end: 1px solid rgba(255,255,255,.12); align-items: baseline; }
.contact-row:last-child { border-block-end: none; }
.contact-row dt { font-size: 11px; letter-spacing: .12em; color: var(--accent-bright); }
.contact-row dd { margin: 0; font-size: 17.5px; font-weight: 600; }
.contact-row a:hover { color: var(--accent-bright); }

/* ---------- footer / title block ---------- */
.title-block { background: #0A0D11; color: #fff; padding-block: 44px 30px; }
.tb-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); border: 1px solid rgba(255,255,255,.16); }
.tb-cell { padding: 18px 20px; border-inline-end: 1px solid rgba(255,255,255,.16); display: flex; flex-direction: column; gap: 7px; justify-content: center; min-height: 86px; }
.tb-cell:last-child { border-inline-end: none; }
.tb-logo { flex-direction: row; align-items: center; gap: 12px; }
.tb-logo strong { display: block; font-family: var(--display); font-weight: 800; font-size: 15px; }
.tb-logo span { display: block; font-family: var(--mono); font-size: 10px; color: #8794A0; letter-spacing: .1em; text-transform: uppercase; }
.tb-logo img { filter: brightness(0) invert(1); opacity: .92; }
.tb-k { font-size: 10px; color: #7A8791; letter-spacing: .14em; }
.tb-v { font-size: 12.5px; color: #CFD7DE; letter-spacing: .06em; }
.tb-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: #7A8791; margin: 20px 0 0; letter-spacing: .03em; }
.tb-links a:hover { color: var(--accent-bright); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
.disc-card.reveal:nth-child(2), .sector.reveal:nth-child(2), .process li.reveal:nth-child(2), .crit-card.reveal:nth-child(2), .cred.reveal:nth-child(2) { transition-delay: .08s; }
.disc-card.reveal:nth-child(3), .sector.reveal:nth-child(3), .process li.reveal:nth-child(3), .cred.reveal:nth-child(3) { transition-delay: .16s; }
.sector.reveal:nth-child(4), .process li.reveal:nth-child(4), .cred.reveal:nth-child(4) { transition-delay: .24s; }
.sector.reveal:nth-child(5) { transition-delay: .32s; }
.sector.reveal:nth-child(6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-load { opacity: 1 !important; transform: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .main-nav, .header-cta { display: none; }
  .hero-inner, .contact-inner { grid-template-columns: 1fr; }
  .hero-schematic { order: -1; max-width: 340px; }
  .crit-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr 1fr; }
  .creds-inner { grid-template-columns: 1fr 1fr; }
  .cred:nth-child(3) { border-inline-start: none; padding-inline-start: 0; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .disc-grid, .sector-grid, .process, .creds-inner { grid-template-columns: 1fr; }
  .cred { border-inline-start: none !important; padding-inline-start: 0 !important; border-block-start: 1px solid rgba(255,255,255,.12); }
  .contact-row { grid-template-columns: 1fr; gap: 4px; }
  .tb-grid { grid-template-columns: 1fr 1fr; }
  .tb-cell { border-block-end: 1px solid rgba(255,255,255,.16); }
  .member-link { display: none; }
  .hero { min-height: auto; }
}