/* ===== reset (webflow base, only what's needed) ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;height:100%}
body{margin:0}

/* ===== text reveal (line/word mask animation, see assets/js/text-reveal.js) ===== */
[data-reveal]{visibility:hidden}
.ln-mask{display:block;overflow:hidden}
.ln-mask .ln{display:block}
.ln-mask .wd,.ln-mask .ch{display:inline-block}

/* headings with line-height < 1 would get their ascenders/descenders clipped by the mask;
   this grows each masked line by --off and pulls the layout back with negative margins */
.e-lh{--off:.5em}
.e-lh .ln-mask .ln,.e-lh .ln-mask .wd,.e-lh .ln-mask .ch{
  margin-top:calc(var(--off) * -1);margin-bottom:calc(var(--off) * -1);
  padding-top:calc(var(--off) / 2);padding-bottom:calc(var(--off) / 2);
}
.e-lh .ln-mask:first-child .ln,.e-lh .ln-mask:first-child .wd{margin-top:calc(var(--off) * -.5)}
.e-lh .ln-mask:last-child .ln,.e-lh .ln-mask:last-child .wd{margin-bottom:calc(var(--off) * -.5)}

/* manual mask used for the live-counting numbers (see counters in scroll-transition.js) */
.counter-mask{display:inline-block;overflow:hidden;vertical-align:top}
.counter-mask .counter-ln{display:inline-block}

/* Text handled manually by scroll-transition.js / scene.module.js (split + revealed as part
   of an existing scrubbed pin timeline, not via [data-reveal]). Hidden from first paint so
   there's no flash of plain text before SplitText/the mask takes over — same reasoning as
   [data-reveal] above, just not using that attribute since these are driven by hand.
   Skipped entirely under reduced-motion so that path never depends on JS to reveal them. */
@media (prefers-reduced-motion: no-preference){
  .why-text,
  .section-two-content h2,
  .section-two-content p,
  .about-stats small,
  .about-stats .tile-statement,
  .about-stats .loc-place b{
    visibility:hidden;
  }
}

/* ===== design tokens (from :root, dark theme values) ===== */
:root{
  --_themes---background:var(--_colors---dark);
  --_text-style---font-family:"Geist",Arial,sans-serif;
  --_themes---text:var(--_colors---light);
  --text--body:1.6rem;
  --_text-style---line-height:1.3;
  --_text-style---font-weight:500;
  --_text-style---letter-spacing:-.003em;
  --_text-style---font-size:var(--text--body);
  --_colors---grey400:#838a8f;
  --_colors---grey100:#e1e5e5;
  --_colors---grey800:#1c2227;
  --_colors---light:#EFEBE1; /* brand Soft Plaster */
  --_colors---grey200:#dfe3e3;
  --_colors---grey500:#666f76;
  --_colors---grey300:#c0c4c6;
  --text--text-small:1.4rem;
  --_themes---nav_color:var(--_colors---light);
  --_colors---dark:#191814; /* brand Charcoal Black */
  --padding-global:3.2rem;
  --_colors---white:#EFEBE1;
  --text--text-medium:1.8rem;
  --text--text-large:2rem;
  --_colors---transparent:transparent;
  --_colors---grey700:#20272c;
  --text--h3:4.2rem;
  --_colors---grey01:#1c2227;
  --_colors---black:#000;
  --_colors---dark900:#08080a;
  --container-nav:100%;
  --container-large:100%;
  --container-medium:100rem;
  --container-small:60rem;
  --text--h1:6.4rem;
  --text--h2:5.2rem;
  --text--h4:2.4rem;
  --text--h5:1.8rem;
  --_colors---nav_color:#EFEBE1;
  --_colors---grey600:#212528;
}
body{
  background-color:var(--_themes---background);
  font-family:var(--_text-style---font-family);
  color:var(--_themes---text);
  font-size:var(--text--body);
  line-height:var(--_text-style---line-height);
  font-weight:var(--_text-style---font-weight);
  letter-spacing:var(--_text-style---letter-spacing);
}

h2{
  margin-top:0;
  font-family:var(--_text-style---font-family);
  color:var(--_themes---text);
  font-size:var(--_text-style---font-size);
  line-height:var(--_text-style---line-height);
  font-weight:var(--_text-style---font-weight);
  letter-spacing:var(--_text-style---letter-spacing);
  --_text-style---font-family:"Geist",Arial,sans-serif;
  --_text-style---line-height:1;
  --_text-style---font-weight:500;
  --_text-style---letter-spacing:-.008em;
  --_text-style---font-size:var(--text--h2);
}

/* ===== layout primitives ===== */
.w-layout-vflex{flex-direction:column;align-items:flex-start;display:flex}

/* ===== "Why work with us" (static section; the old 3D photo-tube screen was removed) ===== */
.why{position:relative;z-index:60;background:var(--charcoal);color:var(--plaster);padding:120px var(--margin) 140px}
.why-inner{max-width:1600px;margin:0 auto}
.why-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-bottom:56px}
.why-h2{margin:0;font:600 clamp(40px,6vw,96px)/1 var(--display);letter-spacing:0}
.why-label{margin:0;font:400 14px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (min-width:800px){.why{padding:160px var(--margin) 180px}.why-head{margin-bottom:80px}}

/* ===== Brand typography (Mendel & Co brandbook) =====
   Headlines: Plus Jakarta Sans SemiBold, all caps, 100% line height, 0% tracking.
   Body: Geist, 110% line height, +2% tracking. */
.hero-title,
.section-two-content h2{
  font-family:var(--display);
  font-weight:600;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}
.hero-text,
.section-two-content > p,
.tile-index,
.stat small,
.loc-place small{
  font-family:var(--sans);
  line-height:1.1;
  letter-spacing:.02em;
}
/* stat captions: white and larger */
.stat small{color:var(--plaster);font-size:16px}
@media (min-width:1200px){ .stat small{font-size:20px} }
/* line mask (overflow:hidden) was cutting the "g"/"p" descenders at line-height 1 */
.loc-place b{line-height:1.2}

/* brand accent (Oxide Clay) */
::selection{background:var(--clay);color:var(--plaster)}

/* ===== "Why work with us" cards =====
   Four solid cards in brand colours (Burnt Umber, Oxide Clay, Limestone, Muted Olive):
   Mendel mark top-left, a large vertical title on the right edge, short text bottom-left. */
.why-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.why-card {
  --ink: var(--plaster);
  position: relative; aspect-ratio: 1 / 1.08; overflow: hidden;
  color: var(--ink);
  clip-path: inset(100% 0% 0% 0%); /* wiped open from the bottom (why.js) */
}
.why-card--umber { background: #361708; }      /* Burnt Umber */
.why-card--clay { background: #983201; }       /* Oxide Clay */
.why-card--limestone { background: #D7CDB9; --ink: var(--charcoal); } /* Limestone */
.why-card--olive { background: #6B6245; }      /* Muted Olive */

.why-mark { position: absolute; left: 28px; top: 28px; width: 30px; height: auto; }
.why-title {
  position: absolute; right: 22px; bottom: 24px; margin: 0;
  white-space: nowrap; /* one line; size is fitted to the longest title in JS */
  writing-mode: vertical-rl; transform: rotate(180deg); /* reads bottom to top */
  font: 600 clamp(28px, 2.6vw, 46px)/0.95 var(--display); letter-spacing: -.01em;
}
/* text + "Talk to us" button: the button waits just below the card's bottom edge (clipped
   by the card); on hover the whole block rises, lifting the text and revealing the button */
.why-foot {
  position: absolute; left: 28px; bottom: 24px; max-width: 58%;
  display: grid; justify-items: start; gap: 18px;
  transform: translateY(calc(36px + 18px)); /* text rests exactly where it was */
  transition: transform .6s cubic-bezier(.785,.135,.15,.86);
}
.why-cta { clip-path: inset(100% 0 0 0); transition: clip-path .6s cubic-bezier(.785,.135,.15,.86); }
.why-card:hover .why-foot, .why-card:focus-within .why-foot { transform: none; }
.why-card:hover .why-cta, .why-card:focus-within .why-cta { clip-path: inset(0 0 0 0); transition-delay: .05s; }
.why-text {
  margin: 0;
  font: 400 22.5px/1.2 var(--sans); letter-spacing: .01em; /* 1.5x */
}

@media (max-width: 1100px) {
  .why-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .why-card { aspect-ratio: 1 / .78; }
}
@media (max-width: 767px) {
  /* phones: one card per row, landscape; the nav already carries "Talk to us" */
  .why-cards { grid-template-columns: 1fr; gap: 10px; }
  .why-card { aspect-ratio: auto; min-height: 220px; padding: 22px 20px; display: flex; flex-direction: column; }
  .why-mark { position: static; width: 24px; margin-bottom: 18px; }
  /* title reads horizontally here, under the mark */
  .why-title { position: static; writing-mode: horizontal-tb; transform: none; white-space: normal; font-size: 28px !important; line-height: 1; }
  .why-foot { position: static; margin-top: auto; padding-top: 28px; max-width: none; transform: none; }
  .why-cta { display: none; }
  .why-text { font-size: 18px; }
}

/* button colours per card, so the clay square never disappears into its card */
.why-card--clay .why-cta { --sl-accent: #361708; }
.why-card--limestone .why-cta { --sl-bg: #191814; --sl-fg: #EFEBE1; }
@media (hover: none) { .why-foot { transform: none; } .why-cta { clip-path: none; } }