/* Rethabile Resource Ventures — static stylesheet (no build step required) */

/* ---------- Reset (matches Tailwind preflight) ---------- */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ol, ul { list-style: none; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; }
button { cursor: pointer; }
textarea { resize: vertical; }
em { font-style: italic; }

/* ---------- Design tokens ---------- */
:root {
  --radius: 0.25rem;
  --background: oklch(0.975 0.008 80);
  --foreground: oklch(0.2 0.02 50);
  --card: oklch(0.995 0.004 80);
  --primary: oklch(0.62 0.15 52);
  --primary-foreground: oklch(0.99 0.005 80);
  --secondary: oklch(0.22 0.02 50);
  --secondary-foreground: oklch(0.96 0.01 80);
  --muted: oklch(0.93 0.012 75);
  --muted-foreground: oklch(0.48 0.02 55);
  --border: oklch(0.87 0.015 70);
  --input: oklch(0.87 0.015 70);
  --ink: oklch(0.17 0.015 50);
  --ink-foreground: oklch(0.95 0.012 80);
  --digital: oklch(0.7 0.12 195);
  --math: oklch(0.45 0.16 260);
  --math-sun: oklch(0.85 0.16 90);
  --math-soft: oklch(0.96 0.03 255);
  --scrim: linear-gradient(180deg, oklch(0.15 0.015 50 / 0.2), oklch(0.15 0.015 50 / 0.85));
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Manrope", system-ui, sans-serif;
  --font-round: "Baloo 2", "Manrope", sans-serif;
}

body { font-family: var(--font-sans); background-color: var(--background); color: var(--foreground); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
.theme-math h1, .theme-math h2, .theme-math h3 { font-family: var(--font-round); letter-spacing: -0.01em; }

/* ---------- Shared utilities ---------- */
.eyebrow { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.text-primary { color: var(--primary); }
.muted { color: var(--muted-foreground); }
.display { font-family: var(--font-display); }
.container { max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }
.container-6 { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }
.semibold { font-weight: 600; }
.h-xl { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; }
.min-h-screen { min-height: 100vh; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom-width: 1px; border-color: oklch(0.87 0.015 70 / 0.6); background-color: oklch(0.975 0.008 80 / 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-header .inner { max-width: 80rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.brand .text { line-height: 1.25; }
.brand .name { display: block; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.brand .sub { display: block; font-size: 0.6rem; color: var(--muted-foreground); }
.nav { display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.nav a { color: var(--muted-foreground); transition: color 0.15s; }
.nav a:hover { color: var(--foreground); }
.nav a.active { color: var(--primary); }

/* ---------- Footer ---------- */
.site-footer { background-color: var(--ink); color: var(--ink-foreground); }
.site-footer .grid { display: grid; gap: 2.5rem; max-width: 80rem; margin-inline: auto; padding: 3.5rem 1.5rem; }
.site-footer .logo-row { display: flex; align-items: center; gap: 0.75rem; }
.site-footer .logo-box { display: grid; place-items: center; width: 3rem; height: 3rem; background-color: var(--ink-foreground); padding: 0.25rem; }
.site-footer .logo-box img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.site-footer .company { font-family: var(--font-display); font-size: 1.5rem; line-height: 2rem; }
.site-footer .tag { margin-top: 0.75rem; max-width: 20rem; font-size: 0.875rem; line-height: 1.25rem; color: oklch(0.95 0.012 80 / 0.7); }
.site-footer .col { font-size: 0.875rem; line-height: 1.25rem; }
.site-footer .col .eyebrow { margin-bottom: 0.75rem; color: var(--primary); }
.site-footer ul { color: oklch(0.95 0.012 80 / 0.8); }
.site-footer li + li { margin-top: 0.5rem; }
.site-footer a:hover { color: var(--primary); }
.site-footer .break-all { word-break: break-all; }
.site-footer .copy { border-top-width: 1px; border-color: oklch(0.95 0.012 80 / 0.1); padding-block: 1.25rem; text-align: center; font-size: 0.75rem; line-height: 1rem; color: oklch(0.95 0.012 80 / 0.5); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--ink); color: var(--ink-foreground); }
.hero > img.bg { position: absolute; inset: 0; z-index: -20; width: 100%; height: 100%; object-fit: cover; }
.hero > img.bg.dim { opacity: 0.7; }
.hero > .scrim { position: absolute; inset: 0; z-index: -10; background-image: var(--scrim); }
.hero .content { max-width: 80rem; margin-inline: auto; padding: 8rem 1.5rem 5rem; }
.hero.home .content { padding: 11rem 1.5rem 7rem; }
.hero h1 { margin-top: 1rem; max-width: 48rem; font-size: 2.25rem; line-height: 1.05; font-weight: 600; }
.hero.home h1 { margin-top: 1.25rem; max-width: 56rem; font-size: 3rem; line-height: 1.02; }
.hero p.intro { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.75rem; color: oklch(0.95 0.012 80 / 0.8); }
.hero .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero.home .actions { margin-top: 2.5rem; }
.hero .eyebrow.line { display: flex; align-items: center; gap: 0.75rem; }
.hero .eyebrow.line span { display: block; height: 1px; width: 2.5rem; background-color: var(--primary); }

.btn { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; transition: background-color 0.15s, color 0.15s; }
.btn-primary { background-color: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background-color: oklch(0.62 0.15 52 / 0.9); }
.btn-ghost { border: 1px solid oklch(0.95 0.012 80 / 0.4); color: var(--ink-foreground); }
.btn-ghost:hover { background-color: oklch(0.95 0.012 80 / 0.1); }

/* ---------- Sections ---------- */
.section { max-width: 80rem; margin-inline: auto; padding: 6rem 1.5rem; }
.section h2 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; }
.section .eyebrow + h2 { margin-top: 0.75rem; }
.section h2.wide { max-width: 42rem; }

.division-grid { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
.division-card { display: flex; flex-direction: column; overflow: hidden; background-color: var(--card); box-shadow: 0 0 0 1px var(--border), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); transition: transform 0.5s, box-shadow 0.5s; }
.division-card:hover { transform: translateY(-0.375rem); box-shadow: 0 0 0 1px oklch(0.62 0.15 52 / 0.4), 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.division-card .pic { aspect-ratio: 4 / 3; overflow: hidden; }
.division-card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.division-card:hover .pic img { transform: scale(1.05); }
.division-card .body { display: flex; flex: 1; flex-direction: column; padding: 1.75rem; }
.division-card .num { font-family: var(--font-display); font-size: 0.875rem; line-height: 1.25rem; color: var(--primary); }
.division-card h3 { margin-top: 0.5rem; font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
.division-card p { margin-top: 0.75rem; flex: 1; color: var(--muted-foreground); }
.division-card .more { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--primary); }

.band-secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
.band-secondary .grid2 { display: grid; gap: 3rem; max-width: 80rem; margin-inline: auto; padding: 6rem 1.5rem; }
.band-secondary h2 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; }
.band-secondary .copy > * + * { margin-top: 1.25rem; }
.band-secondary .copy { color: oklch(0.96 0.01 80 / 0.8); }
.band-secondary .copy a { display: inline-block; padding-top: 0.5rem; font-weight: 600; color: var(--primary); }

.band-muted { background-color: var(--muted); }
.band-ink { background-color: var(--ink); color: var(--ink-foreground); }

.two-col { display: grid; gap: 3rem; }
.lead { margin-top: 1rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.375; }

.tile-grid { margin-top: 3rem; display: grid; gap: 1px; background-color: var(--border); }
.tile { background-color: var(--background); padding: 2rem; }
.tile h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
.tile p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.tile .n { font-family: var(--font-display); font-size: 0.875rem; line-height: 1.25rem; color: var(--primary); }
.tile .n + h3 { margin-top: 0.5rem; }
.tile .n ~ p { margin-top: 0.5rem; }

.card-grid { margin-top: 3rem; display: grid; gap: 1.5rem; }
.service { border-left-width: 2px; border-color: var(--digital); background-color: var(--card); padding: 1.75rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.service h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
.service p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

.work { display: grid; align-items: center; gap: 2.5rem; max-width: 80rem; margin-inline: auto; padding: 5rem 1.5rem; }
.work h3 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; }
.work p { margin-top: 0.75rem; color: var(--muted-foreground); }
.work a { margin-top: 1rem; display: inline-block; font-weight: 600; color: var(--primary); }

.procure { display: grid; gap: 3rem; max-width: 80rem; margin-inline: auto; padding: 6rem 1.5rem; }
.procure h2 { margin-top: 0.75rem; font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; }
.procure .lede { margin-top: 1.25rem; color: oklch(0.95 0.012 80 / 0.75); }
.steps > li + li { margin-top: 1rem; }
.steps li { display: flex; align-items: center; gap: 1.25rem; border-bottom-width: 1px; border-color: oklch(0.95 0.012 80 / 0.15); padding-bottom: 1rem; }
.steps .no { font-family: var(--font-display); font-size: 1.875rem; line-height: 2.25rem; color: var(--primary); }
.steps .txt { font-size: 1.125rem; line-height: 1.75rem; }

/* ---------- Enquiry band ---------- */
.enquiry { background-color: var(--primary); color: var(--primary-foreground); }
.enquiry .inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.5rem; max-width: 80rem; margin-inline: auto; padding: 4rem 1.5rem; }
.enquiry h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; }
.enquiry p { margin-top: 0.5rem; max-width: 36rem; color: oklch(0.99 0.005 80 / 0.85); }
.enquiry .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.enquiry .actions a { padding: 0.75rem 1.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.enquiry .a-ink { background-color: var(--ink); color: var(--ink-foreground); }
.enquiry .a-ink:hover { background-color: oklch(0.17 0.015 50 / 0.85); }
.enquiry .a-line { border: 1px solid oklch(0.99 0.005 80 / 0.6); }
.enquiry .a-line:hover { background-color: oklch(0.99 0.005 80 / 0.1); }

/* ---------- Contact ---------- */
.contact { display: grid; gap: 4rem; max-width: 80rem; margin-inline: auto; padding: 6rem 1.5rem; }
.contact h1 { margin-top: 1rem; font-size: 3rem; line-height: 1; font-weight: 600; }
.contact .intro { margin-top: 1.5rem; max-width: 28rem; color: var(--muted-foreground); }
.contact dl { margin-top: 2.5rem; }
.contact dl > div + div { margin-top: 1.5rem; }
.contact dt { color: var(--muted-foreground); }
.contact dd { margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.75rem; }
.contact dd.lg { font-size: 1.5rem; line-height: 2rem; }
.contact dd.break-all { word-break: break-all; }
.contact form { background-color: var(--muted); padding: 2rem; }
.contact form > * + * { margin-top: 1rem; }
.contact label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.field { width: 100%; margin-top: 0.5rem; border: 1px solid var(--input); background-color: var(--card); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.25rem; outline: none; }
.field:focus { border-color: var(--primary); }
.contact button { background-color: var(--primary); padding: 0.75rem 1.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--primary-foreground); }
.contact button:hover { background-color: oklch(0.62 0.15 52 / 0.9); }

/* ---------- 404 ---------- */
.nf { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding-inline: 1rem; }
.nf .box { max-width: 28rem; text-align: center; }
.nf h1 { font-family: var(--font-sans); letter-spacing: normal; font-size: 4.5rem; line-height: 1; font-weight: 700; }
.nf h2 { margin-top: 1rem; font-family: var(--font-sans); letter-spacing: normal; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
.nf p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.nf a { display: inline-flex; margin-top: 1.5rem; align-items: center; justify-content: center; border-radius: 0.375rem; background-color: var(--primary); padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--primary-foreground); }
.nf a:hover { background-color: oklch(0.62 0.15 52 / 0.9); }

/* ---------- Infinity Math (own theme) ---------- */
.theme-math { background-color: var(--math-soft); color: var(--foreground); min-height: 100vh; }
.theme-math .m-header { max-width: 72rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; }
.theme-math .m-logo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-round); font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: var(--math); }
.theme-math .m-logo .dot { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background-color: var(--math); color: var(--math-sun); }
.theme-math .m-nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.theme-math .m-nav .back { color: var(--muted-foreground); }
.theme-math .m-nav .back:hover { color: var(--math); }
.pill { border-radius: 9999px; background-color: var(--math); color: var(--primary-foreground); }
.pill:hover { background-color: oklch(0.45 0.16 260 / 0.9); }
.m-nav .pill { padding: 0.625rem 1.25rem; }

.m-hero { display: grid; align-items: center; gap: 3rem; max-width: 72rem; margin-inline: auto; padding: 3.5rem 1.5rem; }
.m-badge { display: inline; border-radius: 9999px; background-color: var(--math-sun); padding: 0.375rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: var(--foreground); }
.m-hero h1 { margin-top: 1.5rem; font-size: 3rem; line-height: 1.05; font-weight: 800; color: var(--math); }
.m-hero .intro { margin-top: 1.25rem; max-width: 28rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--muted-foreground); }
.m-hero .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.m-hero .actions .pill { padding: 0.875rem 1.75rem; font-weight: 700; }
.m-hero .actions .outline { border-radius: 9999px; border: 2px solid var(--math); padding: 0.875rem 1.75rem; font-weight: 700; color: var(--math); }
.m-hero .actions .outline:hover { background-color: oklch(0.45 0.16 260 / 0.05); }
.m-hero .photo { position: relative; }
.m-hero .photo .back-card { position: absolute; right: -1rem; top: -1rem; width: 100%; height: 100%; border-radius: 2rem; background-color: var(--math-sun); }
.m-hero .photo img { position: relative; border-radius: 2rem; object-fit: cover; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }

.m-section { max-width: 72rem; margin-inline: auto; padding: 4rem 1.5rem; }
.m-section h2 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; color: var(--math); }
.m-offers { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.offer { border-radius: 1rem; background-color: var(--card); padding: 1.75rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); transition: transform 0.15s, box-shadow 0.15s; }
.offer:hover { transform: translateY(-0.25rem); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.offer .icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.75rem; background-color: var(--math-soft); font-family: var(--font-round); font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--math); }
.offer h3 { margin-top: 1.25rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
.offer p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

.m-pay { display: grid; gap: 2rem; border-radius: 2rem; background-color: var(--card); padding: 2rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.m-pay p { margin-top: 0.75rem; color: var(--muted-foreground); }
.m-pay dl { display: grid; gap: 1rem; border-radius: 1rem; background-color: var(--math-soft); padding: 1.5rem; font-weight: 600; }
.m-pay dl > div { display: flex; justify-content: space-between; gap: 1rem; }
.m-pay dt { color: var(--muted-foreground); }

.m-cta-wrap { max-width: 72rem; margin-inline: auto; padding: 0 1.5rem 5rem; }
.m-cta { border-radius: 2rem; background-color: var(--math-sun); padding: 2.5rem; text-align: center; }
.m-cta h2 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; color: var(--math); }
.m-cta p { margin: 0.75rem auto 0; max-width: 28rem; }
.m-cta a { margin-top: 1.75rem; display: inline-block; padding: 1rem 2rem; font-weight: 700; }
.m-footer { padding-block: 2rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.m-footer a { font-weight: 600; color: var(--math); }

/* ---------- Responsive ---------- */
@media (min-width: 40rem) {
  .m-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .site-footer .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero .content { padding: 11rem 1.5rem 7rem; }
  .hero h1 { font-size: 3.75rem; line-height: 1; }
  .hero.home .content { padding: 16rem 1.5rem 10rem; }
  .hero.home h1 { font-size: 4.5rem; line-height: 1; }
  .section h2.big, .band-secondary h2 { font-size: 3rem; line-height: 1; }
  .division-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band-secondary .grid2, .two-col, .procure, .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work { grid-template-columns: 1fr 2fr; }
  .enquiry .inner { flex-direction: row; align-items: center; }
  .enquiry h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .m-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 5rem; }
  .m-hero h1 { font-size: 3.75rem; line-height: 1.05; }
  .m-pay { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3rem; }
  .m-cta { padding: 3.5rem; }
}
@media (min-width: 64rem) {
  .m-offers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}