/* ======================================================================
 * Техноткань — технические ткани и швейный цех в Томске
 * 1. Токены и базовые стили дизайн-системы.
 * 2. Собственные стили страницы.
 * 3. Классы .uN — бывшие инлайновые стили макета.
 * 4. Рукописные правки и адаптив — в custom.css и responsive.css.
 * ==================================================================== */

/* Tehnotkan — base element defaults + link styling.
   Keeps specimen cards and consuming pages consistent. */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--text-ink);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); }

/* Uppercase overline label helper */
.tk-overline {
  font-family: var(--font-body);
  font-size: var(--overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Tehnotkan — Color tokens
   Sampled from the real site backgrounds: deep fabric-green header/page,
   olive-wood top menu, cream/wheat footer, brass-grommet gold accent. */
:root {
  /* Brand green — the fabric/canvas green that defines Tehnotkan */
  --green-950: #062a20; /* deepest ink-green */
  --green-900: #08382c; /* header band (header_bg) */
  --green-800: #045044; /* page floor (bg) */
  --green-700: #0f5749;
  --green-600: #166255; /* primary brand green (prod_bg) */
  --green-500: #1f7a68; /* interactive / hover-light */
  --green-400: #2f9683;

  /* Sand / cream — footer + light surfaces */
  --sand-50:  #f6f6ea;
  --sand-100: #eeeed7;
  --sand-200: #dcdcc0; /* footer_bg */
  --sand-300: #c9c9a8;

  /* Wood / taupe — top menu bar (topmenu_bg) */
  --taupe-700: #4a4534;
  --taupe-600: #5d5742; /* top menu */
  --taupe-500: #746c52;

  /* Brass / gold — grommets, rivets, metal hardware accent */
  --brass-700: #8a6f2f;
  --brass-600: #a8863a;
  --brass-500: #bf9e4a; /* primary accent */
  --brass-400: #d4b968;

  /* Semantic */
  --semantic-success: #3f8f4e;
  --semantic-error:   #c0392b;
  --semantic-warning: #d68a1e;

  /* ---- Semantic aliases (use these in components) ---- */
  --brand-primary:        var(--green-600);
  --brand-primary-strong: var(--green-800);
  --brand-primary-hover:  var(--green-500);
  --brand-accent:         var(--brass-500);
  --brand-accent-hover:   var(--brass-400);

  /* Surfaces */
  --canvas:         var(--sand-50);   /* light page background */
  --canvas-deep:    var(--green-900); /* dark green band */
  --surface-card:   #ffffff;
  --surface-strong: var(--sand-100);
  --surface-sunken: var(--sand-200);
  --surface-dark:   var(--green-900);
  --surface-dark-elevated: var(--green-800);

  /* Hairlines / borders */
  --hairline:        #d8d8bd;
  --hairline-soft:   #e6e6d2;
  --hairline-strong: #c4c4a4;
  --hairline-on-dark: rgba(246,246,234,0.18);

  /* Text */
  --text-ink:        #1b1c14; /* headings / primary on light */
  --text-body:       #3c3d30; /* running text on light */
  --text-muted:      #6b6c5a; /* captions, sub-labels */
  --text-muted-soft: #9a9a82; /* disabled */
  --text-on-primary: #f6f6ea; /* text on green pill */
  --text-on-dark:    #f4f4e6; /* text on dark green band */
  --text-on-dark-soft: #b9c6bd;
  --text-accent:     var(--brass-700);
  --text-link:       var(--green-600);
  --text-link-hover: var(--brass-600);
}

/* Tehnotkan — Elevation / shadows.
   Grounded, catalogue-flat: hairline borders + one soft drop tier.
   Brass focus ring for interactive states. */
:root {
  --shadow-none: none;
  --shadow-card: 0 1px 3px rgba(20, 34, 26, 0.10);
  --shadow-raised: 0 6px 20px rgba(8, 40, 30, 0.14);
  --shadow-overlay: 0 12px 32px rgba(6, 34, 26, 0.24);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Focus ring — brass */
  --focus-ring: 0 0 0 3px rgba(191, 158, 74, 0.45);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 260ms; /* @kind other */
}

/* Tehnotkan — Fonts
   No brand font files were provided in the source repo.
   SUBSTITUTES (flag to client): Oswald for industrial display/headings,
   PT Sans for body — both have full Cyrillic coverage, matching the
   Russian-language B2B catalogue. */


/* Tehnotkan — Shape (radius) tokens.
   Industrial, restrained corners; pills reserved for buttons/badges. */
:root {
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;  /* inputs, small chips */
  --radius-md: 6px;  /* buttons, cards */
  --radius-lg: 8px;  /* product cards */
  --radius-xl: 12px; /* feature panels */
  --radius-pill: 999px; /* badges, tag pills */
  --radius-full: 9999px; /* avatars, icon circles */

  --border-width: 1px; /* @kind other */
  --border-width-strong: 2px; /* @kind other */
}

/* Tehnotkan — Spacing tokens. Base unit 4px. */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-section: 72px; /* rhythm between page bands */

  --container-max: 1200px;
  --container-pad: 24px;
}

/* Tehnotkan — Typography tokens
   Display/headings: Oswald (condensed, industrial, uppercase-friendly).
   Body/UI: PT Sans (Cyrillic-native workhorse). */
:root {
  --font-display: 'Oswald', 'PT Sans Narrow', 'Arial Narrow', sans-serif;
  --font-body: 'PT Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Display scale — Oswald, tight, often uppercase */
  --display-hero:   48px; /* hero H1 */
  --display-xl:     38px; /* page titles */
  --display-lg:     30px; /* section heads */
  --display-md:     24px; /* sub-section / card group */
  --display-sm:     20px; /* card titles */

  --lh-display: 1.12; /* @kind other */
  --ls-display: 0.2px;      /* @kind other */
  --ls-display-caps: 0.6px; /* @kind other */

  /* Body scale — PT Sans */
  --title-md:  18px; /* component titles */
  --title-sm:  16px; /* list labels */
  --body-lg:   17px;
  --body-md:   15px; /* default body */
  --body-sm:   14px;
  --caption:   13px;
  --overline:  12px; /* uppercase section labels */

  --lh-body: 1.55; /* @kind other */
  --lh-tight: 1.35; /* @kind other */
  --ls-body: 0.1px; /* @kind other */
  --ls-overline: 1.2px; /* @kind other */

  --button-size: 15px;
  --nav-link: 15px;
}

/* Tehnotkan Design System — global entry point.
   Consumers link THIS file. Import order only; no rules here. */









/* --- Стили страницы --- */
* { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body { font-family: var(--font-body); color: var(--text-body); background: var(--sand-50); -webkit-font-smoothing: antialiased; }
    a { color: var(--text-link); text-decoration: none; }
    a:hover { color: var(--text-link-hover); }
    button { font-family: var(--font-body); }
    img { display: block; }

/* --- Стили макета --- */
.u1{width: 100%; overflow-x: hidden;}
.u2{position: sticky; top: 0px; z-index: 100;}
.u3{background: var(--green-950); color: var(--text-on-dark-soft); font-size: 13px;}
.u4{max-width: 1200px; margin: 0px auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.u5{display: inline-flex; align-items: center; gap: 8px;}
.u6{display: inline-flex; align-items: center; gap: 18px;}
.u7{font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--sand-50); letter-spacing: 0.5px; line-height: 1; white-space: nowrap; text-decoration: none;}
.u8{display: contents;}
.u9{display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 13px; line-height: 1; letter-spacing: 0.2px; padding: 7px 14px; min-height: 34px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; opacity: 1; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); text-decoration: none; white-space: nowrap; background: var(--brand-accent); color: var(--green-950);}
.u10{display: inline-flex; gap: 8px;}
.u11{width: 30px; height: 30px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(246, 246, 234, 0.1); color: var(--sand-50); border: 1px solid rgba(246, 246, 234, 0.18); cursor: pointer;}
.u11:hover{background:var(--brass-500); color:var(--green-950); border-color:var(--brass-500);}
.u12{width: 30px; height: 30px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(246, 246, 234, 0.1); color: var(--sand-50); border: 1px solid rgba(246, 246, 234, 0.18); cursor: pointer; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.3px;}
.u12:hover{background:var(--brass-500); color:var(--green-950); border-color:var(--brass-500);}
.u13{background: var(--green-900); border-bottom: 1px solid rgba(246, 246, 234, 0.1);}
.u14{max-width: 1200px; margin: 0px auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.u15{display: flex; flex-direction: column; gap: 0px; text-decoration: none;}
.u16{font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: 1.5px; color: var(--sand-50); text-transform: uppercase; line-height: 1;}
.u17{font-size: 11px; letter-spacing: 1px; color: var(--brass-400); text-transform: uppercase; margin-top: 3px;}
.u18{display: flex; align-items: center; gap: 22px;}
.u19{font-size: 15px; color: var(--sand-100); text-decoration: none; white-space: nowrap; padding: 6px 0px; border-bottom: 2px solid transparent;}
.u19:hover{color:var(--brass-400); border-bottom-color:var(--brass-400);}
.u20{position: relative; background: var(--green-950);}
.u21{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease-standard);}
.u22{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .8s var(--ease-standard);}
.u23{position: absolute; inset: 0px; background: linear-gradient(120deg, rgba(6, 42, 32, 0.94) 0%, rgba(6, 42, 32, 0.82) 45%, rgba(8, 56, 44, 0.62) 100%);}
.u24{position: absolute; top: 50%; left: 16px; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 9999px; border: 1px solid rgba(246, 246, 234, 0.25); background: rgba(6, 42, 32, 0.4); color: var(--sand-50); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;}
.u24:hover{background:var(--brass-500); color:var(--green-950); border-color:var(--brass-500);}
.u25{position: absolute; top: 50%; right: 16px; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 9999px; border: 1px solid rgba(246, 246, 234, 0.25); background: rgba(6, 42, 32, 0.4); color: var(--sand-50); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;}
.u25:hover{background:var(--brass-500); color:var(--green-950); border-color:var(--brass-500);}
.u26{position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px; background: rgba(6, 42, 32, 0.5); border: 1px solid rgba(246, 246, 234, 0.2); font-family: var(--font-display); font-weight: 500; font-size: 14px; letter-spacing: 1px; color: var(--sand-50);}
.u27{color: var(--brass-400);}
.u28{opacity: 0.5;}
.u29{position: relative; max-width: 1200px; margin: 0px auto; padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 24px);}
.u30{max-width: 820px;}
.u31{display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brass-400); margin-bottom: 18px;}
.u32{font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.1; letter-spacing: 0.4px; color: var(--text-on-dark); text-transform: uppercase; margin: 0px 0px 22px; text-wrap: balance;}
.u33{font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; color: var(--text-on-dark-soft); max-width: 720px; margin: 0px 0px 30px;}
.u34{display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px;}
.u35{display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 16px; line-height: 1; letter-spacing: 0.2px; padding: 13px 28px; min-height: 50px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; opacity: 1; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); text-decoration: none; white-space: nowrap; background: var(--sand-50); color: var(--green-900);}
.u36{display: flex; flex-wrap: wrap; gap: 10px;}
.u37{display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9999px; background: rgba(246, 246, 234, 0.08); border: 1px solid rgba(246, 246, 234, 0.16); font-size: 13px; color: var(--sand-100);}
.u38{background: var(--sand-50); padding: clamp(48px, 7vw, 72px) clamp(16px, 4vw, 24px);}
.u39{max-width: 1200px; margin: 0px auto;}
.u40{text-align: center; margin-bottom: 36px;}
.u41{font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-accent);}
.u42{font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-ink); margin: 8px 0px 0px;}
.u43{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;}
.u44{background: var(--surface-card); border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column;}
.u45{position: relative; height: 210px;}
.u46{width: 100%; height: 100%; object-fit: cover;}
.u47{position: absolute; top: 14px; left: 14px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 11px; border-radius: 9999px; background: var(--brass-500); color: var(--green-950);}
.u48{padding: 26px; display: flex; flex-direction: column; gap: 16px; flex: 1 1 0%;}
.u49{font-family: var(--font-display); font-weight: 500; font-size: 23px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-ink); margin: 0px;}
.u50{font-size: 15px; line-height: 1.6; color: var(--text-body); margin: 0px; flex: 1 1 0%;}
.u51{display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 15px; line-height: 1; letter-spacing: 0.2px; padding: 10px 20px; min-height: 42px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; opacity: 1; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); text-decoration: none; white-space: nowrap; background: var(--brand-primary); color: var(--text-on-primary);}
.u52{background: var(--surface-card); padding: clamp(48px, 7vw, 72px) clamp(16px, 4vw, 24px);}
.u53{margin-bottom: 32px;}
.u54{font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-ink); margin: 8px 0px;}
.u55{font-size: 16px; color: var(--text-muted); margin: 0px; max-width: 760px;}
.u56{display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px;}
.u57{position: relative; display: block; height: 150px; overflow: hidden; border-radius: var(--radius-lg); text-decoration: none; box-shadow: var(--shadow-card); transition: box-shadow var(--dur-base) var(--ease-standard);}
.u58{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform var(--dur-slow) var(--ease-out);}
.u59{position: absolute; inset: 0px; background: linear-gradient(rgba(6, 42, 32, 0.92) 0%, rgba(6, 42, 32, 0.35) 45%, rgba(6, 42, 32, 0) 75%);}
.u60{position: absolute; left: 16px; right: 16px; top: 14px; display: flex; flex-direction: column; gap: 2px;}
.u61{font-family: var(--font-display); font-size: 18px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-on-dark); line-height: 1.15;}
.u62{position: absolute; bottom: 12px; right: 12px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--brand-accent); color: var(--green-950); font-size: 14px; font-weight: 700; opacity: 1; transform: translateX(0px); transition: transform var(--dur-base) var(--ease-standard);}
.u63{display: flex; justify-content: center; margin-top: 32px;}
.u64{display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 16px; line-height: 1; letter-spacing: 0.2px; padding: 13px 28px; min-height: 50px; border-width: 1px; border-style: solid; border-color: var(--hairline-strong); border-image: initial; border-radius: var(--radius-md); cursor: pointer; opacity: 1; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); text-decoration: none; white-space: nowrap; background: transparent; color: var(--brand-primary-strong);}
.u65{display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px;}
.u66{position: relative; display: block; height: 180px; overflow: hidden; border-radius: var(--radius-lg); text-decoration: none; box-shadow: var(--shadow-card); transition: box-shadow var(--dur-base) var(--ease-standard);}
.u67{margin-top: 28px; background: var(--green-900); border-radius: 12px; padding: clamp(22px, 3vw, 30px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;}
.u68{flex: 1 1 0%; min-width: 260px;}
.u69{font-family: var(--font-display); font-weight: 500; font-size: 22px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-on-dark); margin: 0px 0px 6px;}
.u70{font-size: 15px; color: var(--text-on-dark-soft); margin: 0px;}
.u71{display: flex; align-items: center; gap: 12px;}
.u72{font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--brass-400);}
.u73{width: 46px; height: 46px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(246, 246, 234, 0.1); color: var(--sand-50); border: 1px solid rgba(246, 246, 234, 0.2); cursor: pointer;}
.u73:hover{background:var(--brass-500); color:var(--green-950); border-color:var(--brass-500);}
.u74{width: 46px; height: 46px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(246, 246, 234, 0.1); color: var(--sand-50); border: 1px solid rgba(246, 246, 234, 0.2); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 17px;}
.u74:hover{background:var(--brass-500); color:var(--green-950); border-color:var(--brass-500);}
.u75{position: relative; background: var(--green-900);}
.u76{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0.28;}
.u77{position: relative; max-width: 1200px; margin: 0px auto; padding: clamp(48px, 7vw, 72px) clamp(16px, 4vw, 24px);}
.u78{margin-bottom: 28px;}
.u79{font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brass-400);}
.u80{font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-on-dark); margin: 8px 0px;}
.u81{font-size: 16px; color: var(--text-on-dark-soft); margin: 0px; max-width: 760px;}
.u82{position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-overlay); height: clamp(280px, 46vw, 480px);}
.u83{display: flex; height: 100%; transform: translateX(0%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);}
.u84{flex: 0 0 100%; position: relative; height: 100%;}
.u85{position: absolute; inset: 0px; background: linear-gradient(to top, rgba(6, 42, 32, 0.92) 0%, rgba(6, 42, 32, 0.15) 55%, rgba(6, 42, 32, 0) 80%);}
.u86{position: absolute; left: 0px; right: 0px; bottom: 0px; padding: clamp(20px, 4vw, 36px);}
.u87{display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brass-400); margin-bottom: 8px;}
.u88{font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 3vw, 30px); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-on-dark); line-height: 1.15;}
.u89{position: absolute; top: 50%; left: 16px; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 9999px; border: none; background: rgba(6, 42, 32, 0.55); color: var(--sand-50); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);}
.u89:hover{background:var(--brass-500); color:var(--green-950);}
.u90{position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 9999px; border: none; background: rgba(6, 42, 32, 0.55); color: var(--sand-50); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);}
.u90:hover{background:var(--brass-500); color:var(--green-950);}
.u91{display: flex; justify-content: center; gap: 8px; margin-top: 18px;}
.u92{width: 28px; height: 10px; border: none; border-radius: 9999px; cursor: pointer; padding: 0px; background: var(--brass-500); transition: width 0.3s, background 0.3s;}
.u93{width: 10px; height: 10px; border: none; border-radius: 9999px; cursor: pointer; padding: 0px; background: rgba(246, 246, 234, 0.35); transition: width 0.3s, background 0.3s;}
.u94{display: flex; justify-content: center; margin-top: 26px;}
.u95{margin-bottom: 36px;}
.u96{display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;}
.u97{display: flex; flex-direction: column; gap: 12px; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: 12px; padding: 24px;}
.u98{display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 6px; background: var(--green-900); color: var(--brass-500);}
.u99{font-size: 20px; font-weight: 500; color: var(--text-ink); margin: 0px;}
.u100{font-size: 15px; color: var(--text-body); margin: 0px;}
.u101{background: var(--sand-100); padding: clamp(48px, 7vw, 72px) clamp(16px, 4vw, 24px);}
.u102{display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 34px;}
.u103{position: relative; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: 12px; padding: 26px 24px;}
.u104{font-family: var(--font-display); font-weight: 600; font-size: 40px; color: var(--brass-500); line-height: 1;}
.u105{font-size: 18px; font-weight: 700; color: var(--text-ink); margin: 12px 0px 8px;}
.u106{font-size: 14px; color: var(--text-body); margin: 0px;}
.u107{display: flex; flex-wrap: wrap; align-items: center; gap: 16px;}
.u108{font-family: var(--font-display); font-weight: 500; font-size: 20px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-ink);}
.u109{display: flex; gap: 12px;}
.u110{width: 46px; height: 46px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--green-900); color: var(--sand-50); cursor: pointer;}
.u110:hover{background:var(--brass-500); color:var(--green-950);}
.u111{width: 46px; height: 46px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--green-900); color: var(--sand-50); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 17px;}
.u111:hover{background:var(--brass-500); color:var(--green-950);}
.u112{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0.25;}
.u113{position: relative; max-width: 1000px; margin: 0px auto; padding: clamp(48px, 7vw, 72px) clamp(16px, 4vw, 24px);}
.u114{font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-on-dark); margin: 8px 0px 20px;}
.u115{font-size: clamp(15px, 1.7vw, 18px); line-height: 1.7; color: var(--text-on-dark-soft); margin: 0px 0px 16px;}
.u116{font-size: clamp(15px, 1.7vw, 18px); line-height: 1.7; color: var(--text-on-dark-soft); margin: 0px 0px 26px;}
.u117{max-width: 840px; margin: 0px auto;}
.u118{margin-bottom: 32px; text-align: center;}
.u119{display: flex; flex-direction: column; gap: 12px;}
.u120{border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface-card); overflow: hidden;}
.u121{width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: none; cursor: pointer; text-align: left;}
.u122{font-size: 16px; font-weight: 700; color: var(--text-ink);}
.u123{display: inline-flex; flex: 0 0 auto; transform: rotate(0deg); transition: transform .2s var(--ease-standard);}
.u124{max-height: 0px; opacity: 0; overflow: hidden; transition: max-height .26s var(--ease-standard), opacity .26s var(--ease-standard);}
.u125{margin: 0px; padding: 0px 20px 18px; font-size: 15px; line-height: 1.6; color: var(--text-body);}
.u126{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0.3;}
.u127{position: relative; max-width: 1000px; margin: 0px auto; padding: clamp(48px, 7vw, 76px) clamp(16px, 4vw, 24px); text-align: center;}
.u128{font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.4vw, 36px); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-on-dark); margin: 0px 0px 14px; line-height: 1.3; text-wrap: balance;}
.u129{font-size: clamp(15px, 1.7vw, 18px); color: var(--text-on-dark-soft); margin: 0px auto 34px; max-width: 680px;}
.u130{display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 34px;}
.u131{display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border-radius: 9999px; background: rgba(246, 246, 234, 0.08); border: 1px solid rgba(246, 246, 234, 0.2); color: var(--sand-50); cursor: pointer;}
.u131:hover{background:var(--brass-500); color:var(--green-950); border-color:var(--brass-500);}
.u132{font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: 0.5px;}
.u133{font-family: var(--font-display); font-weight: 600; font-size: 20px;}
.u134{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px;}
.u135{font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 28px); color: var(--sand-50); letter-spacing: 0.5px; text-decoration: none;}
.u136{font-size: 16px; color: var(--brass-400); text-decoration: none;}
.u137{display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 16px; line-height: 1; letter-spacing: 0.2px; padding: 13px 28px; min-height: 50px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; opacity: 1; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); text-decoration: none; white-space: nowrap; background: var(--brand-accent); color: var(--green-950);}
.u138{background: var(--sand-200); border-top: 2px dashed var(--green-700);}
.u139{max-width: 1200px; margin: 0px auto; padding: clamp(40px, 6vw, 60px) clamp(16px, 4vw, 24px);}
.u140{display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px;}
.u141{font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: 1.5px; color: var(--green-900); text-transform: uppercase;}
.u142{font-size: 12px; letter-spacing: 0.5px; color: var(--taupe-600); text-transform: uppercase; margin: 4px 0px 14px;}
.u143{font-size: 14px; color: var(--text-body); margin: 0px; max-width: 280px;}
.u144{display: flex; gap: 10px; margin-top: 16px;}
.u145{width: 42px; height: 42px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--green-900); color: var(--sand-50); cursor: pointer;}
.u145:hover{background:var(--brass-500); color:var(--green-950);}
.u146{width: 42px; height: 42px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--green-900); color: var(--sand-50); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 15px;}
.u146:hover{background:var(--brass-500); color:var(--green-950);}
.u147{font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--green-900); margin-bottom: 14px;}
.u148{display: flex; flex-direction: column; gap: 10px;}
.u149{font-size: 14px; color: var(--text-body); text-decoration: none;}
.u149:hover{color:var(--text-link-hover);}
.u150{display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--text-body);}
.u151{font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--green-900); text-decoration: none; letter-spacing: 0.5px;}
.u152{color: var(--text-body); text-decoration: none;}
.u152:hover{color:var(--text-link-hover);}
.u153{position: relative; height: 150px; border-radius: 8px; overflow: hidden; border: 1px solid var(--hairline-strong); background: var(--green-800);}
.u154{position: absolute; inset: 0px; background-image: linear-gradient(var(--hairline-on-dark) 1px, transparent 1px), linear-gradient(90deg, var(--hairline-on-dark) 1px, transparent 1px); background-size: 26px 26px; opacity: 0.6;}
.u155{position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--sand-50); text-align: center; padding: 12px;}
.u156{font-size: 13px; line-height: 1.4;}
.u157{margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hairline-strong); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--taupe-600);}