/* ros-ecology redesign — shared design tokens */

/* =====================================================================
   FONT FACE DECLARATIONS
   ---------------------------------------------------------------------
   1) "IBM Plex Mono" is REMAPPED to system monospace fonts via local().
      This drops a render-blocking Google Font request without rewriting
      every `font-family: 'IBM Plex Mono', monospace` declaration in the
      codebase. Browsers resolve the @font-face to whichever local() font
      they find first — covering macOS, Windows, Linux, iOS, Android.

   2) "Manrope" / "PT Serif" — example self-hosted @font-face blocks are
      provided commented-out below. To activate: download woff2 files for
      Cyrillic + Latin subsets via google-webfonts-helper.herokuapp.com,
      drop them into public/fonts/, then uncomment and remove the
      <link href="fonts.googleapis.com/...">  in app.blade.php.
   ===================================================================== */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: local('SF Mono'),
       local('SFMono-Regular'),
       local('Menlo'),
       local('Monaco'),
       local('Cascadia Mono'),
       local('Cascadia Code'),
       local('Consolas'),
       local('DejaVu Sans Mono'),
       local('Liberation Mono'),
       local('Roboto Mono'),
       local('Courier New');
}

/* ---------------------------------------------------------------------
   Self-hosted font example — uncomment after placing woff2 files at
   /public/fonts/. Keep only the weights actually used in the design.
   --------------------------------------------------------------------- */
/*
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/manrope-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/pt-serif-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
*/

:root {
  --green-900: #0E2E1C;
  --green-800: #1F4A2E;
  --green-700: #2D6140;
  --green-500: #4C8A5A;
  --green-400: #6BA84F;
  --green-50:  #EDF2EA;

  --ink: #0F1A14;
  --slate-700: #3A4A40;
  --slate-500: #5A6B5F;
  --slate-300: #B8BFB6;
  --rule: #D9DBD2;

  --paper: #F7F5EF;
  --paper-2: #EFEDE4;
  --white: #FFFFFF;

  --sig: #C9E265; /* a warmer signal accent, used sparingly */

  --radius: 4px;
  --radius-lg: 8px;

  --fs-0: 13px;
  --fs-1: 15px;
  --fs-2: 17px;
  --fs-3: 22px;
  --fs-4: 28px;
  --fs-5: 40px;
  --fs-6: 56px;
  --fs-7: 76px;

  --container: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--fs-2);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: 'PT Serif', Georgia, serif; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
.h1 { font-size: clamp(40px, 6vw, var(--fs-7)); line-height: 1.02; }
.h2 { font-size: clamp(32px, 4vw, var(--fs-6)); }
.h3 { font-size: clamp(22px, 2.2vw, var(--fs-4)); }
.h4 { font-size: var(--fs-3); }

a { color: inherit; text-decoration: none; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-feature-settings: "ss01", "ss02"; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--green-700);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--green-700); display: inline-block;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--green-800); color: #fff; }
.btn-primary:hover { background: var(--green-900); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-inverse { background: var(--sig); color: var(--green-900); }
.btn-inverse:hover { background: #DAF280; }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Top bar (always visible contact) */
.topbar {
  background: var(--green-900);
  color: #D5E0D4;
  font-size: 13px;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 40px; gap: 24px; }
.topbar a { color: #fff; }
.topbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); display: inline-block; margin-right: 8px; vertical-align: middle; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,245,239, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 4px;
  background: var(--green-800);
  color: #fff;
  display: grid; place-items: center;
  font-family: 'PT Serif', serif; font-weight: 700; font-size: 20px;
  letter-spacing: -0.03em;
}
.brand-name { font-family: 'PT Serif', serif; font-weight: 700; font-size: 18px; letter-spacing: 0.02em; }
.brand-sub { font-size: 11px; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.18em; font-family: 'IBM Plex Mono', monospace; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: 15px; color: var(--slate-700); font-weight: 500; position: relative; padding: 4px 0; }
.nav a:hover, .nav a.active { color: var(--green-900); }
.nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--green-800); }

.header-cta { display: flex; align-items: center; gap: 16px; }
.header-phone { font-weight: 700; color: var(--ink); font-size: 16px; font-family: 'IBM Plex Mono', monospace; letter-spacing: -0.02em; }
.header-phone small { display: block; font-size: 10px; font-weight: 500; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.18em; font-family: 'IBM Plex Mono', monospace; }

.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; align-items: center; justify-content: center; }

/* Section utilities */
section { padding: 96px 0; }
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; margin-bottom: 56px; align-items: end; }
.section-head .lede { color: var(--slate-500); font-size: 18px; max-width: 56ch; }

/* Footer */
.site-footer { background: var(--green-900); color: #CFDBCE; padding: 72px 0 32px; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-grid h5 { font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; font-size: 11px; letter-spacing: 0.2em; color: #8FA391; margin: 0 0 16px; font-weight: 500; }
.footer-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; font-size: 12px; color: #8FA391; font-family: 'IBM Plex Mono', monospace; }

/* Mobile */
@media (max-width: 960px) {
  section { padding: 64px 0; }
  .container { padding: 0 20px; }
  .nav, .header-cta .btn { display: none; }
  .burger { display: inline-flex; }
  .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .topbar .container { font-size: 12px; gap: 12px; overflow-x: auto; white-space: nowrap; }
}