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

/* ============================================================
   Фея — Color tokens
   Anchors preserved from the client logo for continuity:
     brand  #3399CC  (fresh azure — the structural brand color)
     paper  #F8F7EB  (warm cream — the secondary brand surface)
   Palette from brief §4 reconciled around those two anchors:
   fresh blue for trust & cleanliness, fresh green for action.
   ============================================================ */
:root {
  /* --- Base ramp: ink (deep blue-teal) --- */
  --ink-900: #0F2E3D; /* headings, primary text */
  --ink-700: #234A5A;
  --ink-500: #5B7178; /* muted / steel — captions, secondary */
  --ink-300: #9DB0B6;

  /* --- Brand ramp: fresh azure (anchor #3399CC) --- */
  --brand-700: #1E6E96; /* deep — B2B surface, pressed states */
  --brand-600: #2A85B8;
  --brand-500: #3399CC; /* ANCHOR — links, icons, structure */
  --brand-400: #63B2DA;
  --brand-200: #B7DDF0;
  --brand-100: #E8F4FA; /* pale sky — light brand surface */
  --brand-tint: #E8F4FA; /* alias for section tints */

  /* --- Accent ramp: fresh green (warmth, action) --- */
  --accent-600: #178A5B; /* pressed */
  --accent-500: #1FA971; /* CTA fill */
  --accent-300: #8FD3B4;
  --accent-100: #E6F5EE; /* accent tint */

  /* --- Mint: secondary fresh highlight --- */
  --mint-500: #8FE3D0;
  --mint-100: #E4F7F2;

  /* --- Neutrals & surfaces --- */
  --white: #FFFFFF;
  --paper: #F8F7EB;   /* ANCHOR — warm cream, alt surface */
  --paper-soft: #FCFBF4;
  --border: #D5E6E9;  /* light aqua hairline */
  --border-warm: #E7E4D2; /* on paper surfaces */

  /* --- Semantic aliases (use these in components) --- */
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-text-on-brand: #FFFFFF;
  --color-text-on-accent: #FFFFFF;

  --color-brand: var(--brand-500);
  --color-brand-strong: var(--brand-700);
  --color-link: var(--brand-600);
  --color-link-hover: var(--brand-700);

  --color-accent: var(--accent-500);
  --color-accent-hover: var(--accent-600);

  --surface-base: var(--white);
  --surface-tint: var(--brand-100);   /* alternating section tint */
  --surface-paper: var(--paper);       /* warm alt surface */
  --surface-b2b: var(--brand-700);     /* B2B audience switch */
  --surface-card: var(--white);

  --color-border: var(--border);
  --color-border-strong: var(--brand-200);

  /* --- Semantic status (from the fresh/warm system) --- */
  --color-success: #2E9E7B;
  --color-success-tint: #E4F7F2;
  --color-error: #D64545;
  --color-error-tint: #FCECEC;

  /* --- Focus ring --- */
  --focus-ring: 0 0 0 3px rgba(51, 153, 204, 0.40);
  --focus-ring-accent: 0 0 0 3px rgba(31, 169, 113, 0.40);
}

/* Fonts — Onest (display) + Inter (body/utility). Both ship full Cyrillic.
   Loaded from Google Fonts; consumers need network access at author time.
   If you need offline/self-hosted binaries, swap these @imports for local @font-face. */



/* ============================================================
   Фея — Spacing, layout, radii, shadows, motion
   8px base grid. Air is part of the style.
   ============================================================ */
:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;   /* section gap (desktop) */
  --space-10: 120px; /* generous section gap */

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --section-y: 104px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;   /* buttons, inputs */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 24px;   /* large surfaces */
  --radius-pill: 999px;

  /* Shadows — soft, light, no heavy neon */
  --shadow-sm: 0 1px 2px rgba(15,46,61,0.04), 0 1px 3px rgba(15,46,61,0.06);
  --shadow-card: 0 4px 16px rgba(15,46,61,0.06), 0 1px 3px rgba(15,46,61,0.04);
  --shadow-hover: 0 14px 30px rgba(15,46,61,0.10), 0 4px 10px rgba(15,46,61,0.06);
  --shadow-scan: 0 8px 24px rgba(15,46,61,0.10), 0 2px 6px rgba(15,46,61,0.06);

  /* Motion — restrained */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --lift: -4px; /* @kind other */ /* card hover lift */
}

/* ============================================================
   Фея — Typography tokens
   Display: Onest (ExtraBold/Bold) — clean, warm, Cyrillic-native.
   Body:    Inter (Regular/Medium) — reference readability.
   Utility: Inter, uppercase, wide tracking — eyebrows, labels, data.
   ============================================================ */
:root {
  --font-display: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-utility: 'Inter', system-ui, -apple-system, sans-serif;

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

  /* Type scale (desktop) — fs=size, lh=line-height, ls=letter-spacing */
  --fs-h1: 60px;   --lh-h1: 1.04 /* @kind font */;  --ls-h1: -0.02em /* @kind font */;
  --fs-h2: 38px;   --lh-h2: 1.10 /* @kind font */;  --ls-h2: -0.015em /* @kind font */;
  --fs-h3: 26px;   --lh-h3: 1.20 /* @kind font */;  --ls-h3: -0.01em /* @kind font */;
  --fs-h4: 20px;   --lh-h4: 1.30 /* @kind font */;  --ls-h4: -0.005em /* @kind font */;
  --fs-body-lg: 18px; --lh-body-lg: 1.6 /* @kind font */;
  --fs-body: 17px;    --lh-body: 1.6 /* @kind font */;
  --fs-small: 15px;   --lh-small: 1.55 /* @kind font */;
  --fs-caption: 14px; --lh-caption: 1.45 /* @kind font */;
  --fs-eyebrow: 13px; --lh-eyebrow: 1.2 /* @kind font */; --ls-eyebrow: 0.14em /* @kind font */;

  /* Slogan triptych accent */
  --fs-slogan: 40px; --lh-slogan: 1.1 /* @kind font */; --ls-slogan: -0.01em /* @kind font */;
}







/* --- Стили страницы --- */
*{box-sizing:border-box;}
    body{margin:0;--surface-base:#FAFDFE;background:#FAFDFE;color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;}
    a{color:var(--color-link);text-decoration:none;}
    a:hover{color:var(--color-link-hover);}
    img{max-width:100%;}
    .reveal{transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);}
    html.reveal-ready .reveal{opacity:0;transform:translateY(20px);}
    html.reveal-ready .reveal.in{opacity:1;transform:none;}
    .feya-desk{display:flex;}
    .feya-mob-only{display:none;}
    .feya-mobilebar{display:none;}
    .feya-mobilebar-spacer{display:none;}
    [data-mappin]:focus-visible{outline:3px solid var(--brand-500);outline-offset:4px;border-radius:12px;}
    [data-scan]:focus-visible{outline:3px solid var(--brand-500);outline-offset:3px;border-radius:var(--radius-lg);}
    @media (max-width:880px){
      .feya-desk{display:none !important;}
      .feya-mob-only{display:flex !important;}
      .feya-mobilebar{display:flex !important;}
      .feya-mobilebar-spacer{display:block !important;}
    }
    @media (prefers-reduced-motion: reduce){
      html.reveal-ready .reveal{opacity:1 !important;transform:none !important;}
      *{scroll-behavior:auto !important;}
    }
    html{scroll-behavior:smooth;}
    #feya-trust-slider{scrollbar-width:none;-ms-overflow-style:none;}
    #feya-trust-slider::-webkit-scrollbar{display:none;width:0;height:0;}
    #feya-trust-slider .sc-host-x{display:flex;height:100%;width:100%;}
    #feya-trust-slider .sc-host-x > figure{flex:1 1 auto;height:100%;width:100%;}

/* --- Стили макета --- */
.u1{min-height: 100vh; background: var(--surface-base);}
.u2{position: sticky; top: 0px; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border);}
.u3{max-width: 1200px; margin: 0px auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px;}
.u4{display: flex; align-items: center; gap: 12px; flex: 0 0 auto; text-decoration: none;}
.u5{height: 46px; width: auto; display: block;}
.u6{flex-direction: column; line-height: 1.1;}
.u7{font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 18px; color: var(--ink-900); letter-spacing: -0.01em;}
.u8{font-size: 11px; letter-spacing: 0.06em; color: var(--color-text-muted); text-transform: uppercase;}
.u9{gap: 26px; margin-left: auto; align-items: center;}
.u10{font-size: 15px; font-weight: 500; color: var(--ink-700);}
.u11{gap: 14px; align-items: center; flex: 0 0 auto;}
.u12{display: contents;}
.u13{font-family: var(--font-body); font-weight: var(--fw-semibold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); -webkit-tap-highlight-color: transparent; font-size: 16px; padding: 12px 20px; background: var(--color-accent); color: var(--color-text-on-accent); box-shadow: none;}
.u14{margin-left: auto; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--brand-100); color: var(--brand-700); align-items: center; justify-content: center; flex: 0 0 auto;}
.u15{background: linear-gradient(180deg,#A0DAF2 0%,var(--surface-tint) 100%); padding: clamp(48px, 6vw, 88px) 0px clamp(56px, 7vw, 96px);}
.u16{max-width: 1200px; margin: 0px auto; padding: 0px 24px; display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: flex-start;}
.u17{flex: 1 1 460px; min-width: 300px; display: flex; flex-direction: column; gap: 22px;}
.u18{display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-utility); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-brand);}
.u19{font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(36px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink-900); margin: 0px; text-wrap: balance;}
.u20{font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(19px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -0.01em; margin: 0px; color: var(--ink-700);}
.u21{color: var(--color-accent);}
.u22{font-size: var(--fs-body-lg); line-height: 1.6; color: var(--color-text-muted); margin: 0px; max-width: 56ch;}
.u23{display: flex; flex-wrap: wrap; gap: 12px;}
.u24{display: inline-flex; align-items: center; gap: var(--space-3); padding: 10px 18px 10px 14px; border-radius: var(--radius-pill); background: var(--accent-100); border: 1px solid var(--accent-300); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.35; color: var(--color-text);}
.u25{flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: rgb(255, 255, 255); color: var(--accent-600); box-shadow: var(--shadow-sm);}
.u26{display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px;}
.u27{font-family: var(--font-body); font-weight: var(--fw-semibold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); -webkit-tap-highlight-color: transparent; font-size: 17px; padding: 15px 26px; background: var(--color-accent); color: var(--color-text-on-accent); box-shadow: none;}
.u28{font-family: var(--font-body); font-weight: var(--fw-semibold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-md); border-width: 1.5px; border-style: solid; border-color: var(--brand-500); border-image: initial; cursor: pointer; text-decoration: none; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); -webkit-tap-highlight-color: transparent; font-size: 17px; padding: 15px 26px; background: transparent; color: var(--color-brand-strong);}
.u29{flex: 1 1 360px; min-width: 280px;}
.u30{position: relative; overflow: hidden; background: var(--brand-100); border: 1px solid var(--brand-200); border-radius: var(--radius-xl); padding: clamp(32px, 4vw, 52px); min-height: 340px; display: flex; flex-direction: column; justify-content: center; gap: 8px;}
.u31{position: absolute; right: -40px; top: -40px;}
.u32{display: block; color: var(--color-brand);}
.u33{position: absolute; left: -24px; bottom: -20px;}
.u34{position: relative;}
.u35{font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.02em; color: var(--ink-900);}
.u36{font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.02em; color: var(--brand-600);}
.u37{font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.02em; color: var(--color-accent);}
.u38{margin: 18px 0px 0px; font-size: var(--fs-body); color: var(--ink-700); max-width: 30ch;}
.u39{flex: 1 1 100%; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 28px; margin-top: 8px;}
.u40{display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px 18px;}
.u41{width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--brand-100); color: var(--color-brand); display: inline-flex; align-items: center; justify-content: center;}
.u42{font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--ink-700);}
.u43{background: var(--surface-tint); padding: clamp(64px, 8vw, 104px) 0px;}
.u44{max-width: 1200px; margin: 0px auto; padding: 0px 24px;}
.u45{display: flex; flex-direction: column; gap: var(--space-3); align-items: center; text-align: center; max-width: 720px; margin: 0px auto;}
.u46{display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-utility); font-weight: var(--fw-semibold); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-brand);}
.u47{font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--color-text); margin: 0px;}
.u48{font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--color-text-muted); margin: 0px; max-width: 62ch;}
.u49{display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-top: 48px;}
.u50{display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; transition: transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.u50:hover{transform:translateY(var(--lift)); box-shadow:var(--shadow-hover);}
.u51{position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--brand-100); overflow: hidden; flex: 0 0 auto;}
.u52{width: 100%; height: 100%; object-fit: cover; display: block;}
.u53{display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5);}
.u54{font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--color-text); margin: 0px;}
.u55{font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-muted); margin: 0px;}
.u56{margin-top: 48px; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px);}
.u57{font-family: var(--font-utility); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-brand); margin-bottom: 18px;}
.u58{display: flex; flex-wrap: wrap; gap: 10px;}
.u59{display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--paper-soft); font-size: var(--fs-caption); color: var(--ink-700);}
.u60{flex: 0 0 auto;}
.u61{display: flex; justify-content: center; margin-top: 44px;}
.u62{background: linear-gradient(160deg, rgba(15, 46, 61, 0.9) 0%, rgba(15, 46, 61, 0.78) 42%, rgba(30, 110, 150, 0.72) 100%) center center / cover no-repeat, url("photos/16_pics_16.webp"); padding: clamp(64px, 8vw, 104px) 0px;}
.u63{display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-utility); font-weight: var(--fw-semibold); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--mint-500);}
.u64{display: block; color: var(--mint-500);}
.u65{font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: rgb(255, 255, 255); margin: 0px;}
.u66{font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: rgba(255, 255, 255, 0.78); margin: 0px; max-width: 62ch;}
.u67{display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); height: 100%; box-sizing: border-box; transition: transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.u67:hover{transform:translateY(var(--lift)); box-shadow:var(--shadow-hover);}
.u68{display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 48px;}
.u69{background: var(--surface-base); padding: clamp(64px, 8vw, 104px) 0px;}
.u70{display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; text-align: left; max-width: none; margin: 0px;}
.u71{margin-top: 28px; display: flex; align-items: flex-start; gap: 14px; background: var(--accent-100); border: 1px solid var(--accent-300); border-radius: var(--radius-md); padding: 18px 22px; max-width: 820px;}
.u72{flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--white); color: var(--accent-600); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);}
.u73{margin: 0px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-700);}
.u74{color: var(--accent-600);}
.u75{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 44px;}
.u76{display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); height: 100%;}
.u77{width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-100); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 18px; flex: 0 0 auto;}
.u78{font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink-900); margin: 0px;}
.u79{font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-muted); margin: 0px;}
.u80{display: flex; justify-content: flex-start; margin-top: 44px;}
.u81{background: var(--surface-paper); padding: clamp(64px, 8vw, 104px) 0px;}
.u82{display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 48px); margin-top: 44px; align-items: flex-start;}
.u83{flex: 1 1 520px; min-width: 300px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 28px;}
.u84{display: flex; gap: 14px; align-items: flex-start;}
.u85{flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--accent-100); color: var(--accent-600); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;}
.u86{font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: 1.25; color: var(--ink-900); margin: 0px 0px 4px;}
.u87{flex: 1 1 320px; min-width: 280px; background: var(--white); border: 1px solid var(--border-warm); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 16px;}
.u88{margin: 0px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-700);}
.u89{font-family: var(--font-body); font-weight: var(--fw-semibold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); -webkit-tap-highlight-color: transparent; font-size: 16px; padding: 4px 2px; background: transparent; color: var(--color-link); text-underline-offset: 3px;}
.u90{background: linear-gradient(rgba(244, 250, 251, 0.72) 0%, rgba(230, 242, 245, 0.6) 100%) center center / cover no-repeat, url("photos/15_2_pics_15_2.webp"); padding: clamp(64px, 8vw, 104px) 0px;}
.u91{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 44px;}
.u92{display: flex; gap: 14px; align-items: flex-start; background: var(--surface-tint); border: 1px solid var(--brand-200); border-radius: var(--radius-lg); padding: var(--space-5); height: 100%;}
.u93{flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--white); color: var(--color-brand); display: inline-flex; align-items: center; justify-content: center;}
.u94{position: relative; margin-top: 48px;}
.u95{display: grid; grid-auto-flow: column; grid-auto-columns: clamp(230px, 72vw, 270px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 8px;}
.u96{display: flex; scroll-snap-align: start;}
.u97{height: 100%; width: 100%;}
.u98{display: flex; flex-direction: column; margin: 0px; background: rgb(255, 255, 255); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-scan); transform: translateY(0px); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); cursor: default;}
.u99{position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); border: 1px solid var(--border-warm); display: flex; align-items: center; justify-content: center;}
.u100{position: absolute; top: 8px; left: 8px; font-family: var(--font-utility); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-700); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px 9px;}
.u101{font-family: var(--font-body); font-size: var(--fs-caption); line-height: 1.4; color: var(--color-text-muted); padding: var(--space-3) var(--space-2) var(--space-1);}
.u102{position: absolute; left: -16px; top: 38%; width: 48px; height: 48px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--white); color: var(--brand-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card);}
.u102:hover{background:var(--brand-100);}
.u103{position: absolute; right: -16px; top: 38%; width: 48px; height: 48px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--white); color: var(--brand-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card);}
.u103:hover{background:var(--brand-100);}
.u104{display: flex; flex-wrap: wrap; gap: 24px; margin-top: 44px; align-items: stretch;}
.u105{flex: 2 1 480px; min-width: 300px; position: relative; border: 1px solid var(--brand-200); border-radius: var(--radius-xl); overflow: hidden; min-height: 480px; background: var(--brand-100);}
.u106{position: absolute; inset: 0px;}
.u107{position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--brand-700); font-size: var(--fs-small); pointer-events: none;}
.u108{flex: 1 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: 12px; max-height: 480px; overflow-y: auto; padding-right: 4px;}
.u109{display: flex; flex-direction: column; gap: 8px; padding: 16px; cursor: pointer; text-align: left; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--white); box-shadow: none; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), box-shadow .2s var(--ease-out);}
.u110{display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;}
.u111{display: inline-flex; align-items: flex-start; gap: 8px; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: 1.25; color: var(--ink-900);}
.u112{flex: 0 0 auto; margin-top: 2px;}
.u113{font-size: var(--fs-small); color: var(--color-text-muted);}
.u114{display: inline-flex; align-items: flex-start; gap: 8px; font-size: var(--fs-small); color: var(--ink-700); line-height: 1.5;}
.u115{display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;}
.u116{display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--brand-700);}
.u117{display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--color-link);}
.u118{display: flex; flex-direction: column; gap: 8px; padding: 16px; cursor: pointer; text-align: left; border-radius: var(--radius-md); border: 1.5px solid var(--color-accent); background: var(--accent-100); box-shadow: var(--shadow-card); transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), box-shadow .2s var(--ease-out);}
.u119{flex: 0 0 auto; font-family: var(--font-utility); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-600); background: var(--accent-100); border: 1px solid var(--accent-300); border-radius: var(--radius-pill); padding: 3px 9px;}
.u120{background: var(--ink-900); color: rgba(255, 255, 255, 0.82); padding: clamp(48px, 6vw, 72px) 0px 40px;}
.u121{max-width: 1200px; margin: 0px auto; padding: 0px 24px; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;}
.u122{flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 16px;}
.u123{height: 56px; width: auto; background: rgb(255, 255, 255); border-radius: var(--radius-md); padding: 8px 12px; align-self: flex-start;}
.u124{margin: 0px; font-size: var(--fs-small); line-height: 1.6; color: rgba(255, 255, 255, 0.7); max-width: 34ch;}
.u125{flex: 0 1 auto; min-width: 180px; display: flex; flex-direction: column; gap: 12px;}
.u126{font-family: var(--font-utility); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--mint-500); margin-bottom: 4px;}
.u127{color: rgba(255, 255, 255, 0.82); font-size: var(--fs-small);}
.u128{flex: 0 1 auto; min-width: 220px; display: flex; flex-direction: column; gap: 10px;}
.u129{margin: 0px; font-size: var(--fs-small); line-height: 1.6; color: rgba(255, 255, 255, 0.82);}
.u130{color: rgb(255, 255, 255); font-weight: 600; font-size: var(--fs-body);}
.u131{margin: 4px 0px 0px; font-size: var(--fs-small); line-height: 1.6; color: rgba(255, 255, 255, 0.7);}
.u132{max-width: 1200px; margin: 32px auto 0px; padding: 24px 24px 0px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.55);}
.u133{height: 74px;}
.u134{position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 60; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--color-border); box-shadow: rgba(15, 46, 61, 0.08) 0px -4px 16px;}
.u135{width: 100%;}
.u136{font-family: var(--font-body); font-weight: var(--fw-semibold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-md); border-width: 1.5px; border-style: solid; border-color: var(--brand-500); border-image: initial; cursor: pointer; text-decoration: none; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); -webkit-tap-highlight-color: transparent; font-size: 16px; padding: 12px 20px; background: transparent; color: var(--color-brand-strong);}