/* ==========================================================================
   Nafas homepage rebuild: base layer
   Breakpoints copied from Framer:
     desktop  >= 1440px
     tablet   810px to 1439.98px
     phone    <= 809.98px
   ========================================================================== */

/* Fonts: same woff2 files the live site serves from framerusercontent, with live's @font-face descriptors
   (each named family also declares its true weight, so text set at that weight is never faux-bolded: faux bold renders
   wider in Safari than in Chrome). Live declares Regular, Medium, Bold and Light Italic twice (descriptor-less and
   weighted) and Semibold Italic / Heavy Italic only at their weight; copied as is. */
@font-face { font-family: "SF Pro Display Regular"; src: url("../assets/fonts/sf-pro-display-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SF Pro Display Regular"; src: url("../assets/fonts/sf-pro-display-regular.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: "SF Pro Display Medium"; src: url("../assets/fonts/sf-pro-display-medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SF Pro Display Medium"; src: url("../assets/fonts/sf-pro-display-medium.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 500; }
@font-face { font-family: "SF Pro Display Bold"; src: url("../assets/fonts/sf-pro-display-bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SF Pro Display Bold"; src: url("../assets/fonts/sf-pro-display-bold.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 700; }
@font-face { font-family: "SF Pro Display Light Italic"; src: url("../assets/fonts/sf-pro-display-light-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SF Pro Display Light Italic"; src: url("../assets/fonts/sf-pro-display-light-italic.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 300; }
@font-face { font-family: "SF Pro Display Semibold Italic"; src: url("../assets/fonts/sf-pro-display-semibold-italic.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 600; }
@font-face { font-family: "SF Pro Display Heavy Italic"; src: url("../assets/fonts/sf-pro-display-heavy-italic.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 800; }
/* Fallback for the SF Pro Text stacks copied from live: visitors without SF Pro Text installed get Inter (Danny,
   2026-10-19) in every browser; the variable file covers every weight the stacks ask for (400 / 500 / 600). */
@font-face { font-family: "Nafas Inter"; src: url("../assets/fonts/inter-variable-latin.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 100 900; }

:root {
  /* Framer colour tokens */
  --nf-white: #fff;
  --nf-green: #91c851;
  --nf-black: #000;
  --nf-grey-9e: #9e9e9e;
  --nf-grey-f5: #f5f5f5;
  --nf-grey-61: #616161;

  /* Font stacks exactly as computed on nafas.com */
  --nf-font-regular: "SF Pro Display Regular", -apple-system, "system-ui", sans-serif;
  --nf-font-medium: "SF Pro Display Medium", -apple-system, "system-ui", sans-serif;
  --nf-font-bold: "SF Pro Display Bold", -apple-system, "system-ui", sans-serif;
  --nf-font-semibold-italic: "SF Pro Display Semibold Italic", -apple-system, "system-ui", sans-serif;
  --nf-font-sf-display: "SF Pro Display", -apple-system, "system-ui", sans-serif;
  --nf-font-sfns-text: SFProText-Regular, "SF Pro Text", "Nafas Inter", sans-serif;
  --nf-font-sfns-display: SFProDisplay-Regular, "SF Pro Display", "SF Pro Display Regular", sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Framer reset */
html, body { box-sizing: border-box; margin: 0; padding: 0; }
* { box-sizing: border-box; -webkit-font-smoothing: inherit; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
body, input, textarea, select, button { font-family: sans-serif; font-size: 12px; }
body { background: var(--nf-white); }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { all: unset; cursor: pointer; }

/* Page column: Framer stacks sections in one centred flex column */
.nf-page { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; background: var(--nf-white); }
.nf-page > section, .nf-page > footer { width: 100%; }

/* Breakpoint visibility helpers (for sections whose markup differs per breakpoint) */
@media (min-width: 1440px) { .nf-hide-desktop { display: none !important; } }
@media (min-width: 810px) and (max-width: 1439.98px) { .nf-hide-tablet { display: none !important; } }
@media (max-width: 809.98px) { .nf-hide-phone { display: none !important; } }

/* Scroll reveal: elements start hidden and fade in when they enter the viewport.
   Each section sets its own --nf-reveal-* values to match the live timing. */
[data-reveal] {
  opacity: var(--nf-reveal-from-opacity, 0);
  transform: var(--nf-reveal-from-transform, none);
  transition: opacity var(--nf-reveal-duration, 0.6s) var(--nf-reveal-ease, ease) var(--nf-reveal-delay, 0s),
              transform var(--nf-reveal-duration, 0.6s) var(--nf-reveal-ease, ease) var(--nf-reveal-delay, 0s),
              filter var(--nf-reveal-duration, 0.6s) var(--nf-reveal-ease, ease) var(--nf-reveal-delay, 0s);
}
[data-reveal].is-revealed { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* Bold inside regular-weight text, the same in every browser.
   Live sets <strong> in SF Pro families that have no bold face (Regular, Medium), so the browser fakes the bold.
   Chrome keeps the regular letter widths and thickens the outline; Safari also widens every letter (about 17%), so
   lines run longer there and can wrap. We draw Chrome's version explicitly in both browsers: no synthesis (regular
   widths) plus an outline stroke of Chrome's fake-bold strength (Skia: 1/24 em at 9px to 1/32 em at 36px, ~0.038em
   for this site's 14-20px copy). Text in families with a real bold face (the system-font headline) is left alone. */
strong { font-synthesis-weight: none; -webkit-text-stroke: 0.038em currentColor; }
.nf-buildings__title strong { font-synthesis-weight: auto; -webkit-text-stroke: 0; }