@layer reset, tokens, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { min-height: 100vh; }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  input, textarea { font: inherit; }
  ul { list-style: none; }
}

@layer tokens {
  :root {
    --color-ink: #181926;
    --color-ink-soft: #4d4e64;
    --color-paper: #faf8f4;
    --color-paper-dim: #f1ece2;
    --color-primary: #2f2c5c;
    --color-primary-light: #4d4890;
    --color-primary-dark: #1c1a3d;
    --color-accent: #cf9a5c;
    --color-accent-light: #e8c9a0;
    --color-sage: #7f9686;

    --glass-bg-light: rgba(255, 255, 255, 0.55);
    --glass-bg-lighter: rgba(255, 255, 255, 0.7);
    --glass-bg-dark: rgba(255, 255, 255, 0.08);
    --glass-border-light: rgba(255, 255, 255, 0.6);
    --glass-border-dark: rgba(255, 255, 255, 0.14);

    --shadow-sm: 0 1px 2px rgba(24, 25, 38, 0.06), 0 1px 1px rgba(24, 25, 38, 0.04);
    --shadow-md: 0 8px 24px rgba(24, 25, 38, 0.08), 0 2px 6px rgba(24, 25, 38, 0.05);
    --shadow-lg: 0 24px 60px rgba(24, 25, 38, 0.14), 0 8px 20px rgba(24, 25, 38, 0.08);
    --shadow-glow: 0 0 0 1px rgba(255,255,255,0.5) inset, 0 20px 50px rgba(47, 44, 92, 0.18);

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    --font-body: 'Onest', sans-serif;

    --fs-display: clamp(2.6rem, 5.2vw + 1rem, 6.2rem);
    --fs-h1: clamp(2.2rem, 3.6vw + 1rem, 3.8rem);
    --fs-h2: clamp(1.7rem, 2.2vw + 1rem, 2.9rem);
    --fs-h3: clamp(1.2rem, 1vw + 0.8rem, 1.5rem);
    --fs-lead: clamp(1.05rem, 0.5vw + 0.9rem, 1.3rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.75rem;
    --space-lg: 3rem;
    --space-xl: 5.5rem;
    --space-2xl: 8.5rem;

    --transition-base: 0.35s cubic-bezier(.2,.7,.2,1);
    --container-max: 1240px;
  }
}

@layer layout {
  body {
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-paper);
    line-height: 1.65;
    font-weight: 400;
    overflow-x: hidden;
  }

  .Container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }
  .Container--narrow { max-width: 760px; }
  .Container--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  .Container--reverse { direction: rtl; }
  .Container--reverse > * { direction: ltr; }
  .Container--legal {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  @media (max-width: 860px) {
    .Container--split { grid-template-columns: 1fr; }
    .Container--reverse { direction: ltr; }
    .Container--legal { grid-template-columns: 1fr; }
  }

  .Section { padding-block: var(--space-xl); }
  .Section--empathy { padding-block: var(--space-2xl) var(--space-xl); }
  .Section--approach { padding-block: var(--space-xl) var(--space-2xl); background: var(--color-paper-dim); }
  .Section--grid { padding-block: var(--space-2xl); }
  .Section--twoCol { padding-block: var(--space-xl); }
  .Section--feature { padding-block: var(--space-xl); }
  .Section--formSection { padding-block: var(--space-lg); }
  .Section--contactGrid { padding-block: var(--space-xl); }
  .Section--map { padding-block: 0 var(--space-2xl); }
  .Section--timeline { padding-block: var(--space-lg) var(--space-2xl); }
  .Section--legalDoc { padding-block: var(--space-lg) var(--space-2xl); }
}

@layer components {

  
  .CookieBar {
    background: var(--color-primary-dark);
    color: rgba(255,255,255,0.92);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
    font-size: var(--fs-small);
    max-height: 200px;
    overflow: hidden;
    transition: max-height var(--transition-base), padding var(--transition-base), opacity var(--transition-base);
  }
  .CookieBar[hidden] { display: none; }
  .CookieBar.is-collapsed { max-height: 0; padding-block: 0; opacity: 0; }
  .CookieBar-text { max-width: 640px; }
  .CookieBar-text a { color: var(--color-accent-light); text-decoration: underline; }
  .CookieBar-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
  .CookieBar-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    font-weight: 600;
    transition: all var(--transition-base);
    min-height: 38px;
  }
  .CookieBar-btn--ghost { background: rgba(255,255,255,0.1); color: #fff; }
  .CookieBar-btn--ghost:hover { background: rgba(255,255,255,0.2); }
  .CookieBar-btn--solid { background: var(--color-accent); color: var(--color-primary-dark); }
  .CookieBar-btn--solid:hover { background: var(--color-accent-light); transform: translateY(-1px); }

  
  .SiteHeader {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(250, 248, 244, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-base);
  }
  .SiteHeader::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--color-ink);
    opacity: 0.12;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
  }
  .SiteHeader.is-scrolled::after { transform: scaleX(1); }
  .SiteHeader-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 0.9rem clamp(1.25rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .SiteHeader-logo { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
  .SiteHeader-nav { display: flex; gap: clamp(1rem, 2vw, 2.2rem); }
  .SiteHeader-navLink {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-ink-soft);
    position: relative;
    padding-block: 0.4rem;
    transition: color var(--transition-base);
  }
  .SiteHeader-navLink::after {
    content: "";
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
  }
  .SiteHeader-navLink:hover, .SiteHeader-navLink.is-active { color: var(--color-ink); }
  .SiteHeader-navLink:hover::after, .SiteHeader-navLink.is-active::after { transform: scaleX(1); }

  .MobileMenu-toggle {
    display: none;
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    z-index: 400;
  }
  .MobileMenu-toggle span {
    width: 22px; height: 2px;
    background: var(--color-ink);
    border-radius: 2px;
    transition: all var(--transition-base);
  }
  .MobileMenu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .MobileMenu-toggle.is-active span:nth-child(2) { opacity: 0; }
  .MobileMenu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .MobileMenu {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--color-primary-dark);
    clip-path: circle(0% at calc(100% - 40px) 40px);
    transition: clip-path 0.6s cubic-bezier(.2,.8,.2,1);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .MobileMenu.is-open {
    clip-path: circle(150% at calc(100% - 40px) 40px);
    pointer-events: auto;
  }
  .MobileMenu-nav { display: flex; flex-direction: column; gap: 1.6rem; text-align: center; }
  .MobileMenu-link {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.4s ease, color var(--transition-base);
  }
  .MobileMenu.is-open .MobileMenu-link { opacity: 1; transform: translateY(0); }
  .MobileMenu-link:hover { color: var(--color-accent-light); }
  .MobileMenu.is-open .MobileMenu-link:nth-child(1) { transition-delay: 0.15s; }
  .MobileMenu.is-open .MobileMenu-link:nth-child(2) { transition-delay: 0.22s; }
  .MobileMenu.is-open .MobileMenu-link:nth-child(3) { transition-delay: 0.29s; }
  .MobileMenu.is-open .MobileMenu-link:nth-child(4) { transition-delay: 0.36s; }
  .MobileMenu.is-open .MobileMenu-link:nth-child(5) { transition-delay: 0.43s; }

  @media (max-width: 900px) {
    .SiteHeader-nav { display: none; }
    .MobileMenu-toggle { display: flex; }
  }

  
  .Btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.8rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.98rem;
    transition: all var(--transition-base);
    min-height: 48px;
  }
  .Btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); }
  .Btn--primary:hover { background: var(--color-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .Btn--ghost { background: rgba(255,255,255,0.5); border: 1px solid rgba(24,25,38,0.14); color: var(--color-ink); backdrop-filter: blur(10px); }
  .Btn--ghost:hover { background: rgba(255,255,255,0.85); transform: translateY(-2px); }
  .Btn--light { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.4); backdrop-filter: blur(10px); }
  .Btn--light:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); }

  
  .PageHero { padding-block: clamp(4rem, 10vw, 7rem) clamp(2.5rem, 6vw, 4rem); background: var(--color-paper); }
  .PageHero-inner { max-width: 880px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); text-align: center; }
  .PageHero-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
  }
  .PageHero-heading {
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, var(--color-primary) 10%, var(--color-primary-light) 45%, var(--color-accent) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: var(--space-md);
  }
  .PageHero--sub .PageHero-heading, .PageHero--thanks .PageHero-heading { font-size: var(--fs-h1); }
  .PageHero-lead { font-size: var(--fs-lead); color: var(--color-ink-soft); max-width: 640px; margin-inline: auto; margin-bottom: var(--space-md); }
  .PageHero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: var(--space-sm); }
  .PageHero--legal { padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 4vw, 3rem); background: var(--color-paper-dim); }
  .PageHero--thanks { text-align: center; }

  .char { display: inline-block; opacity: 0; transform: translateY(0.6em) rotate(2deg); animation: charIn 0.7s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes charIn { to { opacity: 1; transform: translateY(0) rotate(0); } }

  
  .StatsBar { background: var(--color-primary-dark); padding-block: var(--space-md); }
  .StatsBar-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
  }
  .StatsBar-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(255,255,255,0.86);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.9rem 1rem;
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border-dark);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
  }
  .StatsBar-item i { color: var(--color-accent-light); font-size: 1.1rem; }
  @media (max-width: 900px) { .StatsBar-inner { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px) { .StatsBar-inner { grid-template-columns: 1fr; } }

  
  .DecorativeStrip {
    overflow: hidden;
    background: var(--color-paper-dim);
    border-block: 1px solid rgba(24,25,38,0.06);
    padding-block: 0.9rem;
  }
  .DecorativeStrip--alt { background: var(--color-primary-dark); }
  .DecorativeStrip-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: scrollStrip 26s linear infinite;
  }
  .DecorativeStrip-track span {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--color-ink-soft);
    white-space: nowrap;
  }
  .DecorativeStrip--alt .DecorativeStrip-track span { color: rgba(255,255,255,0.55); }
  @keyframes scrollStrip { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  
  .Section-eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.8rem;
  }
  .Section-heading {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    max-width: 820px;
  }
  .Section-lead { font-size: var(--fs-lead); color: var(--color-ink-soft); margin-top: var(--space-sm); max-width: 680px; }
  .Section--empathy .Section-heading, .Section--empathy .Section-lead { text-align: center; margin-inline: auto; }
  .Section-headRow { display: flex; justify-content: space-between; gap: var(--space-lg); align-items: flex-end; margin-bottom: var(--space-lg); flex-wrap: wrap; }
  .Section-headNote { max-width: 320px; color: var(--color-ink-soft); font-size: 0.95rem; }
  .Section-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4/3.2; }
  .Section-media--small img { aspect-ratio: 16/10; }
  .Section-list { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 0.75rem; }
  .Section-list li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--color-ink-soft); }
  .Section-list i { color: var(--color-sage); margin-top: 0.25rem; }

  
  .ApproachSteps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .ApproachSteps--vertical { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
  .ApproachSteps-item {
    background: var(--glass-bg-lighter);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }
  .ApproachSteps-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .ApproachSteps--vertical .ApproachSteps-item { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
  .ApproachSteps-num {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-accent);
    display: block;
    margin-bottom: 0.6rem;
  }
  .ApproachSteps-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.4rem; }
  .ApproachSteps-body { color: var(--color-ink-soft); font-size: 0.95rem; }
  @media (max-width: 980px) { .ApproachSteps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .ApproachSteps { grid-template-columns: 1fr; } }

  
  .GradientSection {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 45%, #6a5a9e 78%, var(--color-accent) 130%);
    padding-block: var(--space-2xl);
    position: relative;
    overflow: hidden;
  }
  .GradientSection--compact { padding-block: var(--space-xl); }
  .GradientSection::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12), transparent 55%);
    pointer-events: none;
  }
  .GradientSection-inner {
    max-width: 780px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    position: relative;
    background: var(--glass-bg-dark);
    border: 1px solid var(--glass-border-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    padding-block: var(--space-lg);
    box-shadow: var(--shadow-glow);
  }
  .GradientSection-eyebrow { color: var(--color-accent-light); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 0.8rem; }
  .GradientSection-heading { font-size: var(--fs-h2); color: #fff; font-weight: 700; line-height: 1.2; margin-bottom: var(--space-sm); }
  .GradientSection-lead { color: rgba(255,255,255,0.82); font-size: var(--fs-lead); margin-bottom: var(--space-md); }

  
  .FeatureGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: var(--space-lg); }
  .FeatureGrid--four { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
  .ContentCard {
    background: var(--glass-bg-lighter);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }
  .ContentCard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .ContentCard-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  .ContentCard-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
  .ContentCard-body { color: var(--color-ink-soft); font-size: 0.95rem; }
  .ContentCard--cta { margin-top: var(--space-lg); }
  .ContentCard-ctaRow { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
  .ContentCard--info { margin-bottom: 1.2rem; }
  @media (max-width: 980px) { .FeatureGrid, .FeatureGrid--four { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .FeatureGrid, .FeatureGrid--four { grid-template-columns: 1fr; } }

  
  .SiteFooter { background: var(--color-primary-dark); color: rgba(255,255,255,0.85); margin-top: auto; }
  .SiteFooter-quoteWrap { padding-block: var(--space-2xl) var(--space-xl); text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .SiteFooter-quoteLabel { color: var(--color-accent-light); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.2rem; }
  .SiteFooter-quote { font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 600; line-height: 1.3; color: #fff; max-width: 900px; margin-inline: auto; }
  .SiteFooter-main { padding-block: var(--space-xl); }
  .SiteFooter-columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
  .SiteFooter-col { display: flex; flex-direction: column; gap: 0.7rem; }
  .SiteFooter-col a, .SiteFooter-col span { color: rgba(255,255,255,0.7); font-size: 0.92rem; transition: color var(--transition-base); }
  .SiteFooter-col a:hover { color: var(--color-accent-light); }
  .SiteFooter-colTitle { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: 0.4rem; }
  .SiteFooter-logo { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.15rem; color: #fff; margin-bottom: 0.5rem; }
  .SiteFooter-text { color: rgba(255,255,255,0.65); font-size: 0.92rem; max-width: 300px; }
  .SiteFooter-bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
  }
  .SiteFooter-bottom a { color: rgba(255,255,255,0.7); }
  .SiteFooter--simple .SiteFooter-main { padding-block: var(--space-lg); }
  @media (max-width: 900px) { .SiteFooter-columns { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px) { .SiteFooter-columns { grid-template-columns: 1fr; } }

  
  .ChatForm { display: flex; flex-direction: column; gap: 0.9rem; }
  .ChatForm-bubble {
    max-width: 85%;
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
  }
  .ChatForm-bubble--company {
    background: var(--glass-bg-lighter);
    border: 1px solid var(--glass-border-light);
    backdrop-filter: blur(14px);
    color: var(--color-ink);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    box-shadow: var(--shadow-sm);
  }
  .ChatForm-field { align-self: flex-end; width: 100%; max-width: 85%; margin-left: auto; }
  .ChatForm-field input, .ChatForm-field textarea {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(24,25,38,0.14);
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    color: var(--color-ink);
    font-size: 0.95rem;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    border-bottom-right-radius: 4px;
  }
  .ChatForm-field input:focus, .ChatForm-field textarea:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(79, 72, 144, 0.15);
  }
  .ChatForm-field--checkbox { background: transparent; }
  .ChatForm-checkLabel { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--color-ink-soft); background: rgba(255,255,255,0.6); padding: 0.9rem 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--glass-border-light); }
  .ChatForm-checkLabel input { margin-top: 0.2rem; width: 18px; height: 18px; flex-shrink: 0; }
  .ChatForm-checkLabel a { text-decoration: underline; color: var(--color-primary); }
  .ChatForm-send {
    align-self: flex-end;
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: var(--color-primary);
    color: #fff;
    padding: 0.9rem 1.9rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    min-height: 48px;
  }
  .ChatForm-send:hover { background: var(--color-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .ChatForm-note { color: #b3413f; font-size: 0.85rem; align-self: flex-end; }

  .ContactAside { display: flex; flex-direction: column; }

  .MapFrame { width: 100%; aspect-ratio: 16/8; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); margin-top: var(--space-md); }

  
  .Timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
  .Timeline-item { display: flex; gap: 1.2rem; padding-block: 1.2rem; position: relative; }
  .Timeline-item::before {
    content: "";
    position: absolute; left: 21px; top: 3rem; bottom: -0.5rem;
    width: 2px; background: rgba(24,25,38,0.12);
  }
  .Timeline-item:last-child::before { display: none; }
  .Timeline-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--color-paper-dim);
    color: var(--color-ink-soft);
    border: 2px solid rgba(24,25,38,0.12);
  }
  .Timeline-item.is-done .Timeline-icon { background: var(--color-sage); color: #fff; border-color: var(--color-sage); }
  .Timeline-item.is-active .Timeline-icon { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 0 0 6px rgba(47,44,92,0.12); }
  .Timeline-item.is-upcoming .Timeline-icon { opacity: 0.5; }
  .Timeline-item.is-upcoming .Timeline-title, .Timeline-item.is-upcoming .Timeline-body { opacity: 0.5; }
  .Timeline-title { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.2rem; }
  .Timeline-body { color: var(--color-ink-soft); font-size: 0.92rem; }

  
  .LegalDoc-toc { position: sticky; top: 100px; align-self: start; }
  .LegalDoc-tocList { display: flex; flex-direction: column; gap: 0.5rem; }
  .LegalDoc-tocList a {
    display: block;
    font-size: 0.9rem;
    color: var(--color-ink-soft);
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    transition: all var(--transition-base);
  }
  .LegalDoc-tocList a:hover { background: var(--color-paper-dim); color: var(--color-ink); }
  .LegalDoc-tocList a.is-active { border-left-color: var(--color-accent); color: var(--color-ink); font-weight: 600; background: var(--color-paper-dim); }
  .LegalDoc-tocToggle { display: none; width: 100%; padding: 0.9rem 1.1rem; background: var(--color-paper-dim); border-radius: var(--radius-md); font-weight: 600; justify-content: space-between; align-items: center; }
  .LegalDoc h2 { font-size: 1.3rem; font-weight: 700; margin-top: 2.2rem; margin-bottom: 0.8rem; }
  .LegalDoc h2:first-child { margin-top: 0; }
  .LegalDoc p { color: var(--color-ink-soft); margin-bottom: 0.9rem; font-size: 0.98rem; }
  .LegalDoc a { text-decoration: underline; color: var(--color-primary); }
  .LegalTable { width: 100%; border-collapse: collapse; margin-block: 1rem 1.4rem; font-size: 0.92rem; }
  .LegalTable td, .LegalTable th { padding: 0.7rem 0.9rem; border: 1px solid rgba(24,25,38,0.1); text-align: left; color: var(--color-ink-soft); }
  .LegalTable td:first-child { font-weight: 600; color: var(--color-ink); width: 40%; }

  @media (max-width: 860px) {
    .LegalDoc-toc { position: static; }
    .LegalDoc-tocToggle { display: flex; }
    .LegalDoc-tocList { display: none; max-height: 0; overflow: hidden; background: #fff; border-radius: var(--radius-md); margin-top: 0.5rem; padding: 0; }
    .LegalDoc-tocList.is-open { display: flex; padding: 0.6rem; }
  }
}

@layer utilities {
  .u-textCenter { text-align: center; }
  .u-visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}