@layer base, layout, components, utilities;

@layer base {
  :root {
    --color-earth-dark: #2c2416;
    --color-earth-mid: #5c4a2a;
    --color-earth-warm: #8b6c3e;
    --color-earth-light: #c4a97d;
    --color-earth-pale: #e8dcc8;
    --color-earth-cream: #f5f0e8;
    --color-earth-white: #faf8f4;
    --color-sage: #6b7c5e;
    --color-sage-light: #a8b89a;
    --color-sage-pale: #dce5d4;
    --color-clay: #a05c3c;
    --color-clay-light: #d4896a;
    --color-clay-pale: #f0d8cc;
    --color-ink: #1e1a14;
    --color-ink-soft: #3d3628;
    --color-text-primary: #2c2416;
    --color-text-secondary: #5c4a2a;
    --color-text-muted: #8b7a5a;
    --color-text-light: #f5f0e8;
    --color-bg-primary: #faf8f4;
    --color-bg-secondary: #f5f0e8;
    --color-bg-tertiary: #e8dcc8;
    --color-accent-primary: #8b6c3e;
    --color-accent-secondary: #6b7c5e;
    --color-accent-warm: #a05c3c;
    --shadow-sm: 0 1px 3px rgba(44,36,22,0.08), 0 1px 2px rgba(44,36,22,0.05);
    --shadow-md: 0 4px 12px rgba(44,36,22,0.10), 0 2px 4px rgba(44,36,22,0.06);
    --shadow-lg: 0 8px 24px rgba(44,36,22,0.12), 0 4px 8px rgba(44,36,22,0.08), 0 1px 2px rgba(44,36,22,0.04);
    --shadow-xl: 0 16px 48px rgba(44,36,22,0.14), 0 8px 16px rgba(44,36,22,0.10), 0 2px 4px rgba(44,36,22,0.06);
    --shadow-card: 0 2px 8px rgba(44,36,22,0.08), 0 8px 32px rgba(44,36,22,0.06);
    --shadow-card-hover: 0 4px 16px rgba(44,36,22,0.14), 0 16px 48px rgba(44,36,22,0.10);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-organic: 60% 40% 55% 45% / 45% 55% 45% 55%;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 8rem;
    --font-body: 'Nunito Sans', sans-serif;
    --nav-height: 72px;
    --transition-fast: 0.15s ease;
    --transition-mid: 0.3s ease;
    --transition-slow: 0.5s ease;
  }

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

  html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
  }

  body.canvas {
    font-family: var(--font-body);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
  }

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

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

  ul { list-style: none; }

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

  input, textarea, select {
    font-family: var(--font-body);
  }
}

@layer layout {
  .container {
    inline-size: 100%;
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  main { flex: 1; }
}

@layer components {

  
  .heading-xl {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
  }

  .heading-lg {
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
  }

  .heading-md {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary);
  }

  .heading-sm {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-primary);
  }

  .heading-lg.centered,
  .heading-xl.centered { text-align: center; }

  .heading-lg.light,
  .heading-xl.light { color: var(--color-earth-white); }

  .section-subtext {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    max-inline-size: 620px;
    line-height: 1.75;
  }

  .section-subtext.centered {
    text-align: center;
    margin-inline: auto;
  }

  
  .progress-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 3px;
    inline-size: 0%;
    background: linear-gradient(90deg, var(--color-earth-warm), var(--color-clay));
    z-index: 1000;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
  }

  
  .nav-vessel {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    z-index: 900;
    transition: background-color var(--transition-mid), box-shadow var(--transition-mid);
    padding-block: 0;
  }

  .nav-vessel--transparent {
    background-color: transparent;
  }

  .nav-vessel--solid,
  .nav-vessel.scrolled {
    background-color: var(--color-earth-white);
    box-shadow: var(--shadow-md);
  }

  .nav-inner {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
    block-size: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
  }

  .nav-logo {
    block-size: 36px;
    inline-size: auto;
  }

  .nav-brand-text {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-earth-dark);
    letter-spacing: -0.02em;
  }

  .nav-links {
    display: none;
    gap: var(--space-lg);
    align-items: center;
  }

  .nav-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    position: relative;
    padding-block-end: 2px;
    transition: color var(--transition-fast);
  }

  .nav-link::after {
    content: '';
    position: absolute;
    inset-block-end: -2px;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 2px;
    background: var(--color-earth-warm);
    border-radius: 2px;
    transition: width var(--transition-mid);
  }

  .nav-link:hover,
  .nav-link.active {
    color: var(--color-earth-warm);
  }

  .nav-link:hover::after,
  .nav-link.active::after {
    inline-size: 100%;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    min-inline-size: 44px;
    min-block-size: 44px;
    align-items: center;
    justify-content: center;
  }

  .nav-toggle span {
    display: block;
    inline-size: 22px;
    block-size: 2px;
    background: var(--color-earth-dark);
    border-radius: 2px;
    transition: transform var(--transition-mid), opacity var(--transition-fast);
  }

  
  .drawer {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--color-earth-dark) 0%, var(--color-ink-soft) 100%);
    z-index: 950;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
  }

  .drawer.drawer--open {
    opacity: 1;
    visibility: visible;
  }

  .drawer-close {
    position: absolute;
    inset-block-start: var(--space-md);
    inset-inline-end: var(--space-md);
    inline-size: 48px;
    block-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-earth-pale);
    font-size: 1.5rem;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .drawer-close:hover {
    background-color: rgba(255,255,255,0.1);
    color: var(--color-earth-white);
  }

  .drawer-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }

  .drawer-link {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--color-earth-pale);
    text-decoration: none;
    transition: color var(--transition-fast);
    letter-spacing: -0.01em;
  }

  .drawer-link:hover {
    color: var(--color-earth-light);
  }

  .drawer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  .drawer-contact a {
    font-size: 0.95rem;
    color: var(--color-earth-light);
    opacity: 0.8;
    transition: opacity var(--transition-fast);
  }

  .drawer-contact a:hover { opacity: 1; }

  .stage-curtain {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 940;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
  }

  
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-block: 14px;
    padding-inline: 28px;
    border-radius: var(--radius-lg);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition-mid);
    cursor: pointer;
    border: 2px solid transparent;
    min-block-size: 44px;
    white-space: nowrap;
  }

  .btn--primary {
    background: var(--color-earth-warm);
    color: var(--color-earth-white);
    border-color: var(--color-earth-warm);
    box-shadow: var(--shadow-md);
  }

  .btn--primary:hover {
    background: var(--color-earth-mid);
    border-color: var(--color-earth-mid);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
  }

  .btn--ghost {
    background: transparent;
    color: var(--color-earth-warm);
    border-color: var(--color-earth-warm);
  }

  .btn--ghost:hover {
    background: var(--color-earth-warm);
    color: var(--color-earth-white);
    transform: translateY(-1px);
  }

  .btn--light {
    background: var(--color-earth-white);
    color: var(--color-earth-dark);
    border-color: var(--color-earth-white);
    box-shadow: var(--shadow-md);
  }

  .btn--light:hover {
    background: var(--color-earth-cream);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
  }

  .btn--full { inline-size: 100%; justify-content: center; }

  .btn--sm {
    padding-block: 10px;
    padding-inline: 20px;
    font-size: 0.875rem;
  }

  
  .organic-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-earth-warm);
    background: var(--color-clay-pale);
    padding-block: 6px;
    padding-inline: 14px;
    border-radius: 20px;
    margin-block-end: var(--space-sm);
  }

  .organic-tag--center { display: flex; justify-content: center; width: fit-content; margin-inline: auto; }
  .organic-tag--light { color: var(--color-earth-light); background: rgba(255,255,255,0.15); }

  
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--color-earth-warm);
    font-size: 0.95rem;
    transition: gap var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
  }

  .link-arrow:hover {
    gap: 12px;
    color: var(--color-earth-mid);
  }

  
  .section-header {
    text-align: center;
    margin-block-end: var(--space-xl);
  }

  
  .stage {
    position: relative;
    min-block-size: 100vh;
    background: linear-gradient(145deg, var(--color-earth-cream) 0%, var(--color-earth-pale) 60%, var(--color-sage-pale) 100%);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-block-start: var(--nav-height);
  }

  .stage-texture {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
  }

  .stage-blob {
    position: absolute;
    border-radius: var(--radius-organic);
    opacity: 0.25;
    pointer-events: none;
  }

  .stage-blob--1 {
    inline-size: 500px;
    block-size: 500px;
    background: radial-gradient(circle, var(--color-earth-light) 0%, transparent 70%);
    inset-block-start: -100px;
    inset-inline-end: -100px;
    border-radius: 55% 45% 60% 40% / 40% 60% 40% 60%;
  }

  .stage-blob--2 {
    inline-size: 350px;
    block-size: 350px;
    background: radial-gradient(circle, var(--color-sage-light) 0%, transparent 70%);
    inset-block-end: -80px;
    inset-inline-start: -60px;
    border-radius: 40% 60% 45% 55% / 55% 45% 55% 45%;
  }

  .stage-inner {
    position: relative;
    z-index: 2;
    inline-size: 100%;
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
    padding-block: var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
  }

  .stage-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-earth-warm);
    margin-block-end: var(--space-sm);
  }

  .stage-label-dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--color-earth-warm);
    animation: pulse-dot 2s ease-in-out infinite;
  }

  @keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
  }

  .stage-heading {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-earth-dark);
    margin-block-end: var(--space-md);
  }

  .stage-heading em {
    font-style: italic;
    color: var(--color-earth-warm);
  }

  .stage-subtext {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
    max-inline-size: 560px;
    margin-block-end: var(--space-lg);
  }

  .stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .stage-visual {
    position: relative;
  }

  .stage-img-wrap {
    position: relative;
    border-radius: 24px 40px 24px 48px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
  }

  .stage-img {
    inline-size: 100%;
    block-size: 420px;
    object-fit: cover;
    display: block;
  }

  .stage-img-accent {
    position: absolute;
    inset-block-end: -16px;
    inset-inline-end: -16px;
    inline-size: 120px;
    block-size: 120px;
    background: var(--color-earth-warm);
    border-radius: 40% 60% 55% 45% / 45% 55% 45% 55%;
    opacity: 0.3;
    z-index: -1;
  }

  .stage-scroll-hint {
    position: absolute;
    inset-block-end: var(--space-lg);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    animation: float-hint 2s ease-in-out infinite;
  }

  @keyframes float-hint {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
  }

  
  .section-intro {
    padding-block: var(--space-2xl);
    background: var(--color-bg-primary);
  }

  .intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;
  }

  .intro-question h2 { margin-block-start: var(--space-xs); }

  .intro-answer p {
    color: var(--color-text-secondary);
    margin-block-end: var(--space-sm);
    font-size: 1.05rem;
    line-height: 1.8;
  }

  
  .section-zigzag {
    padding-block: var(--space-2xl);
    background: var(--color-bg-secondary);
  }

  .zigzag-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
    margin-block-end: var(--space-3xl);
  }

  .zigzag-block:last-child { margin-block-end: 0; }

  .zigzag-img-frame {
    border-radius: 32px 16px 32px 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
  }

  .zigzag-img-frame--alt {
    border-radius: 16px 32px 16px 32px;
  }

  .zigzag-img {
    inline-size: 100%;
    block-size: 360px;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
  }

  .zigzag-img-frame:hover .zigzag-img {
    transform: scale(1.03);
  }

  .zigzag-accent-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }

  .zigzag-accent-shape--a {
    inline-size: 80px;
    block-size: 80px;
    background: var(--color-earth-light);
    inset-block-end: -20px;
    inset-inline-start: -20px;
    opacity: 0.5;
    border-radius: 45% 55% 50% 50%;
  }

  .zigzag-accent-shape--b {
    inline-size: 60px;
    block-size: 60px;
    background: var(--color-sage-light);
    inset-block-start: -15px;
    inset-inline-end: -15px;
    opacity: 0.5;
    border-radius: 55% 45% 50% 50%;
  }

  .zigzag-accent-shape--c {
    inline-size: 70px;
    block-size: 70px;
    background: var(--color-clay-light);
    inset-block-end: -15px;
    inset-inline-end: -15px;
    opacity: 0.4;
    border-radius: 50% 50% 45% 55%;
  }

  .zigzag-visual { position: relative; }

  .zigzag-content .organic-tag { margin-block-end: var(--space-sm); }

  .zigzag-content h3 { margin-block-end: var(--space-sm); }

  .zigzag-content p {
    color: var(--color-text-secondary);
    margin-block-end: var(--space-sm);
    line-height: 1.8;
    font-size: 1.02rem;
  }

  
  .section-how-it-works {
    padding-block: var(--space-2xl);
    background: var(--color-bg-primary);
  }

  .shelf--how {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .shelf-card--how {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-mid), box-shadow var(--transition-mid);
    border: 1px solid var(--color-earth-pale);
  }

  .shelf-card--how::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 4px;
    background: linear-gradient(90deg, var(--color-earth-warm), var(--color-clay-light));
    opacity: 0;
    transition: opacity var(--transition-mid);
  }

  .shelf-card--how:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }

  .shelf-card--how:hover::before { opacity: 1; }

  .shelf-card--featured {
    background: linear-gradient(145deg, var(--color-earth-warm) 0%, var(--color-earth-mid) 100%);
    color: var(--color-earth-white);
  }

  .shelf-card--featured .shelf-card-step,
  .shelf-card--featured .shelf-card-title { color: var(--color-earth-white); }

  .shelf-card--featured .shelf-card-text { color: var(--color-earth-pale); }

  .shelf-card--featured .shelf-card-icon { color: var(--color-earth-light); }

  .shelf-card-step {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-earth-pale);
    line-height: 1;
    margin-block-end: var(--space-sm);
    letter-spacing: -0.03em;
  }

  .shelf-card-icon {
    font-size: 1.75rem;
    color: var(--color-earth-warm);
    margin-block-end: var(--space-sm);
  }

  .shelf-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: var(--space-xs);
  }

  .shelf-card-text {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
  }

  
  .section-swiper {
    padding-block: var(--space-2xl);
    background: var(--color-bg-secondary);
    overflow: hidden;
  }

  .gallery-card {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    block-size: 100%;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-earth-pale);
    transition: transform var(--transition-mid), box-shadow var(--transition-mid);
  }

  .gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }

  .gallery-card-icon {
    inline-size: 52px;
    block-size: 52px;
    background: var(--color-clay-pale);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--color-clay);
    margin-block-end: var(--space-sm);
  }

  .gallery-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: var(--space-xs);
  }

  .gallery-card p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
  }

  .swiper-pagination-bullet {
    background: var(--color-earth-light) !important;
    opacity: 0.6 !important;
  }

  .swiper-pagination-bullet-active {
    background: var(--color-earth-warm) !important;
    opacity: 1 !important;
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: var(--color-earth-warm) !important;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 1.2rem !important;
  }

  
  .section-for-hr {
    padding-block: var(--space-2xl);
    background: var(--color-bg-primary);
  }

  .for-hr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
  }

  .for-hr-visual {
    position: relative;
    border-radius: 32px 16px 32px 16px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
  }

  .for-hr-img {
    inline-size: 100%;
    block-size: 400px;
    object-fit: cover;
  }

  .for-hr-tag-float {
    position: absolute;
    inset-block-end: var(--space-md);
    inset-inline-start: var(--space-md);
    background: var(--color-earth-white);
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-earth-warm);
    box-shadow: var(--shadow-md);
  }

  .for-hr-content h2 { margin-block-end: var(--space-sm); }

  .for-hr-content p {
    color: var(--color-text-secondary);
    margin-block-end: var(--space-sm);
    line-height: 1.8;
  }

  .for-hr-list {
    margin-block: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .for-hr-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
  }

  .for-hr-list li i {
    color: var(--color-sage);
    margin-block-start: 3px;
    flex-shrink: 0;
  }

  
  .spotlight {
    padding-block: var(--space-2xl);
    background: linear-gradient(135deg, var(--color-earth-dark) 0%, var(--color-ink-soft) 100%);
    position: relative;
    overflow: hidden;
  }

  .spotlight-texture {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
  }

  .spotlight-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-inline-size: 700px;
    margin-inline: auto;
  }

  .spotlight-text {
    color: var(--color-earth-pale);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-block: var(--space-md);
    max-inline-size: 560px;
    margin-inline: auto;
  }

  
  .section-industries {
    padding-block: var(--space-2xl);
    background: var(--color-bg-secondary);
  }

  .gallery--industries {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .gallery-tile {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-earth-pale);
    transition: transform var(--transition-mid), box-shadow var(--transition-mid);
  }

  .gallery-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  .gallery-tile-icon {
    font-size: 1.75rem;
    color: var(--color-earth-warm);
    margin-block-end: var(--space-sm);
  }

  .gallery-tile h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: var(--space-xs);
  }

  .gallery-tile p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  .industries-more {
    text-align: center;
    margin-block-start: var(--space-xl);
  }

  
  .section-contact-teaser {
    padding-block: var(--space-2xl);
    background: var(--color-bg-primary);
  }

  .contact-teaser-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
  }

  .contact-teaser-content h2 { margin-block-end: var(--space-sm); }

  .contact-teaser-content p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-block-end: var(--space-md);
  }

  .contact-teaser-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .contact-teaser-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
  }

  .contact-teaser-item i {
    color: var(--color-earth-warm);
    inline-size: 20px;
    flex-shrink: 0;
  }

  .contact-teaser-item a {
    color: var(--color-earth-warm);
    transition: color var(--transition-fast);
  }

  .contact-teaser-item a:hover { color: var(--color-earth-mid); }

  .contact-teaser-img {
    inline-size: 100%;
    block-size: 300px;
    object-fit: cover;
    border-radius: 24px 40px 24px 40px;
    box-shadow: var(--shadow-lg);
  }

  
  .footer-vessel {
    background: var(--color-earth-dark);
    padding-block: var(--space-2xl);
    margin-block-start: auto;
  }

  .footer-inner {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  .footer-logo {
    block-size: 40px;
    inline-size: auto;
    filter: brightness(0) invert(1) opacity(0.85);
  }

  .footer-tagline {
    font-size: 0.875rem;
    color: var(--color-earth-light);
    opacity: 0.8;
    max-inline-size: 360px;
    line-height: 1.5;
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-lg);
  }

  .footer-nav a {
    font-size: 0.875rem;
    color: var(--color-earth-pale);
    opacity: 0.8;
    transition: opacity var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
  }

  .footer-nav a:hover {
    opacity: 1;
    color: var(--color-earth-light);
  }

  .footer-legal-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-md);
    padding-block-start: var(--space-sm);
    border-block-start: 1px solid rgba(255,255,255,0.1);
    inline-size: 100%;
  }

  .footer-legal-nav a {
    font-size: 0.8rem;
    color: var(--color-earth-light);
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    text-decoration: none;
  }

  .footer-legal-nav a:hover { opacity: 1; }

  .footer-copy {
    font-size: 0.8rem;
    color: var(--color-earth-light);
    opacity: 0.5;
  }

  
  .page-hero {
    padding-block-start: calc(var(--nav-height) + var(--space-xl));
    padding-block-end: var(--space-2xl);
    background: linear-gradient(145deg, var(--color-earth-cream) 0%, var(--color-earth-pale) 100%);
    position: relative;
    overflow: hidden;
  }

  .page-hero--alt {
    background: linear-gradient(145deg, var(--color-sage-pale) 0%, var(--color-earth-pale) 100%);
  }

  .page-hero--dark {
    background: linear-gradient(135deg, var(--color-earth-dark) 0%, var(--color-ink-soft) 100%);
  }

  .page-hero-texture {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
  }

  .page-hero-content {
    position: relative;
    z-index: 2;
    max-inline-size: 800px;
  }

  .page-hero-content .heading-xl { margin-block: var(--space-sm); }

  .page-hero-sub {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
    max-inline-size: 620px;
  }

  .page-hero--dark .page-hero-sub,
  .page-hero-sub.light {
    color: var(--color-earth-pale);
    opacity: 0.85;
  }

  
  .section-expertise-intro {
    padding-block: var(--space-2xl);
    background: var(--color-bg-primary);
  }

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

  .expertise-intro-text h2 { margin-block-end: var(--space-sm); }

  .expertise-intro-text p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-block-end: var(--space-sm);
  }

  .expertise-intro-img {
    inline-size: 100%;
    block-size: 360px;
    object-fit: cover;
    border-radius: 24px 40px 24px 40px;
    box-shadow: var(--shadow-lg);
  }

  .section-methodology {
    padding-block: var(--space-2xl);
    background: var(--color-bg-secondary);
  }

  .methodology-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .methodology-block {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-earth-pale);
    transition: transform var(--transition-mid), box-shadow var(--transition-mid);
  }

  .methodology-block:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-card-hover);
  }

  .methodology-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-earth-light);
    flex-shrink: 0;
    line-height: 1;
    min-inline-size: 48px;
  }

  .methodology-content h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: var(--space-xs);
  }

  .methodology-content p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .section-knowledge-map {
    padding-block: var(--space-2xl);
    background: var(--color-bg-primary);
  }

  .knowledge-map-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
  }

  .knowledge-map-content h2 { margin-block-end: var(--space-sm); }

  .knowledge-map-content p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-block-end: var(--space-sm);
  }

  .knowledge-map-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-block-start: var(--space-md);
  }

  .km-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-weight: 600;
  }

  .km-feature i {
    color: var(--color-earth-warm);
    font-size: 1rem;
    flex-shrink: 0;
  }

  .knowledge-map-img {
    inline-size: 100%;
    block-size: 380px;
    object-fit: cover;
    border-radius: 40px 16px 40px 16px;
    box-shadow: var(--shadow-xl);
  }

  
  .section-industries-intro {
    padding-block: var(--space-2xl);
    background: var(--color-bg-primary);
  }

  .industries-intro-text {
    max-inline-size: 800px;
    margin-inline: auto;
    text-align: center;
  }

  .industries-intro-text h2 { margin-block-end: var(--space-sm); }

  .industries-intro-text p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-block-end: var(--space-sm);
  }

  .section-industry-cards {
    padding-block: var(--space-2xl);
    background: var(--color-bg-secondary);
  }

  .industry-card-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
    margin-block-end: var(--space-3xl);
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }

  .industry-card-block:last-child { margin-block-end: 0; }

  .industry-card-img {
    inline-size: 100%;
    block-size: 320px;
    object-fit: cover;
    display: block;
  }

  .industry-card-content {
    padding: var(--space-xl);
  }

  .industry-card-icon {
    font-size: 2rem;
    color: var(--color-earth-warm);
    margin-block-end: var(--space-sm);
  }

  .industry-card-content h3 { margin-block-end: var(--space-sm); }

  .industry-card-content p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-block-end: var(--space-sm);
  }

  .industry-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: var(--space-md);
  }

  .industry-card-tags span {
    background: var(--color-earth-pale);
    color: var(--color-earth-mid);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
  }

  
  .section-cfo-intro {
    padding-block: var(--space-2xl);
    background: var(--color-bg-primary);
  }

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

  .cfo-intro-text h2 { margin-block-end: var(--space-sm); }

  .cfo-intro-text p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-block-end: var(--space-sm);
  }

  .cfo-intro-img {
    inline-size: 100%;
    block-size: 380px;
    object-fit: cover;
    border-radius: 16px 40px 16px 40px;
    box-shadow: var(--shadow-lg);
  }

  .section-cfo-benefits {
    padding-block: var(--space-2xl);
    background: var(--color-bg-secondary);
  }

  .cfo-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .cfo-benefit-card {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-earth-pale);
    transition: transform var(--transition-mid), box-shadow var(--transition-mid);
  }

  .cfo-benefit-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  .cfo-benefit-card--accent {
    background: linear-gradient(145deg, var(--color-earth-warm) 0%, var(--color-earth-mid) 100%);
    border-color: transparent;
  }

  .cfo-benefit-card--accent h4,
  .cfo-benefit-card--accent p { color: var(--color-earth-white); }

  .cfo-benefit-card--accent .cfo-benefit-icon { color: var(--color-earth-light); }

  .cfo-benefit-icon {
    font-size: 1.75rem;
    color: var(--color-earth-warm);
    margin-block-end: var(--space-sm);
  }

  .cfo-benefit-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: var(--space-xs);
  }

  .cfo-benefit-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .section-zigzag--cfo {
    padding-block: var(--space-2xl);
    background: var(--color-bg-primary);
  }

  
  .contact-page-section {
    padding-block-start: var(--nav-height);
    min-block-size: calc(100vh - var(--nav-height));
    background: var(--color-bg-primary);
  }

  .contact-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-block-size: calc(100vh - var(--nav-height));
  }

  .contact-form-side {
    padding: var(--space-xl) var(--space-md);
    background: var(--color-bg-secondary);
  }

  .contact-form-header {
    margin-block-end: var(--space-xl);
  }

  .contact-form-header h1 { margin-block: var(--space-xs) var(--space-sm); }

  .contact-form-header p {
    color: var(--color-text-secondary);
    line-height: 1.7;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-inline-size: 560px;
  }

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

  .form-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.01em;
  }

  .form-input {
    inline-size: 100%;
    padding-block: 14px;
    padding-inline: 16px;
    border: 2px solid var(--color-earth-pale);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-block-size: 44px;
  }

  .form-input:focus {
    outline: none;
    border-color: var(--color-earth-warm);
    box-shadow: 0 0 0 3px rgba(139,108,62,0.12);
  }

  .form-textarea {
    min-block-size: 160px;
    resize: vertical;
  }

  .form-helper {
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }

  .form-field--checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .form-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  .form-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    inline-size: 0;
    block-size: 0;
  }

  .form-checkbox-custom {
    inline-size: 20px;
    block-size: 20px;
    border: 2px solid var(--color-earth-pale);
    border-radius: 6px;
    flex-shrink: 0;
    margin-block-start: 2px;
    transition: all var(--transition-fast);
    background: var(--color-bg-primary);
    position: relative;
  }

  .form-checkbox-label input:checked + .form-checkbox-custom {
    background: var(--color-earth-warm);
    border-color: var(--color-earth-warm);
  }

  .form-checkbox-label input:checked + .form-checkbox-custom::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: white;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
  }

  .form-checkbox-label a {
    color: var(--color-earth-warm);
    text-decoration: underline;
  }

  .contact-info-side {
    padding: var(--space-xl) var(--space-md);
    background: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .contact-info-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: var(--space-md);
  }

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

  .contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .contact-info-icon {
    inline-size: 44px;
    block-size: 44px;
    background: var(--color-clay-pale);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-clay);
    font-size: 1rem;
    flex-shrink: 0;
  }

  .contact-info-item strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-block-end: 4px;
  }

  .contact-info-item p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
  }

  .contact-info-item a {
    color: var(--color-earth-warm);
    transition: color var(--transition-fast);
  }

  .contact-info-item a:hover { color: var(--color-earth-mid); }

  .contact-map {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }

  .contact-team-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }

  .contact-team-img {
    inline-size: 100%;
    block-size: 260px;
    object-fit: cover;
    object-position: top center;
  }

  .contact-team-content {
    padding: var(--space-lg);
  }

  .contact-team-content h3 { margin-block: var(--space-xs) var(--space-sm); }

  .contact-team-content p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-block-end: var(--space-sm);
  }

  
  .thanks-section {
    min-block-size: calc(100vh - var(--nav-height) - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-2xl);
    padding-inline: var(--space-md);
    padding-block-start: calc(var(--nav-height) + var(--space-2xl));
  }

  .thanks-inner {
    text-align: center;
    max-inline-size: 560px;
  }

  .thanks-icon {
    font-size: 4rem;
    color: var(--color-sage);
    margin-block-end: var(--space-lg);
    animation: thanks-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  @keyframes thanks-pop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  .thanks-inner .heading-lg { margin-block-end: var(--space-md); }

  .thanks-text {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-block-end: var(--space-sm);
  }

  .thanks-sub {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-block-end: var(--space-xl);
  }

  .thanks-sub a {
    color: var(--color-earth-warm);
    transition: color var(--transition-fast);
  }

  .thanks-sub a:hover { color: var(--color-earth-mid); }

  
  .legal-page-hero {
    padding-block-start: calc(var(--nav-height) + var(--space-xl));
    padding-block-end: var(--space-xl);
    background: var(--color-bg-secondary);
    border-block-end: 1px solid var(--color-earth-pale);
  }

  .legal-meta {
    margin-block-start: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }

  .legal-body {
    padding-block: var(--space-2xl);
    background: var(--color-bg-primary);
  }

  .legal-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;
  }

  .legal-sidebar { display: none; }

  .legal-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    inset-block-start: calc(var(--nav-height) + var(--space-md));
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
  }

  .legal-sidebar-nav a {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    text-decoration: none;
    line-height: 1.4;
  }

  .legal-sidebar-nav a:hover {
    background: var(--color-earth-pale);
    color: var(--color-earth-warm);
  }

  .legal-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .legal-section {
    scroll-margin-block-start: calc(var(--nav-height) + var(--space-md));
  }

  .legal-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: var(--space-sm);
    padding-block-end: var(--space-xs);
    border-block-end: 2px solid var(--color-earth-pale);
  }

  .legal-section p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-block-end: var(--space-sm);
    font-size: 0.95rem;
  }

  .legal-section ul {
    list-style: disc;
    padding-inline-start: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block-end: var(--space-sm);
  }

  .legal-section ul li {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .legal-section a {
    color: var(--color-earth-warm);
    text-decoration: underline;
    transition: color var(--transition-fast);
  }

  .legal-section a:hover { color: var(--color-earth-mid); }

  .legal-section--cookie {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    border: 1px solid var(--color-earth-pale);
  }

  .cookie-section-icon {
    font-size: 1.5rem;
    color: var(--color-earth-warm);
    margin-block-end: var(--space-sm);
  }

  .cookie-table-wrap {
    overflow-x: auto;
    margin-block-start: var(--space-sm);
    border-radius: var(--radius-md);
  }

  .cookie-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-inline-size: 400px;
  }

  .cookie-table th {
    background: var(--color-earth-pale);
    color: var(--color-text-primary);
    font-weight: 700;
    padding: 10px 14px;
    text-align: start;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .cookie-table td {
    padding: 10px 14px;
    border-block-end: 1px solid var(--color-earth-pale);
    color: var(--color-text-secondary);
    vertical-align: top;
  }

  .cookie-table tr:last-child td { border-block-end: none; }

  
  .cookie-trigger-wrap {
    position: fixed;
    inset-block-end: var(--space-md);
    inset-inline-start: var(--space-md);
    z-index: 800;
  }

  .cookie-trigger-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-earth-pale);
    border-radius: 20px;
    padding: 8px 14px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
  }

  .cookie-trigger-btn:hover {
    color: var(--color-earth-warm);
    border-color: var(--color-earth-warm);
    box-shadow: var(--shadow-md);
  }

  .cookie-trigger-btn.pulse {
    animation: cookie-pulse 1.5s ease-in-out 3;
  }

  @keyframes cookie-pulse {
    0%, 100% { box-shadow: var(--shadow-sm); }
    50% { box-shadow: 0 0 0 4px rgba(139,108,62,0.2), var(--shadow-md); }
  }

  .cookie-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(44,36,22,0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-mid), visibility var(--transition-mid);
  }

  .cookie-modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .cookie-modal {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    max-inline-size: 480px;
    inline-size: 100%;
    position: relative;
    box-shadow: var(--shadow-xl);
    transform: translateY(20px);
    transition: transform var(--transition-mid);
  }

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

  .cookie-modal-close {
    position: absolute;
    inset-block-start: var(--space-sm);
    inset-inline-end: var(--space-sm);
    inline-size: 36px;
    block-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
    font-size: 1rem;
  }

  .cookie-modal-close:hover {
    background: var(--color-earth-pale);
    color: var(--color-text-primary);
  }

  .cookie-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: var(--space-xs);
  }

  .cookie-modal-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-block-end: var(--space-md);
  }

  .cookie-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-block-end: var(--space-lg);
  }

  .cookie-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
  }

  .cookie-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cookie-option-info strong {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text-primary);
  }

  .cookie-option-info span {
    font-size: 0.8rem;
    color: var(--color-text-muted);
  }

  .cookie-toggle--disabled {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-earth-pale);
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
  }

  .cookie-switch {
    position: relative;
    display: inline-block;
    inline-size: 44px;
    block-size: 24px;
    flex-shrink: 0;
  }

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

  .cookie-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--color-earth-pale);
    border-radius: 24px;
    transition: background var(--transition-fast);
    cursor: pointer;
  }

  .cookie-switch-slider::before {
    content: '';
    position: absolute;
    inline-size: 18px;
    block-size: 18px;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    background: white;
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
  }

  .cookie-switch input:checked + .cookie-switch-slider {
    background: var(--color-earth-warm);
  }

  .cookie-switch input:checked + .cookie-switch-slider::before {
    transform: translateX(20px);
  }

  .cookie-modal-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
  }

  
  @media (min-width: 640px) {
    .shelf--how {
      grid-template-columns: 1fr 1fr;
    }

    .shelf-card--how:nth-child(2) {
      grid-column: span 1;
    }

    .gallery--industries {
      grid-template-columns: 1fr 1fr;
    }

    .gallery-tile--wide {
      grid-column: span 2;
    }

    .knowledge-map-features {
      grid-template-columns: 1fr 1fr;
    }

    .cfo-benefits-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 768px) {
    .nav-links {
      display: flex;
    }

    .nav-toggle {
      display: none;
    }

    .stage-inner {
      grid-template-columns: 1fr 1fr;
    }

    .stage-img { block-size: 480px; }

    .intro-grid {
      grid-template-columns: 1fr 1fr;
    }

    .zigzag-block--left {
      grid-template-columns: 1fr 1fr;
    }

    .zigzag-block--right {
      grid-template-columns: 1fr 1fr;
    }

    .zigzag-block--right .zigzag-content {
      order: -1;
    }

    .shelf--how {
      grid-template-columns: repeat(3, 1fr);
    }

    .for-hr-grid {
      grid-template-columns: 1fr 1fr;
    }

    .contact-teaser-grid {
      grid-template-columns: 1fr 1fr;
    }

    .expertise-intro-grid {
      grid-template-columns: 1fr 1fr;
    }

    .knowledge-map-grid {
      grid-template-columns: 1fr 1fr;
    }

    .cfo-intro-grid {
      grid-template-columns: 1fr 1fr;
    }

    .contact-page-grid {
      grid-template-columns: 1fr 1fr;
    }

    .contact-team-block {
      grid-template-columns: 200px 1fr;
    }

    .contact-team-img {
      block-size: 100%;
      min-block-size: 220px;
    }

    .legal-sidebar {
      display: block;
    }

    .legal-layout {
      grid-template-columns: 240px 1fr;
    }

    .industry-card-block {
      grid-template-columns: 1fr 1fr;
    }

    .industry-card-block--reverse .industry-card-visual {
      order: 1;
    }

    .industry-card-img { block-size: 100%; min-block-size: 300px; }
  }

  @media (min-width: 1024px) {
    .stage-inner {
      grid-template-columns: 55% 45%;
    }

    .gallery--industries {
      grid-template-columns: repeat(3, 1fr);
    }

    .gallery-tile--wide {
      grid-column: span 1;
    }

    .gallery-tile:nth-child(2) {
      grid-column: span 2;
    }

    .gallery-tile:nth-child(5) {
      grid-column: span 2;
    }
  }

  @media (min-width: 1200px) {
    .contact-page-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }
}