/* Unlayered rules intentionally override Tailwind utilities only after opt-in. */
html[data-omarchy] {
    --oma-surface: color-mix(in srgb, var(--oma-background) 96%, var(--oma-foreground));
    --oma-border: color-mix(in srgb, var(--oma-background) 65%, var(--oma-foreground));
}
html[data-omarchy] body,
html[data-omarchy] section,
html[data-omarchy] .site-nav,
html[data-omarchy] footer { background: var(--oma-background); color: var(--oma-foreground); }
html[data-omarchy] :is(.bg-white, input, textarea) { background: var(--oma-surface); color: var(--oma-foreground); }
html[data-omarchy] :is([class*="text-gray-"], .text-sky-950, .text-white) { color: var(--oma-foreground); }
html[data-omarchy] :is(.text-sky-700, .custom-list li::before) { color: var(--oma-accent); }
html[data-omarchy] :is([class*="border-gray-"], [class*="border-sky-"]) { border-color: var(--oma-border); }
html[data-omarchy] :is(.bg-sky-600, button[type="submit"]) { background: var(--oma-accent); color: var(--oma-on-accent); }
html[data-omarchy] :is(.bg-sky-600, button[type="submit"]) :is(span, svg) { color: inherit; }
html[data-omarchy] :is(.bg-sky-600, button[type="submit"]):hover { filter: brightness(.9); }
html[data-omarchy] a:not(.bg-sky-600):hover { color: var(--oma-accent); }
html[data-omarchy] :is(a, input, textarea, button, select):focus-visible { outline: 2px solid var(--oma-accent); outline-offset: 4px; box-shadow: none; }
html[data-omarchy] .field-invalid { border-color: var(--oma-error); }
html[data-omarchy] .text-red-300 { color: var(--oma-error); }
html[data-omarchy] .text-green-400 { color: var(--oma-success); }
html[data-omarchy] ::selection { background: var(--oma-accent); color: var(--oma-on-accent); }
/* Switch foreground/background together, avoiding unreadable mid-transition colours. */
html[data-omarchy] .site-nav { transition: none; }
html[data-omarchy] .transition { transition-property: transform, opacity; }
html[data-omarchy] :is(.hero-background, .partnership-background-wrap) { opacity: .28; }
html[data-omarchy] .logo-container { position: relative; }
html[data-omarchy] .logo-container img { visibility: hidden; }
html[data-omarchy] .logo-container::after { content: ''; position: absolute; inset: 0; background: var(--oma-foreground); mask: url('../logo-horizontal-white-pty-ltd.svg') left center / contain no-repeat; }
.omarchy-controls { text-align: center; margin-top: 1.5rem; font: 12px ui-monospace, monospace; }
.omarchy-controls select { background: var(--oma-background); color: var(--oma-foreground); border: 1px solid var(--oma-border); padding: .5rem; }

/* The fuller treatment borrows Omarchy's terminal typography and tiled windows. */
@font-face {
    font-family: 'Timson Mono';
    src: local('JetBrains Mono Regular'), url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
html[data-omarchy="desktop"] body { font-family: 'Timson Mono', monospace; counter-reset: section; }
html[data-omarchy="desktop"] .container { max-width: 1180px; }
html[data-omarchy="desktop"] .nav-link { font: inherit; font-size: .8rem; }
html[data-omarchy="desktop"] .site-nav { border-bottom: 1px solid var(--oma-border); box-shadow: none; }
html[data-omarchy="desktop"] .logo-container { height: 42px; }
html[data-omarchy="desktop"] section[id] { counter-increment: section; padding-block: 4rem; border-top: 1px solid var(--oma-border); }
html[data-omarchy="desktop"] :is(.rounded-lg, input, textarea, button) { border-radius: 0; }
html[data-omarchy="desktop"] :is(.shadow-md, .shadow-lg) { box-shadow: none; }
html[data-omarchy="desktop"] body > section:first-of-type { padding: 120px 24px 48px; }
html[data-omarchy="desktop"] body > section:first-of-type > .absolute { inset: 120px max(24px, calc((100% - 1180px) / 2)) 48px; overflow: hidden; }
html[data-omarchy="desktop"] .hero-background { object-position: right center; mask-image: linear-gradient(90deg, transparent, #000 85%); }
html[data-omarchy="desktop"] body > section:first-of-type > .container { text-align: left; padding: 3rem; border: 1px solid var(--oma-border); }
html[data-omarchy="desktop"] body > section:first-of-type > .container::before { content: 'TIMSON.TECH / SOFTWARE ENGINEERING'; display: block; color: var(--oma-accent); font-size: .7rem; letter-spacing: .1em; margin-bottom: 2rem; }
html[data-omarchy="desktop"] h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.22; letter-spacing: -.055em; max-width: 940px; font-weight: 400; text-wrap: balance; }
html[data-omarchy="desktop"] body > section:first-of-type p { margin-left: 0; max-width: 720px; font-size: .95rem; line-height: 1.85; }
html[data-omarchy="desktop"] .bg-sky-600 { display: inline-block; font-size: .8rem; font-weight: 600; }
html[data-omarchy="desktop"] body > section:first-of-type .bg-sky-600::after { content: ' ↗'; margin-left: 1rem; }
html[data-omarchy="desktop"] h2 { display: flex; align-items: baseline; gap: 1rem; text-align: left; font-size: 1.4rem; line-height: 1.5; font-weight: 400; letter-spacing: -.04em; margin-bottom: 2rem; }
html[data-omarchy="desktop"] h2::before { content: counter(section, decimal-leading-zero) ' /'; color: var(--oma-accent); font-size: .75rem; letter-spacing: 0; white-space: nowrap; }
html[data-omarchy="desktop"] h3 { font-size: 1rem; line-height: 1.6; font-weight: 400; }
html[data-omarchy="desktop"] :is(#services, #projects) .grid { gap: 1rem; }
html[data-omarchy="desktop"] #services .grid > div::before { content: 'DELIVERY'; display: block; padding: .7rem 1.5rem; border-bottom: 1px solid var(--oma-border); color: var(--oma-accent); font-size: .65rem; letter-spacing: .12em; }
html[data-omarchy="desktop"] #services .grid > div:nth-child(2)::before { content: 'QUALITY'; }
html[data-omarchy="desktop"] #services .grid > div:nth-child(3)::before { content: 'CONSULTANCY'; }
html[data-omarchy="desktop"] #services img { display: none; }
html[data-omarchy="desktop"] :is(#services li, #projects p, #approach p, #partnership p) { font-size: .9rem; line-height: 1.85; }
html[data-omarchy="desktop"] #services h3 { min-height: 3.2em; margin-bottom: 1rem; }
html[data-omarchy="desktop"] #projects > .container > p { text-align: left; margin-left: 0; margin-bottom: 2rem; max-width: 780px; }
html[data-omarchy="desktop"] #projects a { position: relative; padding-bottom: 3rem; }
html[data-omarchy="desktop"] #projects a::after { content: '↗'; position: absolute; bottom: 1rem; right: 1.5rem; color: var(--oma-accent); }
html[data-omarchy="desktop"] #projects .uppercase { font-size: .65rem; font-weight: 400; letter-spacing: .1em; }
html[data-omarchy="desktop"] #projects a:hover { transform: none; border-color: var(--oma-accent); }
html[data-omarchy="desktop"] #partnership .container { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; }
html[data-omarchy="desktop"] #partnership .text-center { text-align: left; }
html[data-omarchy="desktop"] #partnership h2 { margin: 0; }
html[data-omarchy="desktop"] #approach .max-w-6xl { max-width: none; }
html[data-omarchy="desktop"] #approach .grid { gap: 1rem; }
html[data-omarchy="desktop"] .approach-card { min-height: 0; padding: 2rem; }
html[data-omarchy="desktop"] .approach-image { min-height: 0; max-height: 280px; border: 1px solid var(--oma-border); }
html[data-omarchy="desktop"] #contact .container { max-width: 1180px; display: grid; grid-template-columns: 1fr 1.5fr; column-gap: 3rem; grid-template-rows: auto 1fr; }
html[data-omarchy="desktop"] #contact h2 { grid-column: 1; grid-row: 1; margin-bottom: 1.5rem; }
html[data-omarchy="desktop"] #contact > .container > p { grid-column: 1; grid-row: 2; text-align: left; font-size: .85rem; line-height: 1.85; margin-left: 2.7rem; max-width: 320px; }
html[data-omarchy="desktop"] #contact form { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: .75rem; padding: 2rem; border: 1px solid var(--oma-border); background: var(--oma-surface); }
html[data-omarchy="desktop"] #contact form > * { margin-block: 0; }
html[data-omarchy="desktop"] #contact :is(#success-message, #error-message) { grid-column: 2; }
html[data-omarchy="desktop"] #contact :is(input, textarea) { background: var(--oma-background); font-size: .9rem; }
html[data-omarchy="desktop"] #contact label { font-size: .75rem; }
html[data-omarchy="desktop"] footer { border-color: var(--oma-border); font-size: .7rem; }
@media (min-width: 1200px) {
    html[data-omarchy="desktop"] #services h3 { min-height: 0; }
}
@media (max-width: 900px) {
    html[data-omarchy="desktop"] .desktop-nav { gap: .8rem; }
    html[data-omarchy="desktop"] .nav-link { font-size: .7rem; }
    html[data-omarchy="desktop"] #services .grid { grid-template-columns: 1fr; }
    html[data-omarchy="desktop"] #services h3 { min-height: 0; }
}
@media (max-width: 767px) {
    html[data-omarchy="desktop"] body > section:first-of-type { padding: 96px 16px 32px; }
    html[data-omarchy="desktop"] body > section:first-of-type > .absolute { inset: 96px 16px 32px; }
    html[data-omarchy="desktop"] body > section:first-of-type > .container { padding: 1.5rem; }
    html[data-omarchy="desktop"] body > section:first-of-type > .container::before { font-size: .6rem; line-height: 1.8; margin-bottom: 1.5rem; }
    html[data-omarchy="desktop"] h1 { font-size: clamp(1.65rem, 6.7vw, 2.5rem); letter-spacing: -.05em; }
    html[data-omarchy="desktop"] body > section:first-of-type p { font-size: .8rem; }
    html[data-omarchy="desktop"] .logo-container { max-width: 190px; height: 34px; }
    html[data-omarchy="desktop"] section[id] { padding: 2.5rem 16px; }
    html[data-omarchy="desktop"] h2 { font-size: 1.15rem; gap: .7rem; }
    html[data-omarchy="desktop"] :is(#partnership, #contact) .container { display: block; }
    html[data-omarchy="desktop"] #partnership h2 { margin-bottom: 1.5rem; }
    html[data-omarchy="desktop"] #contact > .container > p { margin-left: 0; margin-bottom: 1.5rem; }
    html[data-omarchy="desktop"] #contact form { padding: 1.25rem; }
    html[data-omarchy="desktop"] .approach-card { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-omarchy] * { transition: none !important; scroll-behavior: auto !important; }
}