/* Reset + typographic base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--c-dark);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/*
 * Locks scrolling while the franchise modal is open.
 *
 * Taken out of flow rather than given `overflow: hidden` — body overflow
 * propagates to the viewport, and the browser clamps the scroll position to 0
 * the moment the viewport stops being scrollable, which rewound the page to
 * the top behind the open form. `top` is set inline by the script to the
 * visitor's scroll position, so the page does not appear to move at all.
 */
body.is-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

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

/*
 * Browser chrome we didn't draw still belongs to the design — selection,
 * caret and scrollbar all ship with defaults that match no palette.
 */
::selection {
  background: var(--c-gold);
  color: var(--c-ink);
}

.section--light ::selection,
.site-footer ::selection {
  background: var(--c-ink);
  color: var(--c-white);
}

input,
textarea {
  caret-color: var(--c-gold);
}

html {
  scrollbar-color: #4a4a4a var(--c-dark);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--c-dark);
}

::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border: 3px solid var(--c-dark);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5f5f5f;
}

/* Screen-reader only */
.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;
}

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

/* Gutters live inside the cap, so --page-max is the full page width */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Breaks a child out of the container back to the full viewport width */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Sections that sit on the dark canvas */
.section {
  position: relative;
  padding-block: var(--section-pt) var(--section-pb);
}

/* Light "card" sections — white sheet with rounded corners over the dark canvas */
.section--light {
  background: var(--c-white);
  color: var(--c-ink);
  border-radius: var(--radius-section);
  overflow: hidden;
}

/* ------------------------------------------------------- Cheese pattern */
/*
 * The wedge pattern sits behind most sections at 10% opacity. It is applied as
 * a mask so each section can tint it: warm tan on light sheets, grey on dark.
 *
 * Tiled at one fixed size everywhere (--pattern-tile), because that is what
 * the design does: Figma lays the same 718×1164 unit into every section that
 * carries the pattern, repeating it sideways on desktop and downwards on
 * mobile, and never rescales it between breakpoints.
 *
 * This used to be `cover`, which sizes the artwork off each section's own box
 * and so quietly changed the wedge size per section and per viewport —
 * measured at 718px on a 1440 desktop but 523px in the same section at 768,
 * against a Figma truth of 718 everywhere. A fixed tile is what keeps the
 * wedges one size across every section and every screen.
 */
.pattern {
  position: absolute;
  inset: 0;
  background-color: var(--pattern-color, #494949);
  opacity: 0.1;
  pointer-events: none;
  -webkit-mask: url('../svg/pattern.svg') repeat top center / var(--pattern-tile);
  mask: url('../svg/pattern.svg') repeat top center / var(--pattern-tile);
}

.section--light {
  --pattern-color: #c3b6a2;
}

/*
 * One pattern layer for the whole run (pillars → team), held still in the
 * viewport while the sections scroll over it.
 *
 * It is a viewport-tall sticky box pulled back out of flow by an equal
 * negative margin, so it adds no height of its own: it pins at the top of the
 * viewport for as long as the run has room below, then travels off with the
 * run's bottom edge.
 *
 * One layer, deliberately. This was three — the shared run, the "why"
 * section's own, and a third behind different+benefits — each anchoring the
 * tile to its own top. Because those tops are not whole multiples of the tile
 * apart, the phase jumped at every handover and drew a hard horizontal line
 * across the page at each one. A single layer has no boundary to misalign,
 * which is also why nothing here needs an opaque backer any more: there is no
 * second layer left to double-expose against.
 *
 * The artwork tiles at its authored size (--pattern-tile). An earlier version
 * tiled a 2×2 mirrored "supertile", built on the assumption that the export
 * was a one-off panel that would seam if repeated — that was wrong. Measured:
 * pattern.svg repeats cleanly on its own (0.00 difference across the vertical
 * join, no hard transitions at either edge) because it is genuinely two copies
 * of one seamless 718×1164 unit. Mirroring was never needed and was actively
 * harmful: reflecting an organic scatter puts bilateral symmetry into it,
 * producing bow-tie shapes that appear nowhere in the Figma art.
 */
.pattern-run {
  position: relative;
  /*
   * Clips the sticky layer above to this box.
   *
   * The layer is fixed to the viewport but a viewport tall, so near the end of
   * the run it still painted a full screen of pattern downwards — straight over
   * "Locațiile noastre", which has none in the design. A gradient used to try
   * to hide that, but it sat in the document while the pattern sat in the
   * viewport, so the two drifted apart as you scrolled: the gradient washed out
   * the bottom 63% of the team section on desktop and had already scrolled away
   * by the time locations arrived, which is the worst of both.
   *
   * Clipping ends the pattern exactly where the run ends. `clip` rather than
   * `hidden` on purpose — `hidden` would make this a scroll container and break
   * the sticky positioning it exists to support, both here and in the pinned
   * "why" section inside it.
   */
  overflow: clip;
}

.pattern-run__bg {
  position: sticky;
  /*
   * `top` must be a real length, not auto. Sticky only constrains the axes it
   * is given an offset for, so inheriting .pattern's `inset: 0` shorthand — or
   * resetting it to auto — leaves the layer scrolling 1:1 with the page and
   * the whole effect silently does nothing.
   */
  top: 0;
  right: auto;
  bottom: auto;
  left: auto;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  z-index: 0;
}


/* --------------------------------------------------------- Typography */

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--c-white-60);
}

.section--light .eyebrow {
  color: var(--c-dark-60);
}

.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 64px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: url('../svg/ornament-left.svg') no-repeat center / contain;
  mask: url('../svg/ornament-left.svg') no-repeat center / contain;
}

.eyebrow::after {
  -webkit-mask-image: url('../svg/ornament-right.svg');
  mask-image: url('../svg/ornament-right.svg');
}

/* Left-aligned variant used by the "why" and "team" sections */
.eyebrow--start {
  justify-content: flex-start;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
  color: var(--c-white);
}

.section--light .section-title {
  color: var(--c-ink);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

@media (max-width: 767px) {
  .section-title {
    font-size: 28px;
    line-height: 34px;
  }

  .eyebrow {
    font-size: 15px;
  }

  .eyebrow::before,
  .eyebrow::after {
    width: 44px;
  }
}