/* ============================================================
   ORANEVEL — css/style.css
   Prebuilt Tailwind v4.1.5 output — Industrial/Workshop Family
   K_FAMILY=4 | K_FONT=1 | K_HUE=3 | K_SAT=2 | K_BG=0
   BG #F5F1EB | INK #1A1F2E | ACCENT #1E40AF | MUTED #7A8090
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
@theme {
  --color-bg-primary:    #F5F1EB;
  --color-bg-secondary:  #EDE9E0;
  --color-ink-primary:   #1A1F2E;
  --color-ink-muted:     #7A8090;
  --color-accent:        #1E40AF;
  --font-display:        'Clash Display', sans-serif;
  --font-body:           'Satoshi', sans-serif;
  --shadow-hard:         4px 4px 0px #1A1F2E;
  --shadow-hard-accent:  4px 4px 0px #1E40AF;
}

/* ── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Satoshi', 'Arial', sans-serif;
  background-color: #F5F1EB;
  color: #1A1F2E;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Clash Display', 'Arial Black', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  color: #1A1F2E;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }
button { cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }

/* ── Layout ─────────────────────────────────────────────────── */
.flex            { display: flex; }
.inline-flex     { display: inline-flex; }
.grid            { display: grid; }
.block           { display: block; }
.inline-block    { display: inline-block; }
.inline          { display: inline; }
.hidden          { display: none; }
.contents        { display: contents; }

.flex-col        { flex-direction: column; }
.flex-row        { flex-direction: row; }
.flex-wrap       { flex-wrap: wrap; }
.flex-nowrap     { flex-wrap: nowrap; }
.flex-1          { flex: 1 1 0%; }
.flex-auto       { flex: 1 1 auto; }
.flex-none       { flex: none; }
.flex-shrink-0   { flex-shrink: 0; }
.flex-grow       { flex-grow: 1; }
.shrink-0        { flex-shrink: 0; }
.grow            { flex-grow: 1; }
.grow-0          { flex-grow: 0; }

.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-stretch   { align-items: stretch; }
.items-baseline  { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.self-start      { align-self: flex-start; }
.self-center     { align-self: center; }
.self-end        { align-self: flex-end; }
.self-stretch    { align-self: stretch; }

/* Grid */
.grid-cols-1     { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5     { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6     { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12    { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1      { grid-column: span 1 / span 1; }
.col-span-2      { grid-column: span 2 / span 2; }
.col-span-3      { grid-column: span 3 / span 3; }
.col-span-4      { grid-column: span 4 / span 4; }
.col-span-5      { grid-column: span 5 / span 5; }
.col-span-6      { grid-column: span 6 / span 6; }
.col-span-full   { grid-column: 1 / -1; }

.row-span-1      { grid-row: span 1 / span 1; }
.row-span-2      { grid-row: span 2 / span 2; }
.row-span-3      { grid-row: span 3 / span 3; }

/* Position */
.relative        { position: relative; }
.absolute        { position: absolute; }
.fixed           { position: fixed; }
.sticky          { position: sticky; }
.static          { position: static; }

.top-0           { top: 0; }
.top-2           { top: 0.5rem; }
.top-4           { top: 1rem; }
.top-8           { top: 2rem; }
.bottom-0        { bottom: 0; }
.bottom-4        { bottom: 1rem; }
.left-0          { left: 0; }
.right-0         { right: 0; }
.left-1\/2       { left: 50%; }
.right-1\/2      { right: 50%; }
.inset-0         { top: 0; right: 0; bottom: 0; left: 0; }
.-top-2          { top: -0.5rem; }
.-right-2        { right: -0.5rem; }

/* Z-index */
.z-0             { z-index: 0; }
.z-10            { z-index: 10; }
.z-20            { z-index: 20; }
.z-30            { z-index: 30; }
.z-40            { z-index: 40; }
.z-50            { z-index: 50; }

/* ── Gap / Spacing ──────────────────────────────────────────── */
.gap-0           { gap: 0; }
.gap-1           { gap: 0.25rem; }
.gap-2           { gap: 0.5rem; }
.gap-2\.5        { gap: 0.625rem; }
.gap-3           { gap: 0.75rem; }
.gap-4           { gap: 1rem; }
.gap-5           { gap: 1.25rem; }
.gap-6           { gap: 1.5rem; }
.gap-7           { gap: 1.75rem; }
.gap-8           { gap: 2rem; }
.gap-10          { gap: 2.5rem; }
.gap-12          { gap: 3rem; }
.gap-16          { gap: 4rem; }
.gap-x-2         { column-gap: 0.5rem; }
.gap-x-4         { column-gap: 1rem; }
.gap-x-6         { column-gap: 1.5rem; }
.gap-x-8         { column-gap: 2rem; }
.gap-y-2         { row-gap: 0.5rem; }
.gap-y-4         { row-gap: 1rem; }
.gap-y-6         { row-gap: 1.5rem; }
.gap-y-8         { row-gap: 2rem; }
.gap-y-12        { row-gap: 3rem; }

/* Padding */
.p-0             { padding: 0; }
.p-1             { padding: 0.25rem; }
.p-2             { padding: 0.5rem; }
.p-3             { padding: 0.75rem; }
.p-4             { padding: 1rem; }
.p-5             { padding: 1.25rem; }
.p-6             { padding: 1.5rem; }
.p-8             { padding: 2rem; }
.p-10            { padding: 2.5rem; }
.p-12            { padding: 3rem; }
.p-16            { padding: 4rem; }
.px-2            { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3            { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4            { padding-left: 1rem; padding-right: 1rem; }
.px-5            { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6            { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8            { padding-left: 2rem; padding-right: 2rem; }
.px-10           { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12           { padding-left: 3rem; padding-right: 3rem; }
.py-0            { padding-top: 0; padding-bottom: 0; }
.py-1            { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5         { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2            { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5         { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3            { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4            { padding-top: 1rem; padding-bottom: 1rem; }
.py-5            { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6            { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8            { padding-top: 2rem; padding-bottom: 2rem; }
.py-10           { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12           { padding-top: 3rem; padding-bottom: 3rem; }
.py-16           { padding-top: 4rem; padding-bottom: 4rem; }
.py-20           { padding-top: 5rem; padding-bottom: 5rem; }
.py-24           { padding-top: 6rem; padding-bottom: 6rem; }
.py-28           { padding-top: 7rem; padding-bottom: 7rem; }
.py-32           { padding-top: 8rem; padding-bottom: 8rem; }
.pt-0            { padding-top: 0; }
.pt-2            { padding-top: 0.5rem; }
.pt-3            { padding-top: 0.75rem; }
.pt-4            { padding-top: 1rem; }
.pt-6            { padding-top: 1.5rem; }
.pt-8            { padding-top: 2rem; }
.pt-12           { padding-top: 3rem; }
.pt-16           { padding-top: 4rem; }
.pb-0            { padding-bottom: 0; }
.pb-2            { padding-bottom: 0.5rem; }
.pb-3            { padding-bottom: 0.75rem; }
.pb-4            { padding-bottom: 1rem; }
.pb-6            { padding-bottom: 1.5rem; }
.pb-8            { padding-bottom: 2rem; }
.pb-12           { padding-bottom: 3rem; }
.pb-16           { padding-bottom: 4rem; }
.pl-2            { padding-left: 0.5rem; }
.pl-4            { padding-left: 1rem; }
.pl-6            { padding-left: 1.5rem; }
.pl-8            { padding-left: 2rem; }
.pr-2            { padding-right: 0.5rem; }
.pr-4            { padding-right: 1rem; }
.pr-8            { padding-right: 2rem; }

/* Margin */
.m-0             { margin: 0; }
.m-auto          { margin: auto; }
.mx-auto         { margin-left: auto; margin-right: auto; }
.mx-2            { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-4            { margin-left: 1rem; margin-right: 1rem; }
.mx-8            { margin-left: 2rem; margin-right: 2rem; }
.my-2            { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4            { margin-top: 1rem; margin-bottom: 1rem; }
.my-8            { margin-top: 2rem; margin-bottom: 2rem; }
.mt-0            { margin-top: 0; }
.mt-1            { margin-top: 0.25rem; }
.mt-2            { margin-top: 0.5rem; }
.mt-3            { margin-top: 0.75rem; }
.mt-4            { margin-top: 1rem; }
.mt-5            { margin-top: 1.25rem; }
.mt-6            { margin-top: 1.5rem; }
.mt-8            { margin-top: 2rem; }
.mt-10           { margin-top: 2.5rem; }
.mt-12           { margin-top: 3rem; }
.mt-16           { margin-top: 4rem; }
.mt-20           { margin-top: 5rem; }
.mt-24           { margin-top: 6rem; }
.mb-0            { margin-bottom: 0; }
.mb-1            { margin-bottom: 0.25rem; }
.mb-2            { margin-bottom: 0.5rem; }
.mb-3            { margin-bottom: 0.75rem; }
.mb-4            { margin-bottom: 1rem; }
.mb-5            { margin-bottom: 1.25rem; }
.mb-6            { margin-bottom: 1.5rem; }
.mb-8            { margin-bottom: 2rem; }
.mb-10           { margin-bottom: 2.5rem; }
.mb-12           { margin-bottom: 3rem; }
.mb-16           { margin-bottom: 4rem; }
.ml-0            { margin-left: 0; }
.ml-1            { margin-left: 0.25rem; }
.ml-2            { margin-left: 0.5rem; }
.ml-4            { margin-left: 1rem; }
.ml-auto         { margin-left: auto; }
.mr-0            { margin-right: 0; }
.mr-1            { margin-right: 0.25rem; }
.mr-2            { margin-right: 0.5rem; }
.mr-4            { margin-right: 1rem; }
.mr-auto         { margin-right: auto; }

/* Space-y */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }
.space-y-12 > * + * { margin-top: 3rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }

/* ── Sizing ─────────────────────────────────────────────────── */
.w-full          { width: 100%; }
.w-auto          { width: auto; }
.w-0             { width: 0; }
.w-1             { width: 0.25rem; }
.w-2             { width: 0.5rem; }
.w-4             { width: 1rem; }
.w-5             { width: 1.25rem; }
.w-6             { width: 1.5rem; }
.w-8             { width: 2rem; }
.w-10            { width: 2.5rem; }
.w-12            { width: 3rem; }
.w-16            { width: 4rem; }
.w-20            { width: 5rem; }
.w-24            { width: 6rem; }
.w-32            { width: 8rem; }
.w-40            { width: 10rem; }
.w-48            { width: 12rem; }
.w-64            { width: 16rem; }
.w-80            { width: 20rem; }
.w-96            { width: 24rem; }
.w-1\/2          { width: 50%; }
.w-1\/3          { width: 33.333333%; }
.w-2\/3          { width: 66.666667%; }
.w-3\/4          { width: 75%; }
.w-\[calc\(100\%-1\.5rem\)\] { width: calc(100% - 1.5rem); }
.w-\[1px\]       { width: 1px; }
.w-\[2px\]       { width: 2px; }
.max-w-xs        { max-width: 20rem; }
.max-w-sm        { max-width: 24rem; }
.max-w-md        { max-width: 28rem; }
.max-w-lg        { max-width: 32rem; }
.max-w-xl        { max-width: 36rem; }
.max-w-2xl       { max-width: 42rem; }
.max-w-3xl       { max-width: 48rem; }
.max-w-4xl       { max-width: 56rem; }
.max-w-5xl       { max-width: 64rem; }
.max-w-6xl       { max-width: 72rem; }
.max-w-7xl       { max-width: 80rem; }
.max-w-full      { max-width: 100%; }
.max-w-none      { max-width: none; }
.max-w-prose     { max-width: 65ch; }
.max-w-\[600px\] { max-width: 600px; }
.max-w-\[720px\] { max-width: 720px; }
.max-w-\[800px\] { max-width: 800px; }
.max-w-\[900px\] { max-width: 900px; }
.max-w-\[1220px\] { max-width: 1220px; }
.min-w-0         { min-width: 0; }
.min-w-full      { min-width: 100%; }
.h-auto          { height: auto; }
.h-full          { height: 100%; }
.h-screen        { height: 100vh; }
.h-0             { height: 0; }
.h-1             { height: 0.25rem; }
.h-2             { height: 0.5rem; }
.h-4             { height: 1rem; }
.h-5             { height: 1.25rem; }
.h-6             { height: 1.5rem; }
.h-8             { height: 2rem; }
.h-10            { height: 2.5rem; }
.h-12            { height: 3rem; }
.h-16            { height: 4rem; }
.h-20            { height: 5rem; }
.h-24            { height: 6rem; }
.h-32            { height: 8rem; }
.h-40            { height: 10rem; }
.h-48            { height: 12rem; }
.h-64            { height: 16rem; }
.h-80            { height: 20rem; }
.h-96            { height: 24rem; }
.h-\[1px\]       { height: 1px; }
.h-\[2px\]       { height: 2px; }
.h-\[240px\]     { height: 240px; }
.h-\[280px\]     { height: 280px; }
.h-\[300px\]     { height: 300px; }
.h-\[320px\]     { height: 320px; }
.h-\[360px\]     { height: 360px; }
.h-\[400px\]     { height: 400px; }
.h-\[440px\]     { height: 440px; }
.h-\[480px\]     { height: 480px; }
.h-\[520px\]     { height: 520px; }
.h-\[560px\]     { height: 560px; }
.h-\[600px\]     { height: 600px; }
.min-h-screen    { min-height: 100vh; }
.min-h-\[300px\] { min-height: 300px; }
.min-h-\[400px\] { min-height: 400px; }
.min-h-\[480px\] { min-height: 480px; }
.min-h-\[560px\] { min-height: 560px; }
.min-h-\[600px\] { min-height: 600px; }
.max-h-0         { max-height: 0; }
.max-h-\[0px\]   { max-height: 0px; }
.max-h-screen    { max-height: 100vh; }

/* Aspect ratio */
.aspect-square        { aspect-ratio: 1 / 1; }
.aspect-video         { aspect-ratio: 16 / 9; }
.aspect-\[16\/9\]     { aspect-ratio: 16 / 9; }
.aspect-\[21\/9\]     { aspect-ratio: 21 / 9; }
.aspect-\[4\/3\]      { aspect-ratio: 4 / 3; }
.aspect-\[3\/4\]      { aspect-ratio: 3 / 4; }
.aspect-\[3\/2\]      { aspect-ratio: 3 / 2; }

/* Object fit */
.object-cover         { object-fit: cover; }
.object-contain       { object-fit: contain; }
.object-center        { object-position: center; }
.object-top           { object-position: top; }

/* ── Typography ─────────────────────────────────────────────── */
.font-display         { font-family: 'Clash Display', 'Arial Black', sans-serif; }
.font-body            { font-family: 'Satoshi', 'Arial', sans-serif; }
.font-mono            { font-family: 'Courier New', 'Courier', monospace; }
.font-sans            { font-family: 'Satoshi', sans-serif; }
.font-serif           { font-family: Georgia, serif; }

.font-normal          { font-weight: 400; }
.font-medium          { font-weight: 500; }
.font-semibold        { font-weight: 600; }
.font-bold            { font-weight: 700; }
.font-extrabold       { font-weight: 800; }
.font-black           { font-weight: 900; }

.text-xs              { font-size: 0.75rem; line-height: 1rem; }
.text-sm              { font-size: 0.875rem; line-height: 1.25rem; }
.text-base            { font-size: 1rem; line-height: 1.5rem; }
.text-lg              { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl              { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl             { font-size: 1.5rem; line-height: 2rem; }
.text-3xl             { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl             { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl             { font-size: 3rem; line-height: 1; }
.text-6xl             { font-size: 3.75rem; line-height: 1; }
.text-7xl             { font-size: 4.5rem; line-height: 1; }
.text-8xl             { font-size: 6rem; line-height: 1; }
.text-9xl             { font-size: 8rem; line-height: 1; }
.text-\[10px\]        { font-size: 10px; }
.text-\[11px\]        { font-size: 11px; }
.text-\[13px\]        { font-size: 13px; }
.text-\[14px\]        { font-size: 14px; }
.text-\[15px\]        { font-size: 15px; }
.text-\[18px\]        { font-size: 18px; }
.text-\[20px\]        { font-size: 20px; }
.text-\[24px\]        { font-size: 24px; }
.text-\[28px\]        { font-size: 28px; }
.text-\[32px\]        { font-size: 32px; }
.text-\[36px\]        { font-size: 36px; }
.text-\[40px\]        { font-size: 40px; }
.text-\[48px\]        { font-size: 48px; }
.text-\[56px\]        { font-size: 56px; }
.text-\[64px\]        { font-size: 64px; }
.text-\[72px\]        { font-size: 72px; }
.text-\[80px\]        { font-size: 80px; }
.text-\[96px\]        { font-size: 96px; }
.text-\[112px\]       { font-size: 112px; }
.text-\[128px\]       { font-size: 128px; }

.leading-none         { line-height: 1; }
.leading-tight        { line-height: 1.25; }
.leading-snug         { line-height: 1.375; }
.leading-normal       { line-height: 1.5; }
.leading-relaxed      { line-height: 1.625; }
.leading-loose        { line-height: 2; }
.leading-\[1\.0\]     { line-height: 1.0; }
.leading-\[1\.05\]    { line-height: 1.05; }
.leading-\[1\.1\]     { line-height: 1.1; }
.leading-\[1\.15\]    { line-height: 1.15; }
.leading-\[1\.2\]     { line-height: 1.2; }
.leading-\[1\.3\]     { line-height: 1.3; }
.leading-\[1\.4\]     { line-height: 1.4; }

.tracking-tighter     { letter-spacing: -0.05em; }
.tracking-tight       { letter-spacing: -0.025em; }
.tracking-normal      { letter-spacing: 0; }
.tracking-wide        { letter-spacing: 0.025em; }
.tracking-wider       { letter-spacing: 0.05em; }
.tracking-widest      { letter-spacing: 0.1em; }
.tracking-\[0\.12em\] { letter-spacing: 0.12em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.2em\]  { letter-spacing: 0.2em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.tracking-\[0\.3em\]  { letter-spacing: 0.3em; }

.uppercase            { text-transform: uppercase; }
.lowercase            { text-transform: lowercase; }
.capitalize           { text-transform: capitalize; }
.normal-case          { text-transform: none; }

.text-left            { text-align: left; }
.text-center          { text-align: center; }
.text-right           { text-align: right; }
.text-justify         { text-align: justify; }

.italic               { font-style: italic; }
.not-italic           { font-style: normal; }

.underline            { text-decoration: underline; }
.no-underline         { text-decoration: none; }
.line-through         { text-decoration: line-through; }
.underline-offset-2   { text-underline-offset: 2px; }
.underline-offset-4   { text-underline-offset: 4px; }
.decoration-1         { text-decoration-thickness: 1px; }
.decoration-2         { text-decoration-thickness: 2px; }

.whitespace-nowrap    { white-space: nowrap; }
.whitespace-pre       { white-space: pre; }
.whitespace-pre-wrap  { white-space: pre-wrap; }
.whitespace-normal    { white-space: normal; }
.truncate             { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-words          { overflow-wrap: break-word; word-break: break-word; }
.break-all            { word-break: break-all; }

/* ── Colors: Background ─────────────────────────────────────── */
.bg-transparent                   { background-color: transparent; }
.bg-white                         { background-color: #ffffff; }
.bg-black                         { background-color: #000000; }
.bg-\[\#F5F1EB\]                  { background-color: #F5F1EB; }
.bg-\[\#EDE9E0\]                  { background-color: #EDE9E0; }
.bg-\[\#E5E1D8\]                  { background-color: #E5E1D8; }
.bg-\[\#DAD6CE\]                  { background-color: #DAD6CE; }
.bg-\[\#F0EDE6\]                  { background-color: #F0EDE6; }
.bg-\[\#1A1F2E\]                  { background-color: #1A1F2E; }
.bg-\[\#1E40AF\]                  { background-color: #1E40AF; }
.bg-\[\#1D3A9E\]                  { background-color: #1D3A9E; }
.bg-\[\#172F8A\]                  { background-color: #172F8A; }
.bg-\[\#162666\]                  { background-color: #162666; }
.bg-\[\#7A8090\]                  { background-color: #7A8090; }
.bg-\[\#2A3142\]                  { background-color: #2A3142; }
.bg-\[\#3B4663\]                  { background-color: #3B4663; }
.bg-\[\#DCDAD4\]                  { background-color: #DCDAD4; }
.bg-\[\#C8C4BC\]                  { background-color: #C8C4BC; }

/* ── Colors: Text ───────────────────────────────────────────── */
.text-white                       { color: #ffffff; }
.text-black                       { color: #000000; }
.text-\[\#1A1F2E\]                { color: #1A1F2E; }
.text-\[\#1E40AF\]                { color: #1E40AF; }
.text-\[\#7A8090\]                { color: #7A8090; }
.text-\[\#5A6070\]                { color: #5A6070; }
.text-\[\#F5F1EB\]                { color: #F5F1EB; }
.text-\[\#EDE9E0\]                { color: #EDE9E0; }
.text-\[\#D8E2DC\]                { color: #D8E2DC; }
.text-\[\#B8B4AE\]                { color: #B8B4AE; }
.text-\[\#E8E4DC\]                { color: #E8E4DC; }
.text-\[\#3B4663\]                { color: #3B4663; }
.text-\[\#C8C4BC\]                { color: #C8C4BC; }

/* ── Colors: Border ─────────────────────────────────────────── */
.border-\[\#7A8090\]\/20          { border-color: rgba(122, 128, 144, 0.20); }
.border-\[\#7A8090\]\/30          { border-color: rgba(122, 128, 144, 0.30); }
.border-\[\#7A8090\]\/40          { border-color: rgba(122, 128, 144, 0.40); }
.border-\[\#7A8090\]\/50          { border-color: rgba(122, 128, 144, 0.50); }
.border-\[\#1A1F2E\]              { border-color: #1A1F2E; }
.border-\[\#1A1F2E\]\/20          { border-color: rgba(26, 31, 46, 0.20); }
.border-\[\#1A1F2E\]\/30          { border-color: rgba(26, 31, 46, 0.30); }
.border-\[\#1E40AF\]              { border-color: #1E40AF; }
.border-\[\#1E40AF\]\/30          { border-color: rgba(30, 64, 175, 0.30); }
.border-\[\#EDE9E0\]              { border-color: #EDE9E0; }
.border-\[\#F5F1EB\]              { border-color: #F5F1EB; }
.border-\[\#DAD6CE\]              { border-color: #DAD6CE; }
.border-white                     { border-color: #ffffff; }
.border-white\/20                 { border-color: rgba(255, 255, 255, 0.20); }
.border-white\/30                 { border-color: rgba(255, 255, 255, 0.30); }
.border-transparent               { border-color: transparent; }

/* ── Borders ────────────────────────────────────────────────── */
.border           { border-width: 1px; border-style: solid; }
.border-0         { border-width: 0; }
.border-2         { border-width: 2px; border-style: solid; }
.border-4         { border-width: 4px; border-style: solid; }
.border-t         { border-top-width: 1px; border-top-style: solid; }
.border-b         { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l         { border-left-width: 1px; border-left-style: solid; }
.border-r         { border-right-width: 1px; border-right-style: solid; }
.border-t-2       { border-top-width: 2px; border-top-style: solid; }
.border-b-2       { border-bottom-width: 2px; border-bottom-style: solid; }
.border-l-2       { border-left-width: 2px; border-left-style: solid; }
.border-r-2       { border-right-width: 2px; border-right-style: solid; }
.border-t-4       { border-top-width: 4px; border-top-style: solid; }
.border-b-4       { border-bottom-width: 4px; border-bottom-style: solid; }
.border-l-4       { border-left-width: 4px; border-left-style: solid; }

.rounded-none     { border-radius: 0; }
.rounded-sm       { border-radius: 2px; }
.rounded          { border-radius: 4px; }
.rounded-md       { border-radius: 6px; }
.rounded-lg       { border-radius: 8px; }
.rounded-xl       { border-radius: 12px; }
.rounded-2xl      { border-radius: 16px; }
.rounded-full     { border-radius: 9999px; }

/* ── Effects ────────────────────────────────────────────────── */
.shadow-sm        { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.shadow           { box-shadow: 0 2px 6px rgba(0,0,0,0.10); }
.shadow-md        { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
.shadow-lg        { box-shadow: 0 8px 32px rgba(0,0,0,0.14); }
.shadow-xl        { box-shadow: 0 16px 48px rgba(0,0,0,0.18); }
.shadow-none      { box-shadow: none; }
.shadow-\[4px_4px_0px_\#1A1F2E\]  { box-shadow: 4px 4px 0px #1A1F2E; }
.shadow-\[6px_6px_0px_\#1A1F2E\]  { box-shadow: 6px 6px 0px #1A1F2E; }
.shadow-\[4px_4px_0px_\#1E40AF\]  { box-shadow: 4px 4px 0px #1E40AF; }
.shadow-\[2px_2px_0px_\#1A1F2E\]  { box-shadow: 2px 2px 0px #1A1F2E; }
.shadow-\[8px_8px_0px_\#1A1F2E\]  { box-shadow: 8px 8px 0px #1A1F2E; }
.shadow-\[3px_3px_0px_\#1A1F2E\]  { box-shadow: 3px 3px 0px #1A1F2E; }

.opacity-0        { opacity: 0; }
.opacity-10       { opacity: 0.10; }
.opacity-20       { opacity: 0.20; }
.opacity-30       { opacity: 0.30; }
.opacity-40       { opacity: 0.40; }
.opacity-50       { opacity: 0.50; }
.opacity-60       { opacity: 0.60; }
.opacity-70       { opacity: 0.70; }
.opacity-80       { opacity: 0.80; }
.opacity-90       { opacity: 0.90; }
.opacity-100      { opacity: 1; }

.backdrop-blur-sm   { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md   { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl   { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.backdrop-blur-2xl  { backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }

/* ── Transforms ─────────────────────────────────────────────── */
.translate-x-1\/2   { transform: translateX(50%); }
.-translate-x-1\/2  { transform: translateX(-50%); }
.translate-y-1\/2   { transform: translateY(50%); }
.-translate-y-1\/2  { transform: translateY(-50%); }
.-translate-y-1     { transform: translateY(-0.25rem); }
.-translate-y-2     { transform: translateY(-0.5rem); }
.rotate-90          { transform: rotate(90deg); }
.-rotate-90         { transform: rotate(-90deg); }
.rotate-180         { transform: rotate(180deg); }
.-rotate-3          { transform: rotate(-3deg); }
.rotate-3           { transform: rotate(3deg); }
.rotate-\[-90deg\]  { transform: rotate(-90deg); }
.scale-90           { transform: scale(0.90); }
.scale-95           { transform: scale(0.95); }
.scale-100          { transform: scale(1); }
.scale-105          { transform: scale(1.05); }
.scale-110          { transform: scale(1.10); }

/* ── Transitions ────────────────────────────────────────────── */
.transition         { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease, transform 150ms ease; }
.transition-colors  { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.transition-opacity { transition: opacity 300ms ease; }
.transition-transform { transition: transform 150ms ease; }
.transition-all     { transition: all 150ms ease; }
.transition-shadow  { transition: box-shadow 150ms ease; }

.duration-75        { transition-duration: 75ms; }
.duration-100       { transition-duration: 100ms; }
.duration-150       { transition-duration: 150ms; }
.duration-200       { transition-duration: 200ms; }
.duration-300       { transition-duration: 300ms; }
.duration-500       { transition-duration: 500ms; }
.duration-700       { transition-duration: 700ms; }

.ease-in            { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out           { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out        { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Hover States ───────────────────────────────────────────── */
.hover\:text-\[\#1E40AF\]:hover     { color: #1E40AF; }
.hover\:text-\[\#1A1F2E\]:hover     { color: #1A1F2E; }
.hover\:text-\[\#F5F1EB\]:hover     { color: #F5F1EB; }
.hover\:text-white:hover            { color: #ffffff; }
.hover\:bg-\[\#1E40AF\]:hover       { background-color: #1E40AF; }
.hover\:bg-\[\#172F8A\]:hover       { background-color: #172F8A; }
.hover\:bg-\[\#1A1F2E\]:hover       { background-color: #1A1F2E; }
.hover\:bg-\[\#EDE9E0\]:hover       { background-color: #EDE9E0; }
.hover\:bg-\[\#F5F1EB\]:hover       { background-color: #F5F1EB; }
.hover\:bg-\[\#DAD6CE\]:hover       { background-color: #DAD6CE; }
.hover\:border-\[\#1E40AF\]:hover   { border-color: #1E40AF; }
.hover\:border-\[\#1A1F2E\]:hover   { border-color: #1A1F2E; }
.hover\:opacity-90:hover            { opacity: 0.90; }
.hover\:opacity-80:hover            { opacity: 0.80; }
.hover\:opacity-70:hover            { opacity: 0.70; }
.hover\:shadow-\[4px_4px_0px_\#1E40AF\]:hover { box-shadow: 4px 4px 0px #1E40AF; }
.hover\:shadow-\[6px_6px_0px_\#1A1F2E\]:hover { box-shadow: 6px 6px 0px #1A1F2E; }
.hover\:shadow-\[4px_4px_0px_\#1A1F2E\]:hover { box-shadow: 4px 4px 0px #1A1F2E; }
.hover\:shadow-lg:hover             { box-shadow: 0 8px 32px rgba(0,0,0,0.14); }
.hover\:shadow-md:hover             { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
.hover\:scale-105:hover             { transform: scale(1.05); }
.hover\:-translate-y-1:hover        { transform: translateY(-0.25rem); }
.hover\:-translate-y-2:hover        { transform: translateY(-0.5rem); }
.hover\:underline:hover             { text-decoration: underline; }
.hover\:no-underline:hover          { text-decoration: none; }

/* Focus */
.focus\:outline-none:focus          { outline: none; }
.focus\:border-\[\#1E40AF\]:focus   { border-color: #1E40AF; }
.focus\:ring-2:focus                { box-shadow: 0 0 0 2px rgba(30,64,175,0.4); }

/* Group */
.group { }
.group:hover .group-hover\:text-\[\#1E40AF\] { color: #1E40AF; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }

/* ── Overflow ───────────────────────────────────────────────── */
.overflow-hidden    { overflow: hidden; }
.overflow-x-hidden  { overflow-x: hidden; }
.overflow-y-auto    { overflow-y: auto; }
.overflow-auto      { overflow: auto; }
.overflow-visible   { overflow: visible; }

/* ── Misc Utilities ─────────────────────────────────────────── */
.cursor-pointer     { cursor: pointer; }
.cursor-default     { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none        { user-select: none; }
.select-text        { user-select: text; }
.visible            { visibility: visible; }
.invisible          { visibility: hidden; }
.list-none          { list-style: none; }
.list-disc          { list-style: disc; }
.list-decimal       { list-style: decimal; }
.resize-none        { resize: none; }
.appearance-none    { -webkit-appearance: none; appearance: none; }
.not-italic         { font-style: normal; }
.italic             { font-style: italic; }
.border-collapse    { border-collapse: collapse; }

/* ── Responsive: sm ─────────────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:flex               { display: flex; }
  .sm\:block              { display: block; }
  .sm\:hidden             { display: none; }
  .sm\:grid-cols-2        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:text-xl            { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-2xl           { font-size: 1.5rem; line-height: 2rem; }
  .sm\:px-6               { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-12              { padding-top: 3rem; padding-bottom: 3rem; }
  .sm\:text-\[48px\]      { font-size: 48px; }
}

/* ── Responsive: md ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .md\:flex               { display: flex; }
  .md\:hidden             { display: none; }
  .md\:block              { display: block; }
  .md\:inline-block       { display: inline-block; }
  .md\:grid               { display: grid; }
  .md\:flex-row           { flex-direction: row; }
  .md\:flex-col           { flex-direction: column; }
  .md\:items-center       { align-items: center; }
  .md\:items-start        { align-items: flex-start; }
  .md\:items-end          { align-items: flex-end; }
  .md\:justify-between    { justify-content: space-between; }
  .md\:justify-end        { justify-content: flex-end; }
  .md\:justify-start      { justify-content: flex-start; }
  .md\:justify-center     { justify-content: center; }
  .md\:self-end           { align-self: flex-end; }
  .md\:grid-cols-2        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4        { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-1         { grid-column: span 1 / span 1; }
  .md\:col-span-2         { grid-column: span 2 / span 2; }
  .md\:col-span-3         { grid-column: span 3 / span 3; }
  .md\:row-span-2         { grid-row: span 2 / span 2; }
  .md\:row-span-3         { grid-row: span 3 / span 3; }
  .md\:gap-4              { gap: 1rem; }
  .md\:gap-6              { gap: 1.5rem; }
  .md\:gap-8              { gap: 2rem; }
  .md\:gap-12             { gap: 3rem; }
  .md\:gap-16             { gap: 4rem; }
  .md\:px-8               { padding-left: 2rem; padding-right: 2rem; }
  .md\:px-12              { padding-left: 3rem; padding-right: 3rem; }
  .md\:py-0               { padding-top: 0; padding-bottom: 0; }
  .md\:py-12              { padding-top: 3rem; padding-bottom: 3rem; }
  .md\:py-16              { padding-top: 4rem; padding-bottom: 4rem; }
  .md\:py-20              { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-24              { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:py-32              { padding-top: 8rem; padding-bottom: 8rem; }
  .md\:py-40              { padding-top: 10rem; padding-bottom: 10rem; }
  .md\:pt-0               { padding-top: 0; }
  .md\:pb-0               { padding-bottom: 0; }
  .md\:mt-0               { margin-top: 0; }
  .md\:mt-16              { margin-top: 4rem; }
  .md\:mt-24              { margin-top: 6rem; }
  .md\:mb-0               { margin-bottom: 0; }
  .md\:text-left          { text-align: left; }
  .md\:text-right         { text-align: right; }
  .md\:text-center        { text-align: center; }
  .md\:text-lg            { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-xl            { font-size: 1.25rem; line-height: 1.75rem; }
  .md\:text-2xl           { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-3xl           { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl           { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl           { font-size: 3rem; line-height: 1; }
  .md\:text-6xl           { font-size: 3.75rem; line-height: 1; }
  .md\:text-7xl           { font-size: 4.5rem; line-height: 1; }
  .md\:text-\[56px\]      { font-size: 56px; }
  .md\:text-\[64px\]      { font-size: 64px; }
  .md\:text-\[72px\]      { font-size: 72px; }
  .md\:text-\[80px\]      { font-size: 80px; }
  .md\:text-\[96px\]      { font-size: 96px; }
  .md\:text-\[112px\]     { font-size: 112px; }
  .md\:flex-row           { flex-direction: row; }
  .md\:w-auto             { width: auto; }
  .md\:w-1\/2             { width: 50%; }
  .md\:w-2\/3             { width: 66.666667%; }
  .md\:max-w-\[60\%\]     { max-width: 60%; }
  .md\:aspect-\[21\/9\]   { aspect-ratio: 21 / 9; }
  .md\:border-r           { border-right-width: 1px; border-right-style: solid; }
  .md\:border-b-0         { border-bottom-width: 0; }
}

/* ── Responsive: lg ─────────────────────────────────────────── */
@media (min-width: 1024px) {
  .lg\:flex               { display: flex; }
  .lg\:hidden             { display: none; }
  .lg\:grid-cols-2        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4        { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-2         { grid-column: span 2 / span 2; }
  .lg\:col-span-3         { grid-column: span 3 / span 3; }
  .lg\:gap-8              { gap: 2rem; }
  .lg\:gap-12             { gap: 3rem; }
  .lg\:gap-16             { gap: 4rem; }
  .lg\:px-12              { padding-left: 3rem; padding-right: 3rem; }
  .lg\:py-24              { padding-top: 6rem; padding-bottom: 6rem; }
  .lg\:py-32              { padding-top: 8rem; padding-bottom: 8rem; }
  .lg\:py-40              { padding-top: 10rem; padding-bottom: 10rem; }
  .lg\:py-48              { padding-top: 12rem; padding-bottom: 12rem; }
  .lg\:text-5xl           { font-size: 3rem; line-height: 1; }
  .lg\:text-6xl           { font-size: 3.75rem; line-height: 1; }
  .lg\:text-7xl           { font-size: 4.5rem; line-height: 1; }
  .lg\:text-8xl           { font-size: 6rem; line-height: 1; }
  .lg\:text-\[80px\]      { font-size: 80px; }
  .lg\:text-\[96px\]      { font-size: 96px; }
  .lg\:text-\[112px\]     { font-size: 112px; }
  .lg\:text-\[128px\]     { font-size: 128px; }
  .lg\:w-1\/2             { width: 50%; }
  .lg\:w-2\/3             { width: 66.666667%; }
}

/* ── Responsive: xl ─────────────────────────────────────────── */
@media (min-width: 1280px) {
  .xl\:grid-cols-4        { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:text-8xl           { font-size: 6rem; line-height: 1; }
  .xl\:text-9xl           { font-size: 8rem; line-height: 1; }
  .xl\:py-40              { padding-top: 10rem; padding-bottom: 10rem; }
  .xl\:py-48              { padding-top: 12rem; padding-bottom: 12rem; }
  .xl\:text-\[128px\]     { font-size: 128px; }
}

/* ============================================================
   INDUSTRIAL / WORKSHOP DESIGN SYSTEM
   ============================================================ */

/* Blueprint Grid Background */
.bg-blueprint {
  background-image:
    linear-gradient(rgba(122, 128, 144, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 128, 144, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-blueprint-dark {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Industrial Hard Shadow */
.shadow-hard        { box-shadow: 4px 4px 0px #1A1F2E; }
.shadow-hard-sm     { box-shadow: 2px 2px 0px #1A1F2E; }
.shadow-hard-lg     { box-shadow: 6px 6px 0px #1A1F2E; }
.shadow-hard-accent { box-shadow: 4px 4px 0px #1E40AF; }
.shadow-hard-xl     { box-shadow: 8px 8px 0px #1A1F2E; }

/* Technical Label */
.label-tech {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #7A8090;
}

/* Section number markers */
.num-marker {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #7A8090;
  margin-bottom: 0.75rem;
}

/* Industrial Chip / Badge */
.chip-industrial {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid #1A1F2E;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1A1F2E;
  background-color: transparent;
  white-space: nowrap;
}

.chip-accent {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid #1E40AF;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1E40AF;
  background-color: transparent;
  white-space: nowrap;
}

/* Marquee Animation */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee      { animation: marquee 32s linear infinite; }
.animate-marquee-slow { animation: marquee 56s linear infinite; }
.animate-marquee-fast { animation: marquee 18s linear infinite; }

/* Geometric Divider */
.geo-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #7A8090;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  font-family: monospace;
}
.geo-divider::before,
.geo-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: rgba(122, 128, 144, 0.30);
}

/* Stat Number */
.stat-number {
  font-family: 'Clash Display', sans-serif;
  font-weight: 900;
  font-size: 3.5rem;
  line-height: 1;
  color: #1A1F2E;
  letter-spacing: -0.03em;
}

/* FAQ Accordion */
.accordion-body {
  display: none;
  overflow: hidden;
}
.accordion-body.is-open {
  display: block;
}
.accordion-icon {
  transition: transform 200ms ease;
}
.accordion-item.is-open .accordion-icon {
  transform: rotate(45deg);
}

/* Image placeholder container */
.img-wrap {
  position: relative;
  overflow: hidden;
  background-color: #EDE9E0;
  border: 2px solid #1A1F2E;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vertical label */
.vertical-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7A8090;
}

/* Form inputs */
.form-input {
  width: 100%;
  background-color: #F5F1EB;
  border: 2px solid rgba(26, 31, 46, 0.20);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-family: 'Satoshi', sans-serif;
  color: #1A1F2E;
  transition: border-color 150ms ease;
  outline: none;
  appearance: none;
}
.form-input:focus {
  border-color: #1E40AF;
  outline: none;
}
.form-input::placeholder {
  color: #7A8090;
}
textarea.form-input {
  resize: none;
}

/* CTA Button primary */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1A1F2E;
  color: #F5F1EB;
  padding: 0.875rem 2rem;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid #1A1F2E;
  box-shadow: 4px 4px 0px #1E40AF;
  cursor: pointer;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background-color: #1E40AF;
  border-color: #1E40AF;
  box-shadow: 6px 6px 0px #1A1F2E;
  color: #ffffff;
}

/* CTA Button secondary */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #1A1F2E;
  padding: 0.875rem 2rem;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid #1A1F2E;
  cursor: pointer;
  transition: all 150ms ease;
}
.btn-secondary:hover {
  background-color: #1A1F2E;
  color: #F5F1EB;
  box-shadow: 4px 4px 0px #1E40AF;
}

/* Bento grid card */
.bento-card {
  border: 2px solid #1A1F2E;
  background-color: #F5F1EB;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow 150ms ease;
}
.bento-card:hover {
  box-shadow: 4px 4px 0px #1E40AF;
}
.bento-card-dark {
  border: 2px solid #1A1F2E;
  background-color: #1A1F2E;
  color: #F5F1EB;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.bento-card-accent {
  border: 2px solid #1E40AF;
  background-color: #1E40AF;
  color: #ffffff;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

/* Process timeline */
.process-step {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 2rem;
  position: relative;
}
.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: 0;
  width: 1px;
  background-color: rgba(122, 128, 144, 0.30);
}
.process-num {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid #1A1F2E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Clash Display', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #1A1F2E;
  background-color: #F5F1EB;
  flex-shrink: 0;
}

/* ── Error Page ─────────────────────────────────────────────── */
.error-code {
  font-family: 'Clash Display', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 7rem;
  letter-spacing: -0.04em;
  color: #1A1F2E;
  line-height: 1;
}
@media (min-width: 768px) {
  .error-code { font-size: 11rem; }
}
@media (min-width: 1024px) {
  .error-code { font-size: 14rem; }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  header, footer, .cookie-banner { display: none !important; }
}

/* ── Accessibility ──────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid #1E40AF;
  outline-offset: 2px;
}