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

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

@layer tokens {
  :root {
    --color-primary: #1F4D3A;
    --color-primary-dark: #133226;
    --color-primary-light: #3C7A5A;
    --color-secondary: #C1652F;
    --color-secondary-light: #E0895A;
    --color-accent: #D4A94A;
    --color-accent-light: #E8C878;
    --color-bg: #FAF7F1;
    --color-bg-alt: #F1ECE1;
    --color-surface: #FFFEFB;
    --color-surface-tint: #F5F1E7;
    --color-text: #26302B;
    --color-text-muted: #5B6B62;
    --color-border: #E3DCC9;
    --color-border-strong: #CFC5A8;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --shadow-sm: 0 1px 2px rgba(31,77,58,0.07), 0 1px 1px rgba(31,77,58,0.05);
    --shadow-md: 0 6px 14px -4px rgba(31,77,58,0.12), 0 2px 6px rgba(31,77,58,0.08);
    --shadow-lg: 0 24px 48px -12px rgba(31,77,58,0.20), 0 8px 20px -8px rgba(31,77,58,0.14);
    --shadow-xl: 0 36px 70px -18px rgba(31,77,58,0.28), 0 14px 28px -10px rgba(31,77,58,0.16);

    --ease: cubic-bezier(.4,0,.2,1);
    --transition: .35s var(--ease);
    --transition-fast: .2s var(--ease);

    --font-heading: 'DM Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
  }
}

@layer layout {
  body.canvas {
    font-family: var(--font-body);
    color: var(--color-text);
    background:
      radial-gradient(circle at 8% 12%, rgba(31,77,58,0.05), transparent 42%),
      radial-gradient(circle at 92% 30%, rgba(212,169,74,0.08), transparent 40%),
      radial-gradient(circle at 50% 90%, rgba(193,101,47,0.05), transparent 45%),
      var(--color-bg);
    overflow-x: hidden;
  }

  main { display: block; }

  .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

  
  .bridge {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 500;
    background: rgba(250,247,241,0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    transition: transform .4s var(--ease);
  }
  .bridge.bridge--hidden { transform: translateY(-100%); }

  .bridge-nav {
    max-width: 1280px; margin: 0 auto; padding: .9rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  }
  .bridge-logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
  .bridge-links { display: flex; align-items: center; gap: 1.9rem; }
  .bridge-links a {
    position: relative; font-weight: 500; font-size: .96rem; color: var(--color-text);
    padding: .3rem 0; transition: color var(--transition-fast);
  }
  .bridge-links a::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transition: width var(--transition);
  }
  .bridge-links a:hover { color: var(--color-primary); }
  .bridge-links a:hover::after, .bridge-links a.is-active::after { width: 100%; }
  .bridge-links a.is-active { color: var(--color-primary); font-weight: 700; }

  .bridge-cta { margin-left: auto; }
  .bridge-toggle { display: none; font-size: 1.4rem; color: var(--color-primary); padding: .4rem; }

  .bridge-progress { height: 3px; width: 100%; background: transparent; }
  .bridge-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
    transition: width .1s linear;
  }

  
  .drawer {
    position: fixed; inset: 0; z-index: 900;
    background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary) 60%, var(--color-secondary));
    display: flex; flex-direction: column;
    padding: 1.5rem;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .45s var(--ease), opacity .3s var(--ease), visibility .45s;
  }
  .drawer.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .drawer-top { display: flex; align-items: center; justify-content: space-between; color: #fff; margin-bottom: 2.5rem; }
  .drawer-logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.1rem; }
  .drawer-close { color: #fff; font-size: 1.6rem; padding: .5rem; transition: transform var(--transition-fast); }
  .drawer-close:hover { transform: rotate(90deg); }
  .drawer-grid {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    align-content: center;
  }
  .drawer-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
    color: #fff; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-lg);
    padding: 2rem 1rem; text-align: center; font-weight: 600;
    transition: background var(--transition), transform var(--transition), border-color var(--transition);
  }
  .drawer-item i { font-size: 1.8rem; }
  .drawer-item:hover { background: rgba(255,255,255,0.18); transform: translateY(-4px); border-color: var(--color-accent-light); }

  
  .island {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: clamp(2rem, 4.5vw, 4rem);
    margin: clamp(2.5rem, 6vw, 5.5rem) auto;
    max-width: 1220px;
    position: relative;
  }
  .island--tint { background: var(--color-surface-tint); }
  .island--legal { max-width: 900px; }
  .island--legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: .6rem; color: var(--color-primary-dark); }
  .island--legal .lead-text { margin-bottom: 2.4rem; color: var(--color-text-muted); }

  @media (min-width: 900px) {
    .island:nth-of-type(odd) { margin-left: 3vw; }
    .island:nth-of-type(even) { margin-right: 3vw; }
  }
}

@layer components {

  
  .stage { padding: clamp(8.5rem,16vw,11rem) 1.5rem clamp(3rem,6vw,5rem); text-align: center; }
  .stage--sub { padding-top: clamp(7.5rem,14vw,9.5rem); padding-bottom: 2rem; }
  .stage--thanks { padding-bottom: 1rem; }
  .stage-inner { max-width: 880px; margin: 0 auto; }
  .stage-tag {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(31,77,58,0.08); color: var(--color-primary);
    border: 1px solid rgba(31,77,58,0.18);
    padding: .5rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    margin-bottom: 1.6rem;
  }
  .stage-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 6.2vw, 4.6rem);
    font-weight: 700; letter-spacing: -0.02em; line-height: 1.08;
    margin-bottom: 1.6rem; color: var(--color-text);
  }
  .stage-title--sm { font-size: clamp(2rem, 4.6vw, 3.4rem); }
  .stage-gradient {
    background: linear-gradient(100deg, var(--color-primary) 10%, var(--color-secondary) 50%, var(--color-accent) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .stage-sub { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: var(--color-text-muted); max-width: 680px; margin: 0 auto 2.2rem; }
  .stage-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

  
  .btn {
    display: inline-flex; align-items: center; gap: .55rem; justify-content: center;
    font-weight: 600; font-size: .96rem; padding: .85rem 1.7rem;
    border-radius: var(--radius-md);
    min-height: 48px;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
    position: relative; overflow: hidden;
    border: 1px solid transparent;
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff; box-shadow: var(--shadow-md);
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
  .btn-lg { padding: 1rem 2.1rem; font-size: 1.02rem; }
  .btn-sm { padding: .55rem 1.1rem; font-size: .85rem; min-height: 40px; }
  .btn-ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border-strong); }
  .btn-ghost:hover { background: var(--color-bg-alt); border-color: var(--color-primary); transform: translateY(-2px); }
  .btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
  .btn-outline:hover { border-color: var(--color-secondary); color: var(--color-secondary); transform: translateY(-2px); }
  .btn-light { background: #fff; color: var(--color-primary-dark); box-shadow: var(--shadow-md); }
  .btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

  .link-underline { position: relative; font-weight: 600; color: var(--color-primary); }
  .link-underline::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
    background: var(--color-primary); transform: scaleX(0.3); transform-origin: left;
    transition: transform var(--transition);
  }
  .link-underline:hover::after { transform: scaleX(1); }

  
  .section-head { text-align: center; max-width: 720px; margin: 0 auto 2.8rem; }
  .eyebrow {
    display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-secondary); margin-bottom: .7rem;
    border-left: 3px solid var(--color-secondary); padding-left: .6rem;
  }
  .eyebrow--light { color: var(--color-accent-light); border-left-color: var(--color-accent-light); }
  .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: .8rem; letter-spacing: -0.01em; }
  .section-head p { color: var(--color-text-muted); font-size: 1.03rem; }

  
  .shelf { display: flex; gap: 1.4rem; flex-wrap: wrap; }
  .shelf--info { justify-content: space-between; }
  .shelf-card {
    flex: 1 1 220px; background: var(--color-surface-tint); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 1.6rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  .shelf-card--flat { display: flex; flex-direction: column; gap: .8rem; }
  .shelf-card--flat i { font-size: 1.5rem; color: var(--color-primary); }
  .shelf-card--flat p { font-size: .93rem; color: var(--color-text-muted); }
  .shelf-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }

  .shelf--stats { gap: 1.2rem; }
  .shelf-card--stat { text-align: center; flex: 1 1 180px; padding: 2rem 1rem; }
  .stat-number { display: block; font-size: clamp(2.2rem,4vw,3rem); font-weight: 700; color: var(--color-primary); font-family: var(--font-heading); }
  .stat-label { display: block; margin-top: .5rem; color: var(--color-text-muted); font-size: .92rem; font-weight: 500; }

  
  .gallery { display: grid; gap: 1.6rem; }
  .gallery--4 { grid-template-columns: repeat(4, 1fr); }
  .gallery--5 { grid-template-columns: repeat(5, 1fr); }
  .gallery--3-wide { grid-template-columns: repeat(3, 1fr); }

  .gallery-item {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    overflow: hidden; position: relative;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex; flex-direction: column;
  }
  .gallery-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--color-accent); }
  .gallery-item-media { height: 170px; overflow: hidden; }
  .gallery-item-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
  .gallery-item:hover .gallery-item-media img { transform: scale(1.08); }
  .gallery-item-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
  .gallery-item-icon {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    background: rgba(31,77,58,0.09); color: var(--color-primary); border-radius: var(--radius-sm); font-size: 1.1rem;
  }
  .gallery-item-body h3 { font-size: 1.12rem; }
  .gallery-item-body p { font-size: .9rem; color: var(--color-text-muted); }
  .gallery-item-reveal {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height var(--transition), opacity var(--transition);
    font-size: .85rem;
  }
  .gallery-item-reveal span { font-weight: 700; color: var(--color-secondary); display: block; margin-top: .4rem; }
  .gallery-item-reveal ul { margin-top: .4rem; display: flex; flex-direction: column; gap: .3rem; }
  .gallery-item-reveal li { padding-left: 1rem; position: relative; color: var(--color-text-muted); }
  .gallery-item-reveal li::before { content: '\2022'; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
  .gallery-item:hover .gallery-item-reveal { max-height: 220px; opacity: 1; }

  .gallery-item--value {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: 1.8rem; display: flex; flex-direction: column; gap: .7rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  .gallery-item--value:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
  .gallery-item--value h3 { font-size: 1.05rem; }
  .gallery-item--value p { font-size: .9rem; color: var(--color-text-muted); }

  .gallery-item--flat {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: 1.8rem; display: flex; flex-direction: column; gap: .7rem; text-align: left;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  .gallery-item--flat:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--color-secondary); }
  .gallery-item--flat h3 { font-size: 1.05rem; }
  .gallery-item--flat p { font-size: .9rem; color: var(--color-text-muted); }

  .gallery-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); position: relative; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); }
  .gallery-frame:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .gallery-frame img { height: 240px; width: 100%; object-fit: cover; }
  .gallery-frame figcaption { padding: .9rem 1.1rem; font-size: .88rem; color: var(--color-text-muted); background: var(--color-surface); }

  
  .spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; }
  .spotlight--reverse { direction: rtl; }
  .spotlight--reverse .spotlight-body, .spotlight--reverse .spotlight-media { direction: ltr; }
  .spotlight-media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); }
  .spotlight-media img { height: 100%; width: 100%; object-fit: cover; min-height: 320px; }
  .spotlight-body h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 1rem; letter-spacing: -0.01em; }
  .spotlight-body p { color: var(--color-text-muted); margin-bottom: 1rem; }

  
  .dual-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .dual-cta-card {
    padding: 2.4rem; border-radius: var(--radius-lg);
    transition: transform var(--transition), box-shadow var(--transition);
  }
  .dual-cta-card--primary { background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark)); color: #fff; box-shadow: var(--shadow-lg); }
  .dual-cta-card--secondary { background: var(--color-surface-tint); border: 1px solid var(--color-border); }
  .dual-cta-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
  .dual-cta-card h3 { font-size: 1.4rem; margin-bottom: .7rem; }
  .dual-cta-card p { margin-bottom: 1.4rem; opacity: .92; font-size: .95rem; }
  .dual-cta-card--primary p { color: rgba(255,255,255,0.88); }
  .dual-cta-card--secondary p { color: var(--color-text-muted); }

  
  .minimal-cta { text-align: center; padding: clamp(4rem,8vw,6rem) 1.5rem; max-width: 720px; margin: 0 auto; }
  .minimal-cta h2 { font-size: clamp(1.7rem,3.6vw,2.5rem); margin-bottom: .8rem; }
  .minimal-cta p { color: var(--color-text-muted); margin-bottom: 1.8rem; }

  
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
  .step-card {
    background: var(--color-surface-tint); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: 1.8rem; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  .step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
  .step-number { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: var(--color-accent); display: block; margin-bottom: .6rem; }
  .step-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
  .step-card p { font-size: .89rem; color: var(--color-text-muted); }

  
  .format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
  .format-card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: 2rem; text-align: center; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  .format-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
  .format-card i { font-size: 2rem; color: var(--color-primary); margin-bottom: .8rem; }
  .format-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
  .format-card p { font-size: .9rem; color: var(--color-text-muted); margin-bottom: .9rem; }
  .format-meta { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--color-secondary); background: rgba(193,101,47,0.09); padding: .35rem .8rem; border-radius: 999px; }

  
  .module-list { display: flex; flex-direction: column; gap: 1rem; }
  .module-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
  .module-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
  .module-card-head { display: flex; align-items: center; gap: 1.2rem; padding: 1.4rem 1.6rem; cursor: pointer; }
  .module-number { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .module-card-head h3 { font-size: 1.08rem; }
  .module-meta { font-size: .82rem; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; }
  .module-arrow { margin-left: auto; color: var(--color-text-muted); transition: transform var(--transition); }
  .module-card-body { max-height: 0; overflow: hidden; padding: 0 1.6rem; transition: max-height var(--transition), padding var(--transition); }
  .module-card-body ul { margin-top: .8rem; display: flex; flex-direction: column; gap: .4rem; }
  .module-card-body li { padding-left: 1.1rem; position: relative; font-size: .9rem; color: var(--color-text-muted); }
  .module-card-body li::before { content: '\2192'; position: absolute; left: 0; color: var(--color-accent); }
  .module-card-body p { font-size: .93rem; color: var(--color-text-muted); }
  .module-card.is-open .module-card-body { max-height: 400px; padding: 0 1.6rem 1.6rem; }
  .module-card.is-open .module-arrow { transform: rotate(180deg); }

  
  .method-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
  .method-step { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); padding: 1.6rem; transition: transform var(--transition), box-shadow var(--transition); }
  .method-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .method-letter { font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; color: var(--color-accent); }
  .method-step h3 { font-size: 1.02rem; margin: .5rem 0; }
  .method-step p { font-size: .88rem; color: var(--color-text-muted); }

  
  .mini-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .mini-faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; transition: transform var(--transition), border-color var(--transition); }
  .mini-faq-item:hover { transform: translateY(-4px); border-color: var(--color-primary); }
  .mini-faq-item h3 { font-size: 1rem; margin-bottom: .5rem; color: var(--color-primary-dark); }
  .mini-faq-item p { font-size: .9rem; color: var(--color-text-muted); }

  
  .faq-block { padding: 1.4rem 0; border-bottom: 1px solid var(--color-border); }
  .faq-block:last-of-type { border-bottom: none; }
  .faq-block h2 { font-size: 1.15rem; margin-bottom: .6rem; color: var(--color-primary-dark); }
  .faq-block p { color: var(--color-text-muted); font-size: .96rem; }

  
  .contact-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.4rem; }
  .contact-form h2 { font-size: 1.5rem; margin-bottom: 1.4rem; }
  .form-row { display: grid; gap: 1.2rem; margin-bottom: 1.2rem; }
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  .form-field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
  .form-field label { font-size: .88rem; font-weight: 600; color: var(--color-text); }
  .form-field input, .form-field select, .form-field textarea {
    padding: .8rem 1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
    background: var(--color-surface); transition: border-color var(--transition), box-shadow var(--transition);
    font-size: .95rem;
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(31,77,58,0.14);
  }
  .form-field--checkbox { flex-direction: row; align-items: flex-start; gap: .7rem; }
  .form-field--checkbox input { width: 20px; height: 20px; min-width: 20px; margin-top: .1rem; accent-color: var(--color-primary); }
  .form-field--checkbox label { font-weight: 400; font-size: .87rem; color: var(--color-text-muted); }

  .contact-side { display: flex; flex-direction: column; gap: 1.4rem; }
  .contact-card { background: var(--color-surface-tint); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.8rem; }
  .contact-card h3 { margin-bottom: 1rem; font-size: 1.1rem; }
  .contact-card ul { display: flex; flex-direction: column; gap: .8rem; }
  .contact-card li { display: flex; align-items: flex-start; gap: .7rem; font-size: .92rem; color: var(--color-text-muted); }
  .contact-card li i { color: var(--color-primary); margin-top: .15rem; }
  .contact-card a:hover { color: var(--color-primary); }
  .contact-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
  .contact-image img { height: 220px; width: 100%; object-fit: cover; }

  .newsletter-block { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
  .newsletter-block h2 { font-size: 1.5rem; margin: .5rem 0 .7rem; }
  .newsletter-block p { color: var(--color-text-muted); font-size: .93rem; }
  .newsletter-form { display: flex; gap: .8rem; }
  .newsletter-form input {
    flex: 1; padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
  }
  .newsletter-form input:focus { outline: none; border-color: var(--color-primary); }

  .map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }

  
  .dock { background: var(--color-primary-dark); color: #EDEAE0; margin-top: 2rem; }
  .dock-row {
    max-width: 1220px; margin: 0 auto; padding: 2.6rem 1.5rem 1.8rem;
    display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  }
  .dock-brand { display: flex; align-items: center; gap: .8rem; }
  .dock-brand strong { display: block; font-size: 1.05rem; }
  .dock-brand span { display: block; font-size: .8rem; color: rgba(237,234,224,0.65); }
  .dock-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
  .dock-links a { font-size: .87rem; color: rgba(237,234,224,0.8); transition: color var(--transition-fast); }
  .dock-links a:hover { color: var(--color-accent-light); }
  .dock-contact { display: flex; flex-direction: column; gap: .5rem; font-size: .85rem; }
  .dock-contact a, .dock-contact span { display: flex; align-items: center; gap: .5rem; color: rgba(237,234,224,0.85); transition: color var(--transition-fast); }
  .dock-contact a:hover { color: var(--color-accent-light); }
  .dock-bar {
    border-top: 1px solid rgba(237,234,224,0.15);
    padding: 1.1rem 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
    font-size: .78rem; color: rgba(237,234,224,0.55); max-width: 1220px; margin: 0 auto;
  }

  
  .stage-curtain {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999;
    background: var(--color-surface); border-top: 2px solid var(--color-primary);
    box-shadow: 0 -12px 30px rgba(31,77,58,0.18);
    transform: translateY(100%); transition: transform .5s var(--ease);
  }
  .stage-curtain.is-visible { transform: translateY(0); }
  .stage-curtain-row {
    max-width: 1220px; margin: 0 auto; padding: 1.2rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
  }
  .stage-curtain-row p { font-size: .87rem; color: var(--color-text-muted); max-width: 640px; }
  .stage-curtain-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
  .stage-curtain-panel {
    max-height: 0; overflow: hidden; transition: max-height var(--transition);
    max-width: 1220px; margin: 0 auto; padding: 0 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
    border-top: 1px solid var(--color-border);
  }
  .stage-curtain.is-expanded .stage-curtain-panel { max-height: 500px; padding: 1.2rem 1.5rem; }
  .cookie-toggle { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; }
  .cookie-toggle strong { font-size: .9rem; display: block; }
  .cookie-toggle p { font-size: .8rem; color: var(--color-text-muted); }
  .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .switch span { position: absolute; inset: 0; background: var(--color-border-strong); border-radius: 999px; transition: background var(--transition); }
  .switch span::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition); }
  .switch input:checked + span { background: var(--color-primary); }
  .switch input:checked + span::before { transform: translateX(20px); }
}

@layer utilities {
  .lead-text { font-size: 1.05rem; color: var(--color-text-muted); }

  @media (max-width: 1100px) {
    .gallery--4, .gallery--5, .gallery--3-wide, .format-grid, .steps, .method-flow { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 900px) {
    .bridge-links, .bridge-cta { display: none; }
    .bridge-toggle { display: inline-flex; }
    .spotlight, .contact-layout, .dual-cta, .newsletter-block { grid-template-columns: 1fr; }
    .spotlight--reverse { direction: ltr; }
    .spotlight-media img { min-height: 220px; }
    .mini-faq { grid-template-columns: 1fr; }
    .form-row--2 { grid-template-columns: 1fr; }
    .dock-row { flex-direction: column; }
  }

  @media (max-width: 640px) {
    .gallery--4, .gallery--5, .gallery--3-wide, .format-grid, .steps, .method-flow { grid-template-columns: 1fr; }
    .stage { padding-top: 7.5rem; }
    .drawer-grid { grid-template-columns: 1fr 1fr; }
    .newsletter-form { flex-direction: column; }
    .stage-curtain-row { flex-direction: column; align-items: flex-start; }
  }
}