@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

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

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

@layer tokens {
  :root {
    --color-bg: #faf8f3;
    --color-bg-alt: #f1ece2;
    --color-bg-dark: #1c211d;
    --color-ink: #2a2622;
    --color-ink-soft: #5c564d;
    --color-ink-faint: #948d80;
    --color-primary: #33413a;
    --color-primary-dark: #1e2822;
    --color-secondary: #6b7a6f;
    --color-accent: #c1622d;
    --color-accent-dark: #9c4d21;
    --color-accent-soft: #f0d9c4;
    --color-line: rgba(42,38,34,0.10);
    --color-line-strong: rgba(42,38,34,0.16);
    --color-cream-card: #fffdf9;

    --gradient-hero: linear-gradient(135deg, #1c211d 0%, #2c3830 38%, #6f4b30 70%, #c1622d 100%);
    --gradient-accent: linear-gradient(120deg, #c1622d 0%, #d99a53 100%);
    --gradient-dark: linear-gradient(160deg, #1c211d 0%, #33413a 100%);

    --shadow-sm: 0 1px 2px rgba(30,25,15,0.07), 0 1px 1px rgba(30,25,15,0.05);
    --shadow-md: 0 6px 14px rgba(30,25,15,0.09), 0 2px 5px rgba(30,25,15,0.07);
    --shadow-lg: 0 24px 46px -16px rgba(28,24,17,0.22), 0 10px 18px -10px rgba(28,24,17,0.14);
    --shadow-float: 0 34px 64px -22px rgba(24,20,14,0.30), 0 12px 22px -10px rgba(24,20,14,0.18);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    --font-head: 'Gabarito', sans-serif;
    --font-body: 'Inter', sans-serif;

    --space-section: clamp(4rem, 8vw, 8rem);
    --content-width: 1220px;

    --ease: cubic-bezier(0.22, 0.9, 0.32, 1);
  }
}

@layer layout {
  body {
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-bg);
    line-height: 1.65;
    font-size: 1rem;
  }
  main { display: block; }
  h1, h2, h3, h4 { font-family: var(--font-head); color: var(--color-ink); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
  p { color: var(--color-ink-soft); }

  .content-block {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-section) clamp(1.25rem, 4vw, 2.5rem);
  }
}

@layer components {

  
  .site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(250, 248, 243, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: padding 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  }
  .header-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem clamp(1.25rem, 4vw, 2.5rem);
    transition: padding 0.4s var(--ease);
  }
  .site-header.nav-compact {
    background: rgba(250, 248, 243, 0.92);
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--color-line);
  }
  .site-header.nav-compact .header-inner { padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem); }
  .site-header.nav-compact .brand-logo { height: 30px; }

  .brand-mark { display: flex; align-items: center; gap: 0.65rem; }
  .brand-logo { height: 42px; width: auto; transition: height 0.4s var(--ease); }
  .brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }

  .primary-nav { display: flex; gap: 2.1rem; }
  .nav-link {
    font-size: 0.95rem; font-weight: 500; color: var(--color-ink-soft);
    position: relative; padding: 0.35rem 0; transition: color 0.3s var(--ease);
  }
  .nav-link::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
    background: var(--color-accent); transition: width 0.35s var(--ease);
  }
  .nav-link:hover, .nav-link.is-active { color: var(--color-ink); }
  .nav-link:hover::after, .nav-link.is-active::after { width: 100%; }

  .menu-trigger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; }
  .menu-trigger-bar { width: 22px; height: 2px; background: var(--color-ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
  .menu-trigger.is-active .menu-trigger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-trigger.is-active .menu-trigger-bar:nth-child(2) { opacity: 0; }
  .menu-trigger.is-active .menu-trigger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  
  .mobile-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: var(--gradient-hero);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
    padding: 1.6rem clamp(1.25rem, 6vw, 3rem);
  }
  .mobile-overlay.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-overlay-top { display: flex; align-items: center; justify-content: space-between; }
  .mobile-overlay .brand-logo { height: 34px; filter: brightness(0) invert(1); }
  .overlay-close { width: 44px; height: 44px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; background: rgba(255,255,255,0.08); transition: background 0.3s var(--ease); }
  .overlay-close:hover { background: rgba(255,255,255,0.18); }

  .mobile-grid {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    align-content: center; margin-top: 2rem;
  }
  .mobile-grid-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
    padding: 2.4rem 1rem; border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1rem;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .mobile-grid-item i { font-size: 1.5rem; color: var(--color-accent-soft); }
  .mobile-grid-item:hover { background: rgba(255,255,255,0.14); transform: translateY(-3px); }

  
  .hero-section {
    position: relative;
    background: var(--gradient-hero);
    padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 3rem) clamp(9rem, 14vw, 12rem);
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    color: #fff;
    overflow: visible;
  }
  .hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
  .hero-eyebrow {
    display: inline-block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-accent-soft); margin-bottom: 1.2rem;
  }
  .hero-heading {
    font-size: clamp(2.2rem, 5.6vw, 3.6rem); color: #fff; margin-bottom: 1.4rem;
  }
  .hero-lede { font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255,255,255,0.82); max-width: 640px; margin: 0 auto 2.2rem; }
  .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

  .hero-float-card {
    max-width: 620px; margin: 1.5rem auto 0; position: relative; z-index: 20;
    background: var(--color-cream-card); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float); padding: clamp(1.6rem, 3.5vw, 2.4rem);
    border: 1px solid var(--color-line);
  }
  .hero-float-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.3rem; }
  .hero-float-icon {
    width: 52px; height: 52px; border-radius: var(--radius-md); flex-shrink: 0;
    background: var(--gradient-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    box-shadow: var(--shadow-md);
  }
  .hero-float-title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
  .hero-float-sub { font-size: 0.9rem; color: var(--color-ink-faint); }
  .hero-float-list { display: grid; gap: 0.75rem; }
  .hero-float-list li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; color: var(--color-ink-soft); }
  .hero-float-list i { color: var(--color-accent); }

  
  .primary-action, .secondary-action {
    display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.95rem;
    padding: 0.95rem 1.7rem; border-radius: var(--radius-pill);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
    min-height: 44px;
  }
  .primary-action {
    background: var(--gradient-accent); color: #fff; box-shadow: var(--shadow-md);
  }
  .primary-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .primary-action.inverted { background: #fff; color: var(--color-accent-dark); }
  .primary-action.inverted:hover { background: var(--color-accent-soft); }
  .primary-action.full-width { width: 100%; justify-content: center; }
  .secondary-action {
    background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.35);
  }
  .secondary-action:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }

  .text-link {
    display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--color-accent-dark);
    border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), gap 0.3s var(--ease);
  }
  .text-link:hover { border-color: var(--color-accent-dark); gap: 0.75rem; }
  .text-link.small { font-size: 0.85rem; margin-top: 0.5rem; }

  
  .rhythm-strip {
    height: 14px; width: 100%;
    background: repeating-linear-gradient(-45deg, var(--color-accent) 0 12px, var(--color-accent-soft) 12px 24px);
    opacity: 0.55;
  }
  .rhythm-strip.alt {
    background: repeating-linear-gradient(45deg, var(--color-primary) 0 12px, var(--color-secondary) 12px 24px);
    opacity: 0.4;
  }

  
  .section-eyebrow {
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-accent-dark); margin-bottom: 0.8rem;
  }
  .section-eyebrow.on-dark { color: var(--color-accent-soft); }
  .section-heading { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 1.1rem; }
  .section-heading.small { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
  .section-heading.on-dark { color: #fff; }
  .section-lede { max-width: 660px; margin: 0 auto 2.5rem; font-size: 1.05rem; }
  .center-text { text-align: center; margin-left: auto; margin-right: auto; }

  
  .intro-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .intro-text p { margin-bottom: 1.1rem; }
  .intro-image img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4/5; object-fit: cover; }

  
  .module-section { padding-top: 0; }
  .module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 1rem; }
  .surface-card {
    background: var(--color-cream-card); border-radius: var(--radius-lg); padding: 2rem;
    border: 1px solid var(--color-line); box-shadow: var(--shadow-md);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  }
  .surface-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-line-strong); }
  .surface-card-icon {
    width: 50px; height: 50px; border-radius: var(--radius-md); background: var(--color-bg-alt);
    display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 1.2rem;
    margin-bottom: 1.2rem;
  }
  .surface-card-tag { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 0.4rem; }
  .surface-card-title { font-size: 1.2rem; margin-bottom: 0.7rem; }
  .surface-card-text { font-size: 0.95rem; margin-bottom: 1.2rem; }
  .surface-card-meta { font-size: 0.85rem; color: var(--color-ink-faint); display: inline-flex; align-items: center; gap: 0.5rem; }
  .surface-card.wide { grid-column: span 1; }

  
  .process-section {
    background: var(--gradient-dark); padding: var(--space-section) clamp(1.25rem, 4vw, 2.5rem);
  }
  .flow-grid {
    max-width: var(--content-width); margin: 3rem auto 0; display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem; position: relative;
  }
  .flow-grid::before {
    content: ''; position: absolute; top: 70px; left: 8%; right: 8%; height: 1px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 8px, transparent 8px 16px);
    z-index: 0;
  }
  .flow-step { position: relative; z-index: 1; text-align: center; padding: 0 0.5rem; }
  .flow-number {
    display: inline-block; font-family: var(--font-head); font-size: 0.85rem; font-weight: 700;
    color: rgba(255,255,255,0.5); margin-bottom: 0.6rem;
  }
  .flow-icon {
    width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--gradient-accent);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    margin: 0 auto 1.2rem; box-shadow: var(--shadow-md);
  }
  .flow-step h3 { color: #fff; font-size: 1.05rem; margin-bottom: 0.6rem; }
  .flow-step p { color: rgba(255,255,255,0.72); font-size: 0.92rem; }

  
  .angled-section {
    background: var(--color-bg-alt);
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    padding: clamp(4.5rem, 9vw, 8rem) 0;
  }
  .angled-content { max-width: var(--content-width); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
  .angled-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .angled-grid.reverse { grid-template-columns: 1.1fr 1fr; }
  .angled-image img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4/3.2; object-fit: cover; }
  .angled-text p { margin-bottom: 1.1rem; }

  
  .philosophy-section { display: flex; justify-content: center; }
  .quote-card {
    max-width: 720px; text-align: center; background: var(--color-cream-card); border-radius: var(--radius-xl);
    padding: clamp(2.4rem, 5vw, 3.6rem); box-shadow: var(--shadow-lg); border: 1px solid var(--color-line);
    position: relative;
  }
  .quote-mark { color: var(--color-accent-soft); font-size: 2.2rem; margin-bottom: 1rem; }
  .quote-card p { font-family: var(--font-head); font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--color-ink); line-height: 1.5; margin-bottom: 1.2rem; }
  .quote-card cite { font-style: normal; font-size: 0.88rem; color: var(--color-ink-faint); font-weight: 600; }
  .quote-card.featured { margin: 0 auto 3rem; }

  
  .teaser-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .teaser-image img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 1/1; object-fit: cover; }
  .teaser-text p { margin-bottom: 1.3rem; }

  
  .clarity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 2rem; max-width: 900px; margin-left: auto; margin-right: auto; }
  .clarity-card {
    background: var(--color-cream-card); border-radius: var(--radius-lg); padding: 2rem; text-align: center;
    box-shadow: var(--shadow-md); border: 1px solid var(--color-line);
  }
  .clarity-card i { font-size: 1.6rem; color: var(--color-accent); margin-bottom: 1rem; }
  .clarity-card h3 { margin-bottom: 0.7rem; font-size: 1.1rem; }
  .clarity-card p { font-size: 0.94rem; }

  
  .cta-band {
    background: var(--gradient-hero); padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 2.5rem);
    text-align: center;
  }
  .cta-band-inner { max-width: 640px; margin: 0 auto; }
  .cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.9rem; }
  .cta-band p { color: rgba(255,255,255,0.8); margin-bottom: 1.8rem; }

  
  .site-footer { background: var(--color-bg-dark); color: rgba(255,255,255,0.75); padding-top: 4rem; margin-top: auto; }
  .footer-grid {
    max-width: var(--content-width); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem) 3rem;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem;
  }
  .footer-brand .brand-logo { height: 32px; filter: brightness(0) invert(1); margin-bottom: 1rem; }
  .footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.92rem; }
  .footer-links h4, .footer-contact h4 { color: #fff; font-size: 0.95rem; margin-bottom: 1.1rem; }
  .footer-links a { display: block; color: rgba(255,255,255,0.65); font-size: 0.9rem; margin-bottom: 0.7rem; transition: color 0.3s var(--ease); }
  .footer-links a:hover { color: var(--color-accent-soft); }
  .footer-contact p { color: rgba(255,255,255,0.65); font-size: 0.9rem; margin-bottom: 0.7rem; display: flex; gap: 0.6rem; }
  .footer-contact i { color: var(--color-accent-soft); margin-top: 0.2rem; }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); text-align: center; padding: 1.4rem; font-size: 0.85rem; color: rgba(255,255,255,0.5); }

  body { display: flex; flex-direction: column; min-height: 100vh; }
  main { flex: 1; }

  
  .page-hero {
    background: var(--gradient-hero); padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 3rem) clamp(4.5rem, 8vw, 6rem);
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
  }
  .page-hero.small { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
  .page-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; color: #fff; }
  .page-heading { font-size: clamp(1.9rem, 4.4vw, 2.9rem); color: #fff; margin: 0.6rem 0 1rem; }
  .page-heading.center-text { color: var(--color-ink); }
  .page-lede { color: rgba(255,255,255,0.82); font-size: 1.02rem; max-width: 620px; margin: 0 auto; }
  .page-lede.center-text { color: var(--color-ink-soft); }

  .path-trail {
    font-size: 0.85rem; color: var(--color-accent-soft); font-weight: 500;
    display: inline-block; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 0.3rem;
    white-space: nowrap; overflow: hidden; width: 0; animation: typeReveal 1.4s steps(40, end) forwards;
  }
  @keyframes typeReveal { to { width: 100%; } }

  
  .story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .story-image img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4/5; object-fit: cover; }
  .story-text p { margin-bottom: 1.1rem; }

  .timeline-list { max-width: 780px; margin: 2rem auto 0; display: grid; gap: 1.8rem; }
  .timeline-item { display: grid; grid-template-columns: 60px 1fr; gap: 1.3rem; align-items: flex-start; }
  .timeline-marker {
    width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--color-cream-card);
    border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center;
    color: var(--color-accent); font-size: 1.1rem;
  }
  .timeline-item h3 { font-size: 1.08rem; margin-bottom: 0.4rem; }
  .timeline-item p { font-size: 0.94rem; }

  
  .materials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
  .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.5rem; }
  .gallery-item { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); display: block; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
  .gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .gallery-item img { aspect-ratio: 1/1; object-fit: cover; }

  .usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 1rem; }
  .usage-card { padding: 1.8rem; border-radius: var(--radius-md); background: var(--color-bg-alt); border: 1px solid var(--color-line); }
  .usage-card h3 { font-size: 1rem; display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
  .usage-card i { color: var(--color-accent); }
  .usage-card p { font-size: 0.9rem; }

  
  .contact-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
  .contact-map { min-height: 340px; background: var(--color-bg-alt); }
  .contact-map iframe { width: 100%; height: 100%; min-height: 340px; filter: grayscale(0.15) contrast(1.02); }
  .contact-form-wrap { padding: clamp(2.5rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
  .contact-form { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
  .form-field { display: grid; gap: 0.5rem; }
  .form-field label { font-size: 0.9rem; font-weight: 600; color: var(--color-ink); }
  .form-field input, .form-field textarea {
    padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-line-strong);
    background: var(--color-cream-card); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
  .checkbox-field { display: flex; align-items: flex-start; gap: 0.7rem; flex-direction: row; }
  .checkbox-field input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.15rem; }
  .checkbox-field label { font-weight: 400; font-size: 0.88rem; color: var(--color-ink-soft); }
  .checkbox-field a { color: var(--color-accent-dark); font-weight: 600; }

  .area-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: 1rem; }
  .area-image img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4/3; object-fit: cover; }
  .area-text p { margin-bottom: 1.1rem; }

  
  .thanks-section { max-width: 780px; margin: 0 auto; padding: var(--space-section) clamp(1.25rem, 4vw, 2.5rem); text-align: center; }

  
  .legal-section { max-width: 860px; }
  .disclosure-block { margin-bottom: 2.6rem; padding-bottom: 2.6rem; border-bottom: 1px solid var(--color-line); }
  .disclosure-block:last-child { border-bottom: none; }
  .disclosure-summary {
    display: inline-block; background: var(--color-accent-soft); color: var(--color-accent-dark);
    font-weight: 600; font-size: 0.92rem; padding: 0.8rem 1.1rem; border-radius: var(--radius-md);
    margin-bottom: 1.1rem;
  }
  .disclosure-block h2 { font-size: 1.25rem; margin-bottom: 0.8rem; }
  .disclosure-block p:not(.disclosure-summary) { font-size: 0.96rem; }
  .legal-section.alt-layout .disclosure-block.letter .disclosure-summary { background: var(--color-bg-alt); color: var(--color-primary); border: 1px solid var(--color-line-strong); }
  .legal-section.unnumbered .disclosure-summary { background: transparent; border: 1.5px solid var(--color-accent); color: var(--color-accent-dark); }

  
  .cookie-notice { position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 950; }
  .cookie-bell {
    width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: var(--shadow-lg);
    position: relative; transition: transform 0.3s var(--ease), background 0.3s var(--ease);
  }
  .cookie-bell:hover { transform: scale(1.06); background: var(--color-primary-dark); }
  .cookie-badge {
    position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: var(--radius-pill);
    background: var(--color-accent); border: 2px solid var(--color-bg);
  }
  .cookie-badge.hidden { display: none; }
  .cookie-panel {
    position: absolute; bottom: 72px; right: 0; width: min(360px, 88vw);
    background: var(--color-cream-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
    border: 1px solid var(--color-line); padding: 1.6rem;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  }
  .cookie-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .cookie-panel h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
  .cookie-panel > p { font-size: 0.86rem; margin-bottom: 1rem; }
  .cookie-option { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--color-line); }
  .cookie-option strong { font-size: 0.88rem; }
  .cookie-option p { font-size: 0.78rem; margin-top: 0.2rem; }
  .toggle-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; margin-top: 0.15rem; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .toggle-switch span {
    position: absolute; inset: 0; background: var(--color-line-strong); border-radius: var(--radius-pill);
    transition: background 0.3s var(--ease);
  }
  .toggle-switch span::before {
    content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: transform 0.3s var(--ease); box-shadow: var(--shadow-sm);
  }
  .toggle-switch input:checked + span { background: var(--color-accent); }
  .toggle-switch input:checked + span::before { transform: translateX(18px); }
  .toggle-switch.disabled { opacity: 0.6; }
  .cookie-actions { display: flex; gap: 0.7rem; margin-top: 1rem; }
  .cookie-actions .primary-action, .cookie-actions .secondary-action { flex: 1; justify-content: center; padding: 0.7rem 1rem; font-size: 0.85rem; }
  .cookie-actions .secondary-action { background: var(--color-bg-alt); color: var(--color-ink); border: 1px solid var(--color-line-strong); }
  .cookie-actions .secondary-action:hover { background: var(--color-line); }
}

@layer utilities {
  @media (max-width: 980px) {
    .primary-nav, .menu-trigger { display: none; }
    .menu-trigger { display: flex; }
    .intro-grid, .angled-grid, .angled-grid.reverse, .story-grid, .teaser-grid, .area-grid { grid-template-columns: 1fr; }
    .module-grid, .materials-grid, .clarity-grid { grid-template-columns: 1fr; }
    .flow-grid { grid-template-columns: repeat(2, 1fr); }
    .flow-grid::before { display: none; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .usage-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .contact-split { grid-template-columns: 1fr; }
    .contact-map { min-height: 300px; }
  }
  @media (min-width: 981px) {
    .menu-trigger { display: none; }
  }
  @media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; }
    .usage-grid, .gallery-grid { grid-template-columns: 1fr; }
    .hero-float-card { margin-top: -4.5rem; }
    .cookie-panel { right: -1.4rem; width: 92vw; }
  }
}