creates a stacking context that contains absolutely-positioned decorative elements. ---------------------------------------------------------- */ html, body { overflow-x: hidden; } main { overflow-x: clip; } /* ---------------------------------------------------------- CONTAINER Centred, fluid, capped at 1200px. Use on any inner content wrapper that should not span the full viewport width. Usage:

...

---------------------------------------------------------- */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-5); /* 20px mobile */ } @media (min-width: 640px) { .container { padding-inline: var(--space-8); /* 32px tablet */ } } @media (min-width: 1024px) { .container { padding-inline: var(--space-12); /* 48px desktop */ } } /* ---------------------------------------------------------- FULL-BLEED Allows a direct child of .container to escape and span the full viewport width. Apply to

elements that need edge-to-edge backgrounds (hero, alternate sections). Usage:

...

---------------------------------------------------------- */ .full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); } /* ---------------------------------------------------------- SECTION — vertical rhythm Every

gets consistent block padding. Override per-section in its dedicated CSS file. Add class="section" to every

in index.html. ---------------------------------------------------------- */ .section { padding-block: var(--space-16); /* 64px */ } @media (min-width: 768px) { .section { padding-block: var(--space-20); /* 80px */ } } @media (min-width: 1024px) { .section { padding-block: var(--space-24); /* 96px */ } } /* Alternate background sections */ .section--alt { background-color: var(--color-bg-raised); } /* ---------------------------------------------------------- SECTION HEADER Consistent label + title + subtitle pattern above each section's content. ---------------------------------------------------------- */ .section__header { text-align: center; margin-block-end: var(--space-12); } .section__label { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-block-end: var(--space-3); } .section__title { font-size: var(--text-3xl); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--color-text-primary); } .section__subtitle { margin-block-start: var(--space-4); font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 60ch; margin-inline: auto; line-height: var(--leading-relaxed); } /* ---------------------------------------------------------- SKIP LINK — keyboard navigation accessibility Visually hidden until focused; jumps to #main-content. Must be the first focusable element in . ---------------------------------------------------------- */ .skip-link { position: absolute; top: var(--space-2); left: var(--space-2); padding: var(--space-2) var(--space-5); background: var(--color-accent); color: var(--color-text-inverse); font-weight: var(--font-semibold); font-size: var(--text-sm); border-radius: var(--radius-md); z-index: var(--z-tooltip); transform: translateY(-200%); transition: transform var(--duration-fast) var(--ease-out); white-space: nowrap; } .skip-link:focus { transform: translateY(0); } /* ---------------------------------------------------------- VISUALLY HIDDEN (screen-reader text only) Content is announced by AT but invisible to sighted users. ---------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ---------------------------------------------------------- RESPONSIVE VISIBILITY UTILITIES ---------------------------------------------------------- */ @media (max-width: 767px) { .hide-mobile { display: none !important; } } @media (min-width: 768px) { .hide-desktop { display: none !important; } } /* ---------------------------------------------------------- BUTTON BASE STYLES Shared across all button variants (hero CTAs, nav, contact). Component-specific overrides in their own CSS files. ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-size: var(--text-base); font-weight: var(--font-semibold); line-height: 1; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); white-space: nowrap; } /* Primary — filled FANUC Yellow */ .btn--primary { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse); } .btn--primary:hover, .btn--primary:focus-visible { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); box-shadow: var(--shadow-accent); color: var(--color-text-inverse); } /* Secondary — ghost / outline */ .btn--secondary { background-color: transparent; border-color: var(--color-accent); color: var(--color-accent); } .btn--secondary:hover, .btn--secondary:focus-visible { background-color: var(--color-accent-dim); box-shadow: var(--shadow-accent); color: var(--color-accent-hover); }