@layer base, layout, components, utilities;

@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --clr-bg: #f7f8f5;
    --clr-surface: #ffffff;
    --clr-primary: #2d6a4f;
    --clr-primary-dark: #1b4332;
    --clr-accent: #74c69d;
    --clr-accent-light: #d8f3dc;
    --clr-secondary: #1e3a5f;
    --clr-secondary-light: #e8eff8;
    --clr-text: #1a2e1e;
    --clr-text-mid: #3d5a45;
    --clr-text-muted: #6b7c71;
    --clr-border: #d0ddd4;
    --clr-tag-bg: #d8f3dc;
    --clr-tag-txt: #1b4332;

    --sp-xs: 0.5rem;
    --sp-sm: 1rem;
    --sp-md: 1.5rem;
    --sp-lg: 2.5rem;
    --sp-xl: 4rem;
    --sp-2xl: 6rem;

    --rad-sm: 4px;
    --rad-md: 8px;
    --rad-lg: 16px;
    --rad-xl: 24px;

    --fnt-display: 'Wix Madefor Display', sans-serif;
    --fnt-body: 'Wix Madefor Text', sans-serif;

    --hdr-h: 72px;
    --transition: 0.22s ease;
    --transition-slow: 0.38s ease;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--fnt-body);
    background-color: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.65;
    font-size: 1rem;
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
  }

  main { flex: 1; }

  img { max-inline-size: 100%; block-size: auto; display: block; }

  a { color: inherit; text-decoration: none; transition: color var(--transition); }

  h1, h2, h3, h4 { font-family: var(--fnt-display); line-height: 1.15; }

  button { font-family: var(--fnt-body); cursor: pointer; border: none; background: none; }
}

@layer layout {
  .container {
    inline-size: min(100%, 1160px);
    margin-inline: auto;
    padding-inline: var(--sp-md);
  }

  .sec {
    padding-block: var(--sp-2xl);
  }

  .sec-hd {
    margin-block-end: var(--sp-xl);
  }

  .sec-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-primary);
    background: var(--clr-accent-light);
    padding: 4px 12px;
    border-radius: var(--rad-sm);
    margin-block-end: var(--sp-sm);
  }

  .sec-title {
    font-family: var(--fnt-display);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: var(--clr-text);
    line-height: 1.1;
  }
}

@layer components {

  
  .hdr {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1000;
    background: var(--clr-surface);
    border-block-end: 2px solid var(--clr-border);
    transition: box-shadow var(--transition);
  }

  .hdr.scrolled {
    box-shadow: 0 2px 0 var(--clr-border), 0 4px 16px rgba(45, 106, 79, 0.08);
  }

  .hdr-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: var(--hdr-h);
    inline-size: min(100%, 1160px);
    margin-inline: auto;
    padding-inline: var(--sp-md);
    gap: var(--sp-md);
  }

  .hdr-logo { display: flex; align-items: center; flex-shrink: 0; }
  .hdr-logo img { block-size: 40px; inline-size: auto; }

  .hdr-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
  }

  .hdr-nav-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clr-text-mid);
    padding-block: var(--sp-xs);
    border-block-end: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
  }

  .hdr-nav-link:hover,
  .hdr-nav-link.active {
    color: var(--clr-primary);
    border-block-end-color: var(--clr-primary);
  }

  .hdr-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
  }

  .hdr-search-btn {
    inline-size: 44px;
    block-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-mid);
    border-radius: var(--rad-md);
    transition: background var(--transition), color var(--transition);
    font-size: 1rem;
  }

  .hdr-search-btn:hover {
    background: var(--clr-accent-light);
    color: var(--clr-primary);
  }

  .hdr-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    inline-size: 44px;
    block-size: 44px;
    padding: 10px;
    border-radius: var(--rad-md);
    transition: background var(--transition);
  }

  .hdr-burger:hover { background: var(--clr-accent-light); }

  .hdr-burger span {
    display: block;
    block-size: 2px;
    inline-size: 100%;
    background: var(--clr-text);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
  }

  .hdr-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hdr-burger.open span:nth-child(2) { opacity: 0; }
  .hdr-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hdr-mobile-panel {
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    border-block-end: 2px solid var(--clr-border);
    max-block-size: 0;
    overflow: hidden;
    transition: max-block-size var(--transition-slow);
  }

  .hdr-mobile-panel.open { max-block-size: 400px; }

  .mob-link {
    display: block;
    padding: 14px var(--sp-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text-mid);
    border-block-end: 1px solid var(--clr-border);
    transition: background var(--transition), color var(--transition);
  }

  .mob-link:hover,
  .mob-link.active {
    background: var(--clr-accent-light);
    color: var(--clr-primary);
  }

  
  .search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(26, 46, 30, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
  }

  .search-overlay.active {
    opacity: 1;
    pointer-events: all;
  }

  .search-overlay-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    inline-size: min(100%, 640px);
    padding-inline: var(--sp-md);
  }

  .search-input {
    flex: 1;
    background: transparent;
    border: none;
    border-block-end: 3px solid var(--clr-accent);
    color: #fff;
    font-family: var(--fnt-display);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    padding-block: var(--sp-sm);
    outline: none;
  }

  .search-input::placeholder { color: rgba(255,255,255,0.35); }

  .search-close {
    color: #fff;
    font-size: 1.5rem;
    inline-size: 48px;
    block-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rad-md);
    transition: background var(--transition);
    flex-shrink: 0;
  }

  .search-close:hover { background: rgba(255,255,255,0.12); }

  
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--rad-md);
    font-family: var(--fnt-body);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    min-block-size: 48px;
    white-space: nowrap;
  }

  .btn-primary {
    background: var(--clr-primary);
    color: #fff;
    border: 2px solid var(--clr-primary);
  }

  .btn-primary:hover {
    background: var(--clr-primary-dark);
    border-color: var(--clr-primary-dark);
    color: #fff;
  }

  .btn-outline {
    background: transparent;
    color: var(--clr-primary);
    border: 2px solid var(--clr-primary);
  }

  .btn-outline:hover {
    background: var(--clr-primary);
    color: #fff;
  }

  
  .hero {
    margin-block-start: var(--hdr-h);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-block-size: calc(100vh - var(--hdr-h));
    background: var(--clr-surface);
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-2xl) var(--sp-xl) var(--sp-2xl) max(var(--sp-xl), calc((100vw - 1160px) / 2 + var(--sp-md)));
    gap: var(--sp-md);
  }

  .hero-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-primary);
    background: var(--clr-accent-light);
    padding: 4px 12px;
    border-radius: var(--rad-sm);
    align-self: flex-start;
  }

  .hero-h1 {
    font-family: var(--fnt-display);
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 800;
    color: var(--clr-text);
    line-height: 1.05;
  }

  .hero-accent { color: var(--clr-primary); }

  .hero-lead {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--clr-text-muted);
    max-inline-size: 480px;
    line-height: 1.7;
  }

  .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    margin-block-start: var(--sp-xs);
  }

  .hero-visual {
    position: relative;
    background: var(--clr-accent-light);
    overflow: hidden;
  }

  .hero-img-wrap {
    position: absolute;
    inset: 0;
  }

  .hero-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero-badge {
    position: absolute;
    inset-block-end: var(--sp-lg);
    inset-inline-start: var(--sp-lg);
    background: var(--clr-surface);
    border-radius: var(--rad-md);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-inline-start: 4px solid var(--clr-primary);
  }

  .hero-badge-icon { color: var(--clr-primary); font-size: 1.1rem; }
  .hero-badge-txt { font-size: 0.8rem; font-weight: 700; color: var(--clr-text); }

  
  .seasons-sec { background: var(--clr-bg); }

  .seasons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-md);
  }

  .season-crd {
    background: var(--clr-surface);
    border-radius: var(--rad-lg);
    padding: var(--sp-lg) var(--sp-md);
    border-block-start: 4px solid var(--clr-primary);
    transition: border-color var(--transition), transform var(--transition);
  }

  .season-crd:hover { border-block-start-color: var(--clr-accent); transform: translateY(-4px); }

  .season-crd[data-season="lato"] { border-block-start-color: #e9c46a; }
  .season-crd[data-season="lato"]:hover { border-block-start-color: #f4a261; }
  .season-crd[data-season="jesien"] { border-block-start-color: #e76f51; }
  .season-crd[data-season="jesien"]:hover { border-block-start-color: #c1440e; }
  .season-crd[data-season="zima"] { border-block-start-color: #90e0ef; }
  .season-crd[data-season="zima"]:hover { border-block-start-color: #0077b6; }

  .season-ico {
    font-size: 1.75rem;
    color: var(--clr-primary);
    margin-block-end: var(--sp-sm);
  }

  .season-crd[data-season="lato"] .season-ico { color: #e9c46a; }
  .season-crd[data-season="jesien"] .season-ico { color: #e76f51; }
  .season-crd[data-season="zima"] .season-ico { color: #90e0ef; }

  .season-name {
    font-family: var(--fnt-display);
    font-size: 1.15rem;
    font-weight: 800;
    margin-block-end: var(--sp-xs);
  }

  .season-txt { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6; }

  
  .activities-sec { background: var(--clr-surface); }

  .act-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: var(--sp-2xl);
    align-items: start;
  }

  .act-left {
    position: sticky;
    inset-block-start: calc(var(--hdr-h) + var(--sp-lg));
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
  }

  .act-desc { color: var(--clr-text-muted); line-height: 1.7; }

  .act-right {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
  }

  .act-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--sp-md);
    align-items: center;
    background: var(--clr-bg);
    border-radius: var(--rad-lg);
    overflow: hidden;
    transition: transform var(--transition);
  }

  .act-item:hover { transform: translateX(6px); }

  .act-img-wrap { block-size: 140px; overflow: hidden; }
  .act-img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--transition-slow); }
  .act-item:hover .act-img { transform: scale(1.05); }

  .act-info { padding: var(--sp-md); }
  .act-info h3 { font-family: var(--fnt-display); font-size: 1.1rem; font-weight: 700; margin-block-end: 6px; }
  .act-info p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6; }

  
  .featured-sec { background: var(--clr-primary-dark); }
  .featured-sec .sec-label { background: rgba(116, 198, 157, 0.2); color: var(--clr-accent); }
  .featured-sec .sec-title { color: #fff; }

  .featured-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
  }

  .featured-img { inline-size: 100%; border-radius: var(--rad-xl); object-fit: cover; aspect-ratio: 4/3; }

  .featured-txt-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
  }

  .featured-intro {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--clr-accent);
    line-height: 1.5;
  }

  .featured-txt-col p { color: rgba(255,255,255,0.8); line-height: 1.75; }
  .featured-txt-col .btn-outline { color: var(--clr-accent); border-color: var(--clr-accent); }
  .featured-txt-col .btn-outline:hover { background: var(--clr-accent); color: var(--clr-primary-dark); }

  
  .blog-sec { background: var(--clr-bg); }

  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
  }

  .crd { border-radius: var(--rad-lg); overflow: hidden; background: var(--clr-surface); }

  .blog-crd { display: flex; flex-direction: column; transition: transform var(--transition); }
  .blog-crd:hover { transform: translateY(-6px); }

  .blog-img-wrap { block-size: 200px; overflow: hidden; }
  .blog-img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--transition-slow); }
  .blog-crd:hover .blog-img { transform: scale(1.06); }

  .blog-body {
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    flex: 1;
  }

  .blog-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-tag-txt);
    background: var(--clr-tag-bg);
    padding: 3px 10px;
    border-radius: var(--rad-sm);
    align-self: flex-start;
  }

  .blog-title {
    font-family: var(--fnt-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.3;
  }

  .blog-exc { font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.65; flex: 1; }

  .blog-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--clr-primary);
    margin-block-start: var(--sp-xs);
    transition: gap var(--transition), color var(--transition);
    align-self: flex-start;
  }

  .blog-more-btn:hover { gap: 10px; color: var(--clr-primary-dark); }

  .blog-footer { text-align: center; margin-block-start: var(--sp-xl); }

  
  .contact-sec { background: var(--clr-surface); }

  .contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
  }

  .contact-crd {
    text-align: center;
    padding: var(--sp-xl) var(--sp-lg);
    background: var(--clr-bg);
    border-radius: var(--rad-xl);
    border-block-end: 4px solid var(--clr-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xs);
    transition: transform var(--transition), border-color var(--transition);
  }

  .contact-crd:hover { transform: translateY(-4px); border-block-end-color: var(--clr-accent); }

  .crd-ico {
    inline-size: 56px;
    block-size: 56px;
    background: var(--clr-accent-light);
    border-radius: var(--rad-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--clr-primary);
    margin-block-end: var(--sp-xs);
    transition: background var(--transition), color var(--transition);
  }

  .contact-crd:hover .crd-ico { background: var(--clr-primary); color: #fff; }

  .crd-txt { font-family: var(--fnt-display); font-size: 1rem; font-weight: 700; }

  .contact-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-primary);
    transition: color var(--transition);
  }

  .contact-link:hover { color: var(--clr-primary-dark); }

  .contact-note { font-size: 0.8rem; color: var(--clr-text-muted); }

  
  .page-hero {
    margin-block-start: var(--hdr-h);
    background: var(--clr-surface);
    padding: var(--sp-2xl) 0 var(--sp-xl);
    border-block-end: 2px solid var(--clr-border);
  }

  .page-hero--green { background: var(--clr-accent-light); }
  .page-hero--blue { background: var(--clr-secondary-light); }

  .page-hero-title {
    font-family: var(--fnt-display);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    color: var(--clr-text);
    line-height: 1.05;
    margin-block: var(--sp-sm);
  }

  .page-hero-lead {
    font-size: 1.1rem;
    color: var(--clr-text-muted);
    max-inline-size: 520px;
    margin-block-start: var(--sp-xs);
  }

  
  .about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
  }

  .about-txt { display: flex; flex-direction: column; gap: var(--sp-md); }
  .about-txt p { color: var(--clr-text-muted); line-height: 1.75; }

  .about-img { inline-size: 100%; border-radius: var(--rad-xl); object-fit: cover; aspect-ratio: 4/3; }

  .values-sec { background: var(--clr-bg); }

  .values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-md);
  }

  .value-crd {
    background: var(--clr-surface);
    border-radius: var(--rad-lg);
    padding: var(--sp-lg) var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    transition: transform var(--transition);
  }

  .value-crd:hover { transform: translateY(-4px); }

  .value-ico {
    inline-size: 48px;
    block-size: 48px;
    background: var(--clr-accent-light);
    border-radius: var(--rad-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--clr-primary);
  }

  .value-crd h3 { font-family: var(--fnt-display); font-size: 1rem; font-weight: 700; }
  .value-crd p { font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.65; }

  .about-disclaimer-sec { background: var(--clr-surface); }

  .disclaimer-box {
    display: flex;
    gap: var(--sp-lg);
    align-items: flex-start;
    background: var(--clr-accent-light);
    border-radius: var(--rad-xl);
    padding: var(--sp-lg);
    border-inline-start: 6px solid var(--clr-primary);
  }

  .disclaimer-ico { font-size: 2rem; color: var(--clr-primary); flex-shrink: 0; padding-block-start: 4px; }
  .disclaimer-txt h3 { font-family: var(--fnt-display); font-size: 1.1rem; font-weight: 700; margin-block-end: var(--sp-xs); }
  .disclaimer-txt p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.7; }

  
  .cta-sec { background: var(--clr-primary); }

  .cta-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-md);
  }

  .cta-block h2 {
    font-family: var(--fnt-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: #fff;
  }

  .cta-block p { color: rgba(255,255,255,0.75); max-inline-size: 480px; line-height: 1.65; }

  .cta-btns { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; }

  .cta-sec .btn-primary { background: #fff; color: var(--clr-primary); border-color: #fff; }
  .cta-sec .btn-primary:hover { background: var(--clr-accent-light); border-color: var(--clr-accent-light); }
  .cta-sec .btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); }
  .cta-sec .btn-outline:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

  
  .sp-intro-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
  }

  .sp-img { inline-size: 100%; border-radius: var(--rad-xl); object-fit: cover; aspect-ratio: 4/3; }

  .sp-intro-txt { display: flex; flex-direction: column; gap: var(--sp-md); }
  .sp-intro-txt p { color: var(--clr-text-muted); line-height: 1.75; }

  .sp-format-sec { background: var(--clr-bg); }

  .sp-format-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-md);
  }

  .sp-format-crd {
    background: var(--clr-surface);
    border-radius: var(--rad-lg);
    padding: var(--sp-lg) var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    transition: transform var(--transition);
  }

  .sp-format-crd:hover { transform: translateY(-4px); }

  .sp-format-num {
    font-family: var(--fnt-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--clr-accent);
    line-height: 1;
  }

  .sp-format-crd h3 { font-family: var(--fnt-display); font-size: 1rem; font-weight: 700; }
  .sp-format-crd p { font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.65; }

  .sp-topics-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
  }

  .sp-topics-left { display: flex; flex-direction: column; gap: var(--sp-md); }

  .sp-topic-list { display: flex; flex-direction: column; gap: var(--sp-sm); margin-block-start: var(--sp-xs); }

  .sp-topic-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--clr-text);
  }

  .sp-topic-item i { color: var(--clr-primary); font-size: 0.85rem; flex-shrink: 0; }

  .sp-topics-img { inline-size: 100%; border-radius: var(--rad-xl); object-fit: cover; aspect-ratio: 4/3; }

  .sp-info-sec { background: var(--clr-bg); }

  .sp-info-box {
    display: flex;
    gap: var(--sp-lg);
    align-items: flex-start;
    background: var(--clr-secondary-light);
    border-radius: var(--rad-xl);
    padding: var(--sp-lg);
    border-inline-start: 6px solid var(--clr-secondary);
  }

  .sp-info-ico { font-size: 2rem; color: var(--clr-secondary); flex-shrink: 0; padding-block-start: 4px; }
  .sp-info-txt h3 { font-family: var(--fnt-display); font-size: 1.1rem; font-weight: 700; margin-block-end: var(--sp-xs); }
  .sp-info-txt p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.7; }

  
  .knowledge-filter-sec {
    background: var(--clr-surface);
    padding-block: var(--sp-lg);
    border-block-end: 2px solid var(--clr-border);
  }

  .kf-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
  }

  .kf-btn {
    padding: 8px 18px;
    border-radius: var(--rad-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clr-text-mid);
    background: var(--clr-bg);
    border: 2px solid transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    min-block-size: 44px;
  }

  .kf-btn:hover { background: var(--clr-accent-light); color: var(--clr-primary); }
  .kf-btn.active { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }

  .knowledge-articles-sec { background: var(--clr-bg); }

  .ka-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg);
  }

  .ka-crd { display: flex; flex-direction: column; transition: transform var(--transition); }
  .ka-crd:hover { transform: translateY(-6px); }
  .ka-crd.hidden { display: none; }

  .ka-img-wrap { block-size: 200px; overflow: hidden; }
  .ka-img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--transition-slow); }
  .ka-crd:hover .ka-img { transform: scale(1.06); }

  .ka-body {
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    flex: 1;
  }

  .ka-title {
    font-family: var(--fnt-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.3;
  }

  .ka-exc { font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.65; flex: 1; }

  
  .contact-main-sec { background: var(--clr-bg); }

  .contact-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-2xl);
    align-items: start;
  }

  .contact-form-col { display: flex; flex-direction: column; gap: var(--sp-lg); }

  
  .frm {
    background: var(--clr-surface);
    border-radius: var(--rad-xl);
    padding: var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
  }

  .frm-steps-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin-block-end: var(--sp-sm);
  }

  .frm-step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .frm-step-num {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: var(--clr-border);
    color: var(--clr-text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
  }

  .frm-step-dot.active .frm-step-num,
  .frm-step-dot.done .frm-step-num {
    background: var(--clr-primary);
    color: #fff;
  }

  .frm-step-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    white-space: nowrap;
  }

  .frm-step-dot.active .frm-step-lbl { color: var(--clr-primary); }

  .frm-step-line {
    flex: 1;
    block-size: 2px;
    background: var(--clr-border);
    margin-block-end: 20px;
    transition: background var(--transition);
  }

  .frm-step-panel {
    display: none;
    flex-direction: column;
    gap: var(--sp-md);
  }

  .frm-step-panel.active { display: flex; }

  .frm-field { display: flex; flex-direction: column; gap: 6px; }

  .frm-lbl { font-size: 0.85rem; font-weight: 600; color: var(--clr-text); }

  .frm-input {
    padding: 12px 16px;
    border: 2px solid var(--clr-border);
    border-radius: var(--rad-md);
    font-family: var(--fnt-body);
    font-size: 0.95rem;
    color: var(--clr-text);
    background: var(--clr-bg);
    transition: border-color var(--transition), background var(--transition);
    outline: none;
    inline-size: 100%;
    min-block-size: 48px;
  }

  .frm-input:focus { border-color: var(--clr-primary); background: var(--clr-surface); }

  .frm-select { cursor: pointer; }

  .frm-textarea { resize: vertical; min-block-size: 120px; }

  .frm-check-field {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .frm-check {
    inline-size: 20px;
    block-size: 20px;
    flex-shrink: 0;
    margin-block-start: 2px;
    accent-color: var(--clr-primary);
    cursor: pointer;
  }

  .frm-check-lbl {
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    line-height: 1.5;
    cursor: pointer;
  }

  .frm-check-lbl a { color: var(--clr-primary); font-weight: 600; }
  .frm-check-lbl a:hover { text-decoration: underline; }

  .frm-nav {
    display: flex;
    justify-content: flex-end;
    margin-block-start: var(--sp-xs);
  }

  .frm-nav--two {
    justify-content: space-between;
  }

  .contact-info-col { display: flex; flex-direction: column; gap: var(--sp-lg); }

  .contact-info-cards { display: flex; flex-direction: column; gap: var(--sp-md); }

  .contact-info-cards .contact-crd {
    flex-direction: row;
    text-align: left;
    align-items: center;
    padding: var(--sp-md);
    gap: var(--sp-md);
    border-block-end: none;
    border-inline-start: 4px solid var(--clr-primary);
    border-radius: var(--rad-md);
  }

  .contact-info-cards .contact-crd:hover { border-inline-start-color: var(--clr-accent); }

  .contact-lang-box {
    background: var(--clr-secondary-light);
    border-radius: var(--rad-lg);
    padding: var(--sp-md);
    border-inline-start: 4px solid var(--clr-secondary);
  }

  .contact-lang-title {
    font-family: var(--fnt-display);
    font-size: 1rem;
    font-weight: 700;
    margin-block-end: var(--sp-xs);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--clr-secondary);
  }

  .contact-lang-box p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.65; margin-block-end: var(--sp-sm); }

  .lang-tags { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }

  .lang-tag {
    padding: 4px 14px;
    background: var(--clr-secondary);
    color: #fff;
    border-radius: var(--rad-sm);
    font-size: 0.8rem;
    font-weight: 700;
  }

  .map-sec { background: var(--clr-surface); }

  .map-title { margin-block-end: var(--sp-md); }

  .map-wrap {
    border-radius: var(--rad-xl);
    overflow: hidden;
    border: 2px solid var(--clr-border);
  }

  
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(26, 46, 30, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
  }

  .modal-overlay.active {
    opacity: 1;
    pointer-events: all;
  }

  .modal-box {
    background: var(--clr-surface);
    border-radius: var(--rad-xl);
    padding: var(--sp-lg);
    inline-size: min(100%, 680px);
    max-block-size: 88vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    transform: translateY(20px);
    transition: transform var(--transition-slow);
  }

  .modal-overlay.active .modal-box { transform: translateY(0); }

  .modal-close {
    position: absolute;
    inset-block-start: var(--sp-md);
    inset-inline-end: var(--sp-md);
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--rad-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-muted);
    font-size: 1.1rem;
    transition: background var(--transition), color var(--transition);
  }

  .modal-close:hover { background: var(--clr-bg); color: var(--clr-text); }

  .modal-title {
    font-family: var(--fnt-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--clr-text);
    padding-inline-end: 48px;
    line-height: 1.2;
  }

  .modal-img {
    inline-size: 100%;
    border-radius: var(--rad-lg);
    object-fit: cover;
    aspect-ratio: 16/7;
  }

  .modal-content { display: flex; flex-direction: column; gap: var(--sp-sm); }
  .modal-content p { font-size: 0.95rem; color: var(--clr-text-muted); line-height: 1.75; }

  
  .thanks-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: calc(100vh - var(--hdr-h) - 280px);
    padding-block: var(--sp-2xl);
    margin-block-start: var(--hdr-h);
  }

  .thanks-sec {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xl);
  }

  .thanks-envelope {
    position: relative;
    inline-size: 120px;
    block-size: 90px;
  }

  .env-body {
    inline-size: 120px;
    block-size: 90px;
    background: var(--clr-primary);
    border-radius: var(--rad-md);
    position: relative;
    overflow: hidden;
  }

  .env-flap {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 50%;
    background: var(--clr-primary-dark);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top center;
    animation: flapOpen 0.6s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  @keyframes flapOpen {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(-180deg); }
  }

  .env-letter {
    position: absolute;
    inset-inline: 20px;
    block-size: 60px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-primary);
    font-size: 1.5rem;
    inset-block-end: -60px;
    animation: letterSlide 0.5s 0.9s ease forwards;
  }

  @keyframes letterSlide {
    0% { transform: translateY(0); }
    100% { transform: translateY(-70px); }
  }

  .thanks-txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-md);
    opacity: 0;
    animation: fadeInTxt 0.5s 1.3s ease forwards;
  }

  @keyframes fadeInTxt {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .thanks-h1 {
    font-family: var(--fnt-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--clr-text);
  }

  .thanks-p {
    color: var(--clr-text-muted);
    max-inline-size: 440px;
    line-height: 1.7;
  }

  .thanks-btns { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; }

  
  .legal-sec { background: var(--clr-bg); }

  .legal-container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    max-inline-size: 860px;
  }

  .legal-crd {
    background: var(--clr-surface);
    border-radius: var(--rad-lg);
    padding: var(--sp-lg);
    border-inline-start: 5px solid var(--clr-primary);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
  }

  .legal-crd--alt { border-inline-start-color: var(--clr-secondary); }
  .legal-crd--cookie { border-inline-start-color: var(--clr-accent); }

  .legal-crd h2 {
    font-family: var(--fnt-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--clr-text);
  }

  .legal-crd p { font-size: 0.92rem; color: var(--clr-text-muted); line-height: 1.75; }

  .cookie-icon-hd {
    font-size: 1.5rem;
    color: var(--clr-primary);
    margin-block-end: 4px;
  }

  .legal-crd--cookie .cookie-icon-hd { color: var(--clr-primary); }

  
  .ftr {
    background: var(--clr-primary-dark);
    color: rgba(255,255,255,0.85);
    margin-block-start: auto;
  }

  .ftr-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: var(--sp-xl);
    padding-block: var(--sp-2xl);
  }

  .ftr-brand { display: flex; flex-direction: column; gap: var(--sp-sm); }

  .ftr-tagline {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin-block-start: var(--sp-xs);
  }

  .ftr-nav-col { display: flex; flex-direction: column; gap: var(--sp-xs); }

  .ftr-col-title {
    font-family: var(--fnt-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-accent);
    margin-block-end: var(--sp-xs);
  }

  .ftr-link {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    transition: color var(--transition);
    padding-block: 3px;
  }

  .ftr-link:hover { color: #fff; }

  .ftr-contact-col { display: flex; flex-direction: column; gap: var(--sp-xs); }

  .ftr-contact-item {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .ftr-contact-item i { color: var(--clr-accent); flex-shrink: 0; margin-block-start: 3px; }

  .ftr-contact-item a {
    color: rgba(255,255,255,0.65);
    transition: color var(--transition);
  }

  .ftr-contact-item a:hover { color: #fff; }

  .ftr-bottom {
    border-block-start: 1px solid rgba(255,255,255,0.1);
  }

  .ftr-bottom-inner {
    padding-block: var(--sp-md);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ftr-copy {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    text-align: center;
  }

  
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  
  .cookie-modal {
    position: fixed;
    inset-block-end: var(--sp-md);
    inset-inline-start: var(--sp-md);
    z-index: 9999;
    inline-size: min(360px, calc(100vw - 2 * var(--sp-md)));
    background: var(--clr-surface);
    border-radius: var(--rad-xl);
    padding: var(--sp-md);
    border: 2px solid var(--clr-border);
    box-shadow: 0 4px 6px rgba(26,46,30,0.06), 0 12px 32px rgba(26,46,30,0.12);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    transform: translateY(20px);
    opacity: 0;
    transition: transform var(--transition-slow), opacity var(--transition-slow);
    pointer-events: none;
  }

  .cookie-modal.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .cookie-modal-hd {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .cookie-modal-hd i { font-size: 1.2rem; color: var(--clr-primary); }

  .cookie-modal-title {
    font-family: var(--fnt-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-text);
  }

  .cookie-modal-txt {
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    line-height: 1.6;
  }

  .cookie-modal-txt a { color: var(--clr-primary); font-weight: 600; }

  .cookie-modal-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cookie-btn-accept {
    padding: 11px;
    background: var(--clr-primary);
    color: #fff;
    border-radius: var(--rad-md);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    transition: background var(--transition);
    cursor: pointer;
    border: none;
    font-family: var(--fnt-body);
  }

  .cookie-btn-accept:hover { background: var(--clr-primary-dark); }

  .cookie-btn-reject {
    padding: 11px;
    background: transparent;
    color: var(--clr-text-muted);
    border-radius: var(--rad-md);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    transition: background var(--transition), color var(--transition);
    cursor: pointer;
    border: 2px solid var(--clr-border);
    font-family: var(--fnt-body);
  }

  .cookie-btn-reject:hover { background: var(--clr-bg); color: var(--clr-text); }

  .cookie-btn-customize {
    padding: 8px;
    background: transparent;
    color: var(--clr-primary);
    border-radius: var(--rad-md);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    transition: background var(--transition);
    cursor: pointer;
    border: none;
    font-family: var(--fnt-body);
  }

  .cookie-btn-customize:hover { background: var(--clr-accent-light); }

  .cookie-customize-panel {
    max-block-size: 0;
    overflow: hidden;
    transition: max-block-size var(--transition-slow);
  }

  .cookie-customize-panel.open { max-block-size: 300px; }

  .cookie-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 8px;
    border-block-end: 1px solid var(--clr-border);
    gap: var(--sp-sm);
  }

  .cookie-cat:last-child { border-block-end: none; }

  .cookie-cat-lbl {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clr-text);
  }

  .cookie-cat-note {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
  }

  .cookie-toggle {
    position: relative;
    inline-size: 40px;
    block-size: 22px;
    flex-shrink: 0;
  }

  .cookie-toggle input { opacity: 0; inline-size: 0; block-size: 0; }

  .cookie-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--clr-border);
    border-radius: 22px;
    cursor: pointer;
    transition: background var(--transition);
  }

  .cookie-toggle-slider::before {
    content: '';
    position: absolute;
    block-size: 16px;
    inline-size: 16px;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transition);
  }

  .cookie-toggle input:checked + .cookie-toggle-slider { background: var(--clr-primary); }
  .cookie-toggle input:checked + .cookie-toggle-slider::before { transform: translateX(18px); }
  .cookie-toggle input:disabled + .cookie-toggle-slider { opacity: 0.6; cursor: not-allowed; }

  .cookie-save-btn {
    padding: 10px;
    background: var(--clr-primary);
    color: #fff;
    border-radius: var(--rad-md);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    transition: background var(--transition);
    cursor: pointer;
    border: none;
    font-family: var(--fnt-body);
    inline-size: 100%;
    margin-block-start: 8px;
  }

  .cookie-save-btn:hover { background: var(--clr-primary-dark); }
}

@layer utilities {

  
  @media (max-width: 1024px) {
    .seasons-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .sp-format-grid { grid-template-columns: repeat(2, 1fr); }
    .ftr-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
    .act-layout { grid-template-columns: 1fr; }
    .act-left { position: static; }
    .featured-layout { grid-template-columns: 1fr; }
    .ka-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 768px) {
    :root { --sp-2xl: 3.5rem; --sp-xl: 2.5rem; }

    .hdr-nav { display: none; }
    .hdr-burger { display: flex; }

    .hero {
      grid-template-columns: 1fr;
      min-block-size: auto;
    }

    .hero-content {
      padding: var(--sp-xl) var(--sp-md);
      order: 2;
    }

    .hero-visual {
      order: 1;
      block-size: 55vw;
      min-block-size: 260px;
    }

    .seasons-grid { grid-template-columns: 1fr 1fr; }
    .values-grid { grid-template-columns: 1fr 1fr; }
    .sp-format-grid { grid-template-columns: 1fr 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .ka-grid { grid-template-columns: 1fr; }
    .contact-cards { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .about-split { grid-template-columns: 1fr; }
    .sp-intro-layout { grid-template-columns: 1fr; }
    .sp-topics-layout { grid-template-columns: 1fr; }
    .featured-layout { grid-template-columns: 1fr; }
    .ftr-inner { grid-template-columns: 1fr 1fr; }
    .act-item { grid-template-columns: 140px 1fr; }
  }

  @media (max-width: 480px) {
    :root { --sp-2xl: 2.5rem; --sp-xl: 2rem; }

    .seasons-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .sp-format-grid { grid-template-columns: 1fr; }
    .ftr-inner { grid-template-columns: 1fr; }
    .hero-cta-row { flex-direction: column; }
    .hero-cta-row .btn { inline-size: 100%; justify-content: center; }
    .act-item { grid-template-columns: 1fr; }
    .act-img-wrap { block-size: 180px; }
    .disclaimer-box { flex-direction: column; }
    .sp-info-box { flex-direction: column; }
    .frm-nav--two { flex-direction: column-reverse; gap: var(--sp-xs); }
    .cta-btns { flex-direction: column; align-items: center; }
    .thanks-btns { flex-direction: column; align-items: center; }
    .kf-bar { gap: 6px; }
    .kf-btn { font-size: 0.8rem; padding: 6px 12px; }
    .contact-info-cards .contact-crd { flex-direction: column; text-align: center; }
  }
}