/* ==========================================================================
   Meranti Works — reset, typography presets, layout primitives
   The .t-* classes mirror the source template's ten text presets 1:1.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;          /* smooth scrolling is driven by js/lenis.js */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 150%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Inline icons carry a viewBox but no width/height, so without this they size
   to their container and blow the layout open. Anything that needs to be big
   (the map) opts out explicitly. */
svg:not([width]) { width: 1em; height: 1em; flex: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

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

::selection { background: var(--accent); color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Type presets
   -------------------------------------------------------------------------- */

.t-h1, .t-h2, .t-h3, .t-h3sm, .t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
  color: var(--white);
}

.t-h1   { font-size: var(--h1);    line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
.t-h2   { font-size: var(--h2);    line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
.t-h3   { font-size: var(--h3);    line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }
.t-h3sm { font-size: var(--h3-sm); line-height: 100%;         letter-spacing: 0; }
.t-h4   { font-size: var(--h4);    line-height: 100%;         letter-spacing: 0; }

.t-lead {
  font-family: var(--font-display);
  font-size: var(--lead);
  font-weight: 400;
  line-height: 150%;
  color: var(--w-50);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--body);
  font-weight: 400;
  line-height: 150%;
  color: var(--ink-dim);
}

/* `// ABOUT US` style section label — the slashes are lime, the word is dim */
.t-eyebrow {
  font-family: var(--font-display);
  font-size: var(--eyebrow);
  font-weight: 500;
  line-height: 100%;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--w-30);
}
.t-eyebrow .slash { color: var(--accent); }

.t-micro {
  font-family: var(--font-display);
  font-size: var(--micro);
  font-weight: 600;
  line-height: 100%;
  letter-spacing: var(--micro-ls);
  text-transform: uppercase;
  color: var(--white);
}

.t-meta {
  font-family: var(--font-body);
  font-size: var(--micro);
  font-weight: 600;
  line-height: 100%;
  color: var(--white);
}

.t-mono { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

/* Page gutter. 88 / 48 / 20 per --gutter. */
.wrap {
  width: 100%;
  padding-inline: var(--gutter);
}

/* The template's signature: a full-bleed section holding a rounded inset panel. */
.inset {
  padding: var(--inset);
}
.inset > .panel {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}

/* Grid and flex children default to min-width:auto, so one long word or a wide
   image can push a track past the viewport. Nothing here needs that. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .footer__cols > * { min-width: 0; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; flex-direction: row; align-items: center; }
.between { justify-content: space-between; }
.center  { align-items: center; justify-content: center; }

.hr {
  height: 1px;
  width: 100%;
  background: var(--line);
  border: 0;
}

/* Images that fill their box, as every photo in the template does. */
.cover { width: 100%; height: 100%; object-fit: cover; }

/* Visually hidden but available to assistive tech. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Scroll-reveal start state.
   Scoped to .js so the page is fully readable without JavaScript; the class is
   set by an inline script in <head>, before first paint. */
.js [data-reveal]:not([data-revealed]) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not([data-revealed]) { opacity: 1; }
}

/* Hidden at a given breakpoint — the equivalent of Framer's hidden-<hash> classes. */
@media (min-width: 1200px)                      { .hide-lg-up { display: none !important; } }
@media (max-width: 1199.98px)                   { .hide-md-dn { display: none !important; } }
@media (min-width: 810px)                       { .hide-m-up  { display: none !important; } }
@media (max-width: 809.98px)                    { .hide-s     { display: none !important; } }