@layer base, layout, components, utilities;

@layer base {
  :root {
    --ink: #1c1a17;
    --ink-light: #3d3a35;
    --ink-muted: #6b6660;
    --paper: #f5f0e8;
    --paper-warm: #ede8dc;
    --paper-deep: #e4ddd0;
    --accent: #8b5e3c;
    --accent-light: #b07d57;
    --accent-pale: #f0e6d8;
    --white: #fdfaf5;
    --border: #d6cec0;
    --border-light: #e8e2d6;
    --shadow-sm: 0 1px 3px rgba(28,26,23,.06), 0 1px 2px rgba(28,26,23,.04);
    --shadow-md: 0 4px 12px rgba(28,26,23,.08), 0 2px 6px rgba(28,26,23,.05);
    --shadow-lg: 0 12px 32px rgba(28,26,23,.10), 0 4px 12px rgba(28,26,23,.07);
    --shadow-card: 0 2px 8px rgba(28,26,23,.07), 0 0 0 1px rgba(28,26,23,.04);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --nav-h: 68px;
    --font-serif: 'Lora', Georgia, serif;
    --font-sans: 'Inter', system-ui, sans-serif;
    --transition: 220ms cubic-bezier(.4,0,.2,1);
    --transition-slow: 380ms cubic-bezier(.4,0,.2,1);
  }

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

  html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

  body.canvas {
    font-family: var(--font-sans);
    background-color: var(--paper);
    color: var(--ink);
    line-height: 1.65;
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    
  }

  main { flex: 1; padding-block-start: var(--nav-h); }

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

  a { color: inherit; text-decoration: none; }

  ul[role="list"] { list-style: none; }

  h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.2; color: var(--ink); }

  p { color: var(--ink-light); }

  address { font-style: normal; }
}

@layer layout {
  .shelf-inner {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
  }
  .shelf-inner--narrow { max-inline-size: 820px; }
  .shelf-inner--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
  }
  .shelf-inner--reverse { direction: rtl; }
  .shelf-inner--reverse > * { direction: ltr; }
  .shelf-inner--contact {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-xl);
    align-items: start;
  }
  .shelf-inner--cta { max-inline-size: 860px; }
}

@layer components {

  
  .nav-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 900;
    background-color: var(--paper);
    border-block-end: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
    block-size: var(--nav-h);
  }
  .nav-bar.nav-scrolled {
    box-shadow: 0 2px 16px rgba(28,26,23,.10), 0 1px 4px rgba(28,26,23,.06);
  }
  .nav-inner {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
    block-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }
  .nav-brand { display: flex; align-items: center; flex-shrink: 0; }
  .nav-logo { block-size: 32px; inline-size: auto; }
  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    list-style: none;
  }
  .nav-link {
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink-muted);
    padding-block: .4rem;
    padding-inline: .5rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
  }
  .nav-link:hover, .nav-link--active {
    color: var(--ink);
    background: var(--paper-warm);
  }
  .nav-link--active { color: var(--accent); }
  .nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
  }
  .nav-toggle:hover { background: var(--paper-warm); }
  .nav-toggle-line {
    display: block;
    inline-size: 22px;
    block-size: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
  }

  
  .stage-curtain {
    position: fixed;
    inset: 0;
    background: rgba(28,26,23,.45);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
    backdrop-filter: blur(2px);
  }
  .stage-curtain.is-visible {
    opacity: 1;
    pointer-events: all;
  }
  .drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 80%;
    max-inline-size: 340px;
    background: var(--white);
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  .drawer.is-open { transform: translateX(0); }
  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-block-end: 1px solid var(--border-light);
  }
  .drawer-logo { block-size: 28px; inline-size: auto; }
  .drawer-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--ink-muted);
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    min-block-size: 44px;
    min-inline-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .drawer-close:hover { color: var(--ink); background: var(--paper-warm); }
  .drawer-nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    gap: .25rem;
    flex: 1;
  }
  .drawer-link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink-light);
    padding: .75rem var(--space-sm);
    border-radius: var(--radius-md);
    transition: color var(--transition), background var(--transition), transform var(--transition);
    opacity: 0;
    transform: translateX(-16px);
    min-block-size: 44px;
    display: flex;
    align-items: center;
  }
  .drawer.is-open .drawer-link {
    opacity: 1;
    transform: translateX(0);
  }
  .drawer.is-open .drawer-link:nth-child(1) { transition-delay: 60ms; }
  .drawer.is-open .drawer-link:nth-child(2) { transition-delay: 110ms; }
  .drawer.is-open .drawer-link:nth-child(3) { transition-delay: 160ms; }
  .drawer.is-open .drawer-link:nth-child(4) { transition-delay: 210ms; }
  .drawer.is-open .drawer-link:nth-child(5) { transition-delay: 260ms; }
  .drawer-link:hover { color: var(--accent); background: var(--accent-pale); }
  .drawer-footer {
    padding: var(--space-md);
    border-block-start: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }
  .drawer-contact {
    font-size: .875rem;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: color var(--transition);
    min-block-size: 44px;
  }
  .drawer-contact:hover { color: var(--accent); }

  
  .stage {
    min-block-size: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-2xl) var(--space-xl);
    background: var(--paper);
    position: relative;
    overflow: hidden;
  }
  .stage::before {
    content: '';
    position: absolute;
    inset-block-start: -10%;
    inset-inline-end: -5%;
    inline-size: 55%;
    block-size: 110%;
    background: radial-gradient(ellipse at 70% 30%, var(--accent-pale) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  .stage-content {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    position: relative;
    z-index: 1;
    inline-size: 100%;
  }
  .stage-eyebrow {
    font-family: var(--font-sans);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--space-sm);
  }
  .stage-headline {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    margin-block-end: var(--space-md);
  }
  .stage-typed-wrapper { display: block; }
  .stage-typed-accent {
    color: var(--accent);
    border-block-end: 2px solid var(--accent);
  }
  .stage-subline {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink-light);
    max-inline-size: 500px;
    margin-block-end: var(--space-lg);
  }
  .stage-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
  }
  .stage-visual { position: relative; }
  .stage-img-frame {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .stage-img {
    inline-size: 100%;
    block-size: 460px;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .stage-img-badge {
    position: absolute;
    inset-block-end: var(--space-md);
    inset-inline-start: var(--space-md);
    background: var(--white);
    border-radius: var(--radius-md);
    padding: .6rem var(--space-sm);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
  }
  .stage-img-badge i { color: var(--accent); font-size: 1rem; }
  .stage-scroll-hint {
    position: absolute;
    inset-block-end: var(--space-md);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .stage-scroll-hint span {
    display: block;
    inline-size: 1px;
    block-size: 48px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
  }
  @keyframes scrollPulse {
    0%, 100% { opacity: .4; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.1); }
  }

  
  .btn-spotlight {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--ink);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    min-block-size: 44px;
  }
  .btn-spotlight:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
  .btn-spotlight--dark {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
  }
  .btn-spotlight--dark:hover {
    background: var(--ink);
    border-color: var(--ink);
  }
  .btn-spotlight--full { inline-size: 100%; justify-content: center; }
  .btn-spotlight--sm {
    font-size: .82rem;
    padding: .6rem 1.1rem;
  }
  .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
    min-block-size: 44px;
  }
  .btn-outline:hover {
    border-color: var(--ink);
    background: var(--paper-warm);
    transform: translateY(-1px);
  }
  .btn-outline--light {
    color: var(--paper);
    border-color: rgba(245,240,232,.4);
  }
  .btn-outline--light:hover {
    background: rgba(245,240,232,.15);
    border-color: var(--paper);
    color: var(--paper);
  }

  
  .shelf {
    padding-block: var(--space-2xl);
  }
  .shelf--intro { padding-block-start: var(--space-xl); }
  .shelf-lead {
    margin-block-end: var(--space-xl);
    max-inline-size: 600px;
  }
  .shelf-lead--center { text-align: center; margin-inline: auto; }
  .shelf-title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--ink);
    margin-block-end: var(--space-sm);
    line-height: 1.2;
  }
  .shelf-desc {
    font-size: 1rem;
    color: var(--ink-light);
    line-height: 1.7;
  }

  
  .gallery--services {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-md);
  }
  .gallery--types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
  .gallery--scope {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  .gallery--features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  
  .spotlight {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    display: flex;
    flex-direction: column;
  }
  .spotlight:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
  }
  .spotlight--lg { grid-row: span 2; }
  .spotlight-img-wrap { overflow: hidden; }
  .spotlight-img {
    inline-size: 100%;
    block-size: 260px;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }
  .spotlight:hover .spotlight-img { transform: scale(1.03); }
  .spotlight-body { padding: var(--space-md); flex: 1; display: flex; flex-direction: column; }
  .spotlight--sm .spotlight-body { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .spotlight-icon-wrap {
    padding: var(--space-md) var(--space-md) 0;
    font-size: 1.6rem;
    color: var(--accent);
  }
  .spotlight-tag {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: .5rem;
  }
  .spotlight-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    margin-block-end: .75rem;
    color: var(--ink);
  }
  .spotlight--lg .spotlight-title { font-size: 1.4rem; }
  .spotlight-text {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--ink-light);
    flex: 1;
  }
  .spotlight-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-block-start: var(--space-sm);
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent);
    transition: gap var(--transition), color var(--transition);
  }
  .spotlight-link:hover { gap: .7rem; color: var(--ink); }

  
  .shelf--process { background: var(--paper-warm); position: relative; overflow: hidden; }
  .workflow-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
  }
  .workflow-track::before {
    content: '';
    position: absolute;
    inset-block-start: 28px;
    inset-inline: 0;
    block-size: 2px;
    background: linear-gradient(to right, var(--accent) 0%, var(--border) 100%);
    z-index: 0;
  }
  .workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--space-sm);
    position: relative;
    z-index: 1;
  }
  .workflow-node {
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--space-md);
    box-shadow: 0 0 0 6px var(--paper-warm);
    flex-shrink: 0;
  }
  .workflow-num {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
  }
  .workflow-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-block-end: .5rem;
  }
  .workflow-text {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--ink-muted);
  }

  
  .deco-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
  .deco-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--border);
    opacity: .5;
  }
  .deco-circle--1 {
    inline-size: 300px;
    block-size: 300px;
    inset-inline-start: -80px;
    inset-block-end: -60px;
  }
  .deco-circle--2 {
    inline-size: 180px;
    block-size: 180px;
    inset-inline-end: 10%;
    inset-block-start: -40px;
    background: var(--accent-pale);
    opacity: .3;
  }
  .deco-line--1 {
    position: absolute;
    inset-inline-end: 5%;
    inset-block: 20%;
    inline-size: 1px;
    background: linear-gradient(to bottom, transparent, var(--border), transparent);
  }

  
  .type-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    display: flex;
    flex-direction: column;
  }
  .type-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
  .type-card-img {
    inline-size: 100%;
    block-size: 200px;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }
  .type-card:hover .type-card-img { transform: scale(1.04); }
  .type-card-body { padding: var(--space-md); flex: 1; display: flex; flex-direction: column; }
  .type-card-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    margin-block-end: .6rem;
    color: var(--ink);
  }
  .type-card-text {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--ink-light);
    flex: 1;
  }
  .type-card-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-block-start: var(--space-sm);
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent);
    transition: gap var(--transition);
  }
  .type-card-link:hover { gap: .7rem; }

  
  .coordinator-img {
    inline-size: 100%;
    block-size: 480px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }
  .coordinator-text { padding-block: var(--space-md); }
  .coordinator-body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink-light);
    margin-block-end: var(--space-sm);
  }
  .coordinator-text .shelf-title { margin-block-end: var(--space-md); }
  .coordinator-text .btn-spotlight { margin-block-start: var(--space-md); }

  
  .shelf--coverage { background: var(--paper-deep); }
  .coverage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
  }
  .coverage-item {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: .75rem var(--space-sm);
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-light);
    display: flex;
    align-items: center;
    gap: .5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
  }
  .coverage-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .coverage-item i { color: var(--accent); font-size: .9rem; }

  
  .shelf--cta { background: var(--ink); }
  .cta-block { text-align: center; padding-block: var(--space-xl); }
  .cta-title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--paper);
    margin-block-end: var(--space-sm);
  }
  .cta-sub {
    font-size: 1rem;
    color: rgba(245,240,232,.7);
    margin-block-end: var(--space-lg);
  }
  .cta-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
  }

  
  .page-hero {
    padding-block: var(--space-2xl) var(--space-xl);
    background: var(--paper-warm);
    border-block-end: 1px solid var(--border-light);
  }
  .page-hero--legal { padding-block-end: var(--space-lg); }
  .page-hero-inner {
    max-inline-size: 820px;
    margin-inline: auto;
    padding-inline: var(--space-md);
  }
  .page-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--ink);
    margin-block-end: var(--space-sm);
  }
  .page-hero-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink-light);
    max-inline-size: 640px;
  }
  .legal-updated {
    font-size: .85rem;
    color: var(--ink-muted);
    margin-block-start: .5rem;
  }

  
  .shelf--principles { background: var(--paper); }
  .principle-block {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
    border-block-end: 1px solid var(--border-light);
    align-items: start;
  }
  .principle-block:last-child { border-block-end: none; }
  .principle-num {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-pale);
    line-height: 1;
    padding-block-start: .2rem;
    user-select: none;
  }
  .principle-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink);
    margin-block-end: var(--space-sm);
  }
  .principle-text {
    font-size: .95rem;
    line-height: 1.75;
    color: var(--ink-light);
    margin-block-end: .75rem;
  }

  
  .scope-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition), transform var(--transition);
  }
  .scope-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .scope-icon {
    inline-size: 44px;
    block-size: 44px;
    background: var(--accent-pale);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.1rem;
    margin-block-end: var(--space-sm);
  }
  .scope-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-block-end: .5rem;
  }
  .scope-text { font-size: .875rem; line-height: 1.65; color: var(--ink-light); }

  
  .equipment-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-block: var(--space-md);
  }
  .equipment-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .95rem;
    color: var(--ink-light);
  }
  .equipment-list li i { color: var(--accent); font-size: .9rem; margin-block-start: .15rem; flex-shrink: 0; }

  
  .shelf--faq { background: var(--paper-warm); }
  .faq-list { display: flex; flex-direction: column; gap: .75rem; }
  .faq-item {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
  }
  .faq-item:hover { box-shadow: var(--shadow-md); }
  .faq-question {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    padding: var(--space-md);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-block-size: 56px;
    transition: color var(--transition);
  }
  .faq-question::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .8rem;
    color: var(--accent);
    transition: transform var(--transition);
    flex-shrink: 0;
  }
  details[open] .faq-question::after { transform: rotate(180deg); }
  details[open] .faq-question { color: var(--accent); }
  .faq-answer {
    padding: 0 var(--space-md) var(--space-md);
  }
  .faq-answer p { font-size: .9rem; line-height: 1.7; color: var(--ink-light); }

  
  .feature-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition), transform var(--transition);
  }
  .feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .feature-icon-wrap {
    inline-size: 48px;
    block-size: 48px;
    background: var(--accent-pale);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.2rem;
    margin-block-end: var(--space-sm);
  }
  .feature-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    margin-block-end: .5rem;
  }
  .feature-text { font-size: .875rem; line-height: 1.65; color: var(--ink-light); }

  
  .shelf--contact-main { background: var(--paper); }
  .contact-info-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
    margin-block-end: var(--space-md);
  }
  .contact-address-full { display: flex; flex-direction: column; gap: var(--space-md); }
  .contact-detail { display: flex; gap: var(--space-sm); align-items: flex-start; }
  .contact-detail-icon {
    inline-size: 40px;
    block-size: 40px;
    background: var(--accent-pale);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
    margin-block-start: .1rem;
  }
  .contact-detail strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin-block-end: .2rem; }
  .contact-detail p { font-size: .95rem; color: var(--ink-light); margin: 0; }
  .contact-detail-link { color: var(--ink-light); transition: color var(--transition); }
  .contact-detail-link:hover { color: var(--accent); }
  .consultation-block {
    margin-block-start: var(--space-xl);
    background: var(--paper-warm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
  }
  .consultation-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin-block-end: .75rem;
  }
  .consultation-text { font-size: .9rem; line-height: 1.7; color: var(--ink-light); margin-block-end: .75rem; }
  .contact-form-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
    margin-block-end: var(--space-md);
  }

  
  .contact-form { display: flex; flex-direction: column; gap: var(--space-md); }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
  .form-group { display: flex; flex-direction: column; gap: .4rem; }
  .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-light);
    letter-spacing: .02em;
  }
  .form-required { color: var(--accent); }
  .form-input, .form-textarea {
    font-family: var(--font-sans);
    font-size: .95rem;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: .7rem .9rem;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    outline: none;
    inline-size: 100%;
  }
  .form-input:focus, .form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(139,94,60,.12);
    background: var(--white);
  }
  .form-input::placeholder, .form-textarea::placeholder { color: var(--ink-muted); }
  .form-textarea { resize: vertical; min-block-size: 140px; }
  .form-group--checkbox { flex-direction: row; align-items: flex-start; gap: .6rem; }
  .form-checkbox-label { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
  .form-checkbox {
    inline-size: 18px;
    block-size: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
    margin-block-start: .15rem;
    cursor: pointer;
  }
  .form-checkbox-text { font-size: .875rem; line-height: 1.5; color: var(--ink-light); }
  .form-link { color: var(--accent); text-decoration: underline; transition: color var(--transition); }
  .form-link:hover { color: var(--ink); }
  .form-error { font-size: .875rem; color: #c0392b; background: #fdf0ef; border: 1px solid #e8c4c0; border-radius: var(--radius-sm); padding: .6rem .9rem; display: none; }
  .form-error.is-visible { display: block; }

  
  .shelf--map { padding-block-start: 0; padding-block-end: var(--space-2xl); }
  .map-wrap {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
  }

  
  .shelf--legal { background: var(--paper); }
  .legal-timeline { position: relative; }
  .legal-timeline::before {
    content: '';
    position: absolute;
    inset-inline-start: 18px;
    inset-block: 0;
    inline-size: 2px;
    background: linear-gradient(to bottom, var(--accent), var(--border-light));
  }
  .legal-node { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-md); padding-block-end: var(--space-xl); align-items: start; }
  .legal-node:last-child { padding-block-end: 0; }
  .legal-node-marker {
    inline-size: 16px;
    block-size: 16px;
    background: var(--accent);
    border-radius: 50%;
    margin-block-start: .4rem;
    margin-inline-start: 10px;
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent-pale);
    flex-shrink: 0;
  }
  .legal-node-content { padding-block-end: var(--space-md); }
  .legal-heading {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    margin-block-end: var(--space-sm);
  }
  .legal-node-content p { font-size: .9rem; line-height: 1.75; color: var(--ink-light); margin-block-end: .75rem; }
  .legal-node-content p:last-child { margin-block-end: 0; }
  .legal-node-content strong { color: var(--ink); }

  
  .legal-accordion { display: flex; flex-direction: column; gap: var(--space-lg); }
  .legal-section-block {
    padding-block-end: var(--space-lg);
    border-block-end: 1px solid var(--border-light);
  }
  .legal-section-block:last-child { border-block-end: none; padding-block-end: 0; }
  .legal-section-letter {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    margin-block-end: var(--space-sm);
  }
  .legal-section-block p { font-size: .9rem; line-height: 1.75; color: var(--ink-light); margin-block-end: .75rem; }
  .legal-section-block p:last-child { margin-block-end: 0; }
  .legal-section-block strong { color: var(--ink); }

  
  .cookies-doc { display: flex; flex-direction: column; gap: var(--space-xl); }
  .cookies-intro-block {
    background: var(--accent-pale);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    border-inline-start: 3px solid var(--accent);
  }
  .cookies-lead { font-size: .95rem; line-height: 1.75; color: var(--ink-light); }
  .cookies-category-block { border-block-end: 1px solid var(--border-light); padding-block-end: var(--space-lg); }
  .cookies-category-block:last-child { border-block-end: none; padding-block-end: 0; }
  .cookies-heading {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    margin-block-end: var(--space-sm);
  }
  .cookies-category-block p { font-size: .9rem; line-height: 1.75; color: var(--ink-light); margin-block-end: .75rem; }
  .cookies-cat-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-block-end: var(--space-sm);
    box-shadow: var(--shadow-sm);
  }
  .cookies-cat-header { display: flex; align-items: center; gap: var(--space-sm); margin-block-end: .75rem; }
  .cookies-cat-badge {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .6rem;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--paper);
  }
  .cookies-cat-badge--necessary { background: var(--accent); }
  .cookies-cat-always { font-size: .78rem; color: var(--accent); font-weight: 600; }
  .cookies-cat-optional { font-size: .78rem; color: var(--ink-muted); font-weight: 500; }
  .cookies-cat-card p { font-size: .875rem; line-height: 1.65; color: var(--ink-light); margin: 0 0 .75rem; }
  .cookies-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    margin-block-start: .5rem;
  }
  .cookies-table th {
    text-align: start;
    padding: .5rem .75rem;
    background: var(--paper-warm);
    color: var(--ink-muted);
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-block-end: 1px solid var(--border);
  }
  .cookies-table td {
    padding: .5rem .75rem;
    border-block-end: 1px solid var(--border-light);
    color: var(--ink-light);
  }
  .cookies-table tr:last-child td { border-block-end: none; }
  .cookies-table code { font-family: monospace; font-size: .8rem; background: var(--paper-warm); padding: .1rem .3rem; border-radius: 3px; color: var(--ink); }
  .legal-inline-link { color: var(--accent); text-decoration: underline; transition: color var(--transition); }
  .legal-inline-link:hover { color: var(--ink); }

  
  .thanks-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-2xl);
    min-block-size: calc(100vh - var(--nav-h) - 200px);
  }
  .thanks-container {
    max-inline-size: 680px;
    margin-inline: auto;
    padding-inline: var(--space-md);
    text-align: center;
  }
  .thanks-icon { font-size: 3.5rem; color: var(--accent); margin-block-end: var(--space-md); }
  .thanks-title {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--ink);
    margin-block-end: var(--space-sm);
  }
  .thanks-sub { font-size: 1rem; line-height: 1.7; color: var(--ink-light); margin-block-end: var(--space-xl); }
  .thanks-link { color: var(--accent); text-decoration: underline; }
  .thanks-next {
    background: var(--paper-warm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin-block-end: var(--space-xl);
    text-align: start;
  }
  .thanks-next-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    margin-block-end: var(--space-md);
  }
  .thanks-steps { display: flex; flex-direction: column; gap: var(--space-md); }
  .thanks-step { display: flex; gap: var(--space-sm); align-items: flex-start; }
  .thanks-step-num {
    inline-size: 32px;
    block-size: 32px;
    background: var(--accent);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    flex-shrink: 0;
  }
  .thanks-step-text { font-size: .9rem; line-height: 1.65; color: var(--ink-light); padding-block-start: .35rem; }
  .thanks-step-text strong { color: var(--ink); }

  
  .canvas-footer {
    background: var(--ink);
    padding-block-start: var(--space-xl);
    margin-block-start: auto;
  }
  .footer-inner {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-md);
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--space-lg);
    padding-block-end: var(--space-xl);
  }
  .footer-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
  }
  .footer-card-title {
    font-family: var(--font-serif);
    font-size: .9rem;
    font-weight: 600;
    color: var(--paper);
    margin-block-end: var(--space-sm);
    letter-spacing: .03em;
  }
  .footer-logo { block-size: 32px; inline-size: auto; filter: brightness(1.8); margin-block-end: var(--space-sm); }
  .footer-about-text { font-size: .875rem; line-height: 1.65; color: rgba(245,240,232,.6); }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
  .footer-link {
    font-size: .875rem;
    color: rgba(245,240,232,.6);
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: color var(--transition);
    min-block-size: 32px;
  }
  .footer-link:hover { color: var(--paper); }
  .footer-address { display: flex; flex-direction: column; gap: .5rem; }
  .footer-address p { font-size: .875rem; color: rgba(245,240,232,.6); display: flex; gap: .4rem; align-items: flex-start; }
  .footer-address i { color: var(--accent-light); font-size: .85rem; margin-block-start: .15rem; flex-shrink: 0; }
  .footer-bottom {
    border-block-start: 1px solid rgba(255,255,255,.08);
    padding-block: var(--space-md);
    text-align: center;
  }
  .footer-copy { font-size: .8rem; color: rgba(245,240,232,.35); }

  
  .rxqk-cookie-card {
    position: fixed;
    inset-block-end: auto;
    inset-block-start: var(--space-md);
    inset-inline-start: var(--space-md);
    z-index: 9999;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-md);
    max-inline-size: 300px;
    transform: translateX(calc(-100% - var(--space-md)));
    transition: transform var(--transition-slow);
    opacity: 0;
  }
  .rxqk-cookie-card.is-visible {
    transform: translateX(0);
    opacity: 1;
  }
  .rxqk-cookie-card-header { display: flex; align-items: center; gap: .5rem; margin-block-end: .6rem; }
  .rxqk-cookie-card-header i { color: var(--accent); font-size: 1.1rem; }
  .rxqk-cookie-card-header span { font-size: .875rem; font-weight: 700; color: var(--ink); }
  .rxqk-cookie-card p { font-size: .8rem; line-height: 1.5; color: var(--ink-muted); margin-block-end: .75rem; }
  .rxqk-cookie-card p a { color: var(--accent); text-decoration: underline; }
  .rxqk-cookie-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
  .rxqk-cookie-btn {
    font-family: var(--font-sans);
    font-size: .78rem;
    font-weight: 600;
    padding: .45rem .85rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--ink-light);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    min-block-size: 36px;
  }
  .rxqk-cookie-btn:hover { background: var(--paper-warm); border-color: var(--ink-muted); color: var(--ink); }
  .rxqk-cookie-btn--accept {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .rxqk-cookie-btn--accept:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

  
  .rxqk-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28,26,23,.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
    backdrop-filter: blur(3px);
  }
  .rxqk-modal-overlay.is-open { opacity: 1; pointer-events: all; }
  .rxqk-modal {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg);
    max-inline-size: 520px;
    inline-size: 100%;
    max-block-size: 90vh;
    overflow-y: auto;
  }
  .rxqk-modal h2 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink); margin-block-end: .5rem; }
  .rxqk-modal p { font-size: .875rem; color: var(--ink-muted); margin-block-end: var(--space-md); }
  .rxqk-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: .75rem;
    border-block-end: 1px solid var(--border-light);
    gap: var(--space-sm);
  }
  .rxqk-cat-row:last-of-type { border-block-end: none; }
  .rxqk-cat-info strong { font-size: .875rem; color: var(--ink); display: block; margin-block-end: .2rem; }
  .rxqk-cat-info span { font-size: .8rem; color: var(--ink-muted); }
  .rxqk-toggle {
    position: relative;
    inline-size: 44px;
    block-size: 24px;
    flex-shrink: 0;
  }
  .rxqk-toggle input { opacity: 0; inline-size: 0; block-size: 0; }
  .rxqk-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--transition);
  }
  .rxqk-toggle-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);
    box-shadow: var(--shadow-sm);
  }
  .rxqk-toggle input:checked + .rxqk-toggle-slider { background: var(--accent); }
  .rxqk-toggle input:checked + .rxqk-toggle-slider::before { transform: translateX(20px); }
  .rxqk-toggle input:disabled + .rxqk-toggle-slider { opacity: .5; cursor: not-allowed; }
  .rxqk-modal-actions { display: flex; gap: .75rem; margin-block-start: var(--space-md); flex-wrap: wrap; }
  .rxqk-modal-btn {
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 600;
    padding: .6rem 1.2rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--ink-light);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    min-block-size: 44px;
  }
  .rxqk-modal-btn:hover { background: var(--paper-warm); border-color: var(--ink-muted); color: var(--ink); }
  .rxqk-modal-btn--save {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .rxqk-modal-btn--save:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

}

@layer utilities {
  @media (max-width: 1024px) {
    .gallery--services {
      grid-template-columns: 1fr 1fr;
    }
    .spotlight--lg { grid-column: span 2; }
    .workflow-track {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md);
    }
    .workflow-track::before { display: none; }
    .workflow-step { align-items: flex-start; text-align: start; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .coverage-grid { grid-template-columns: repeat(4, 1fr); }
  }

  @media (max-width: 768px) {
    :root { --space-xl: 3rem; --space-2xl: 4rem; }

    .nav-links { display: none; }
    .nav-toggle { display: flex; }

    .stage-content {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
    .stage-visual { order: -1; }
    .stage-img { block-size: 280px; }
    .stage-headline { font-size: clamp(2rem, 7vw, 2.8rem); }
    .stage { padding-block: var(--space-xl) var(--space-lg); min-block-size: auto; }
    .stage-scroll-hint { display: none; }

    .gallery--services { grid-template-columns: 1fr; }
    .spotlight--lg { grid-row: auto; grid-column: auto; }
    .gallery--types { grid-template-columns: 1fr; }
    .gallery--scope { grid-template-columns: 1fr; }
    .gallery--features { grid-template-columns: 1fr; }

    .shelf-inner--split {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
    .shelf-inner--reverse { direction: ltr; }
    .coordinator-img { block-size: 280px; }

    .shelf-inner--contact {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
    }

    .form-row { grid-template-columns: 1fr; }

    .coverage-grid { grid-template-columns: repeat(2, 1fr); }

    .workflow-track { grid-template-columns: 1fr; }

    .footer-inner { grid-template-columns: 1fr; gap: var(--space-md); }

    .principle-block { grid-template-columns: 1fr; gap: var(--space-sm); }
    .principle-num { font-size: 1.5rem; }

    .cta-actions { flex-direction: column; align-items: center; }

    .legal-timeline::before { inset-inline-start: 14px; }
    .legal-node { grid-template-columns: 32px 1fr; }
    .legal-node-marker { margin-inline-start: 6px; }
  }

  @media (max-width: 480px) {
    .coverage-grid { grid-template-columns: 1fr 1fr; }
    .stage-actions { flex-direction: column; align-items: flex-start; }
    .rxqk-cookie-card { max-inline-size: calc(100vw - 2 * var(--space-md)); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }
}