/* LIRTIM gradnja — site styles */
/* Self-hosted fonts (variable weight, latin + latin-ext for č ć đ š ž) */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/archivo-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/archivo-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --background: hsl(38 30% 96%);
  --foreground: hsl(20 10% 11%);
  --charcoal: hsl(20 10% 11%);
  --charcoal-rgb: 31 28 25;
  --offwhite: hsl(38 30% 96%);
  --muted-foreground: hsl(30 5% 38%);
  --border: hsl(30 6% 86%);
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv01";
  line-height: 1.5;
}
main { flex: 1; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
svg.icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Layout ---------- */
.container-px { padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 640px) { .container-px { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .container-px { padding-left: 3.5rem; padding-right: 3.5rem; } }

.section { padding: 5rem 0; }
@media (min-width: 1024px) { .section { padding: 8rem 0; } }
.section--bordered { border-top: 1px solid var(--border); }
.section--dark { background: var(--charcoal); color: var(--offwhite); }
.section--light { background: var(--background); }

.grid12 { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-7-start-6 { grid-column: 6 / span 7; }
}
.items-center { align-items: center; }
.items-start { align-items: start; }

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-weight: 700;
  line-height: .98;
}
.eyebrow, .eyebrow-light {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--muted-foreground);
}
.eyebrow-light { color: rgb(255 255 255 / .6); }
.index-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .2em;
  color: var(--muted-foreground);
}
.lead { font-size: 1rem; line-height: 1.625; color: rgb(var(--charcoal-rgb) / .8); max-width: 36rem; }
@media (min-width: 1024px) { .lead { font-size: 1.125rem; } }
.prose { display: grid; gap: 1.25rem; font-size: 1rem; line-height: 1.625; color: rgb(var(--charcoal-rgb) / .85); }
@media (min-width: 1024px) { .prose { font-size: 1.125rem; } }
.muted { color: var(--muted-foreground); }

/* Heading sizes */
.h-hero { font-size: 15vw; line-height: .92; margin-top: 1.25rem; color: #fff; }
@media (min-width: 640px) { .h-hero { font-size: 4.5rem; } }
@media (min-width: 1024px) { .h-hero { font-size: 6rem; } }
@media (min-width: 1280px) { .h-hero { font-size: 8.5rem; } }

.h-xl { font-size: 3rem; }
@media (min-width: 1024px) { .h-xl { font-size: 4.5rem; } }
.h-lg { font-size: 2.25rem; }
@media (min-width: 1024px) { .h-lg { font-size: 3.75rem; } }
.h-md { font-size: 1.875rem; }
@media (min-width: 1024px) { .h-md { font-size: 2.25rem; } }
.h-about { font-size: 8vw; max-width: 16ch; }
@media (min-width: 640px) { .h-about { font-size: 2.25rem; } }
@media (min-width: 1024px) { .h-about { font-size: 3rem; } }
@media (min-width: 1280px) { .h-about { font-size: 3.75rem; } }
.h-page { font-size: 13vw; line-height: .95; margin-top: 1.5rem; max-width: 14ch; }
@media (min-width: 640px) { .h-page { font-size: 3.75rem; } }
@media (min-width: 1024px) { .h-page { font-size: 4.5rem; } }
@media (min-width: 1280px) { .h-page { font-size: 6rem; } }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  border: 1px solid transparent;
  transition: color .15s, background-color .15s, border-color .15s;
}
.btn-solid-light { background: #fff; color: var(--charcoal); }
.btn-solid-light:hover { background: rgb(255 255 255 / .85); }
.btn-ghost-light { color: #fff; border-color: rgb(255 255 255 / .3); }
.btn-ghost-light:hover { background: #fff; color: var(--charcoal); }
.btn-solid-dark { background: var(--charcoal); color: var(--offwhite); }
.btn-solid-dark:hover { background: rgb(var(--charcoal-rgb) / .85); }
.btn-ghost-dark { color: var(--charcoal); border-color: rgb(var(--charcoal-rgb) / .25); }
.btn-ghost-dark:hover { background: var(--charcoal); color: var(--offwhite); }
.btn-block { width: 100%; }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--charcoal);
  transition: gap .2s;
}
.link-underline:hover, .group:hover .link-underline { gap: .75rem; }

.hairline { height: 1px; width: 100%; background: var(--border); }
.hairline-light { height: 1px; width: 100%; background: rgb(255 255 255 / .15); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgb(var(--charcoal-rgb) / .95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgb(255 255 255 / .1);
  transition: background-color .5s, border-color .5s;
}
.site-header.is-transparent { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.is-transparent.menu-open { background: var(--charcoal); }
.header-bar { height: 5rem; display: flex; align-items: center; justify-content: space-between; }
.logo { display: block; height: 2.6rem; width: auto; color: var(--offwhite); }
.nav-desktop, .header-ctas { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; align-items: center; gap: 2.25rem; }
  .header-ctas { display: flex; align-items: center; gap: .75rem; }
  .menu-toggle, .nav-mobile { display: none !important; }
}
.nav-link {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgb(255 255 255 / .7);
  transition: color .15s;
}
.nav-link:hover, .nav-link.active { color: #fff; }
.menu-toggle { color: var(--offwhite); padding: .5rem; margin-right: -.5rem; display: inline-flex; }
.menu-toggle svg { width: 24px; height: 24px; }
.nav-mobile { display: none; background: var(--charcoal); border-top: 1px solid rgb(255 255 255 / .1); }
.nav-mobile.open { display: block; }
.nav-mobile-inner { padding-top: 1.5rem; padding-bottom: 1.5rem; display: flex; flex-direction: column; gap: .25rem; }
.nav-mobile .nav-link { padding: .75rem 0; font-size: .875rem; border-bottom: 1px solid rgb(255 255 255 / .1); }
.nav-mobile-ctas { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.25rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: var(--offwhite); }
.footer-inner { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 1024px) { .footer-inner { padding-top: 5rem; padding-bottom: 5rem; } }
.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .footer-grid > :nth-child(1) { grid-column: span 5; }
  .footer-grid > :nth-child(2) { grid-column: span 3; }
  .footer-grid > :nth-child(3) { grid-column: span 4; }
}
.footer-about { margin-top: 1.5rem; max-width: 24rem; font-size: .875rem; line-height: 1.625; color: rgb(255 255 255 / .6); }
.footer-address { margin-top: 2rem; display: grid; gap: .25rem; font-size: .875rem; color: rgb(255 255 255 / .75); }
.footer-contact { display: grid; gap: .5rem; font-size: .875rem; color: rgb(255 255 255 / .8); }
.footer-contact a:hover, .footer-nav a:hover { color: #fff; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; font-size: .875rem; }
.footer-nav a { color: rgb(255 255 255 / .7); transition: color .15s; }
.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(255 255 255 / .1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .28em;
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.mb-5 { margin-bottom: 1.25rem; }

/* ---------- Home hero ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--charcoal); }
.hero-img, .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-img { transform: scale(1.12); transition: transform 9s ease-out; }
.hero-img.loaded { transform: scale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--charcoal), rgb(var(--charcoal-rgb) / .35), rgb(var(--charcoal-rgb) / .55)); }
.hero-content { position: relative; z-index: 10; min-height: 100svh; display: flex; flex-direction: column; }
.hero-main { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 9rem; padding-bottom: 3rem; }
.hero-lines { margin-top: 1.75rem; max-width: 36rem; display: grid; gap: .375rem; }
.hero-lines p { font-size: 1.125rem; line-height: 1.375; color: rgb(255 255 255 / .9); }
@media (min-width: 1024px) { .hero-lines p { font-size: 1.25rem; } }
.hero-lines .since { margin-top: .75rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .2em; color: rgb(255 255 255 / .6); }
.btn-row { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-strip { border-top: 1px solid rgb(255 255 255 / .15); }
.hero-strip-grid { display: grid; }
@media (min-width: 640px) { .hero-strip-grid { grid-template-columns: repeat(3, 1fr); } }
.strip-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid rgb(255 255 255 / .15); }
.strip-item:last-child { border-bottom: 0; }
@media (min-width: 640px) {
  .strip-item { padding: 1.75rem 0; border-bottom: 0; }
  .strip-item + .strip-item { border-left: 1px solid rgb(255 255 255 / .15); padding-left: 2rem; }
}
.strip-n { font-family: var(--font-display); font-size: .875rem; font-weight: 700; color: rgb(255 255 255 / .4); }
.strip-label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .875rem; color: #fff; }
.strip-note { margin-top: .25rem; font-size: 10px; text-transform: uppercase; letter-spacing: .22em; color: rgb(255 255 255 / .45); }

/* ---------- Media ---------- */
.img-frame { overflow: hidden; }
.img-frame img { width: 100%; object-fit: cover; }
.zoomable img { transition: transform 1.2s ease-out; }
.zoomable:hover img, .group:hover .zoomable img { transform: scale(1.04); }
.h-420 { height: 420px; }
.h-service { height: 300px; }
@media (min-width: 640px) { .h-service { height: 420px; } }
@media (min-width: 1024px) { .h-service { height: 520px; } }
.h-service-lg { height: 300px; }
@media (min-width: 640px) { .h-service-lg { height: 440px; } }
@media (min-width: 1024px) { .h-service-lg { height: 560px; } }
.h-project-row { height: 260px; }
@media (min-width: 640px) { .h-project-row { height: 380px; } }
@media (min-width: 1024px) { .h-project-row { height: 460px; } }
.h-project-card { height: 300px; }
@media (min-width: 1024px) { .h-project-card { height: 420px; } }
.h-about-page { height: 360px; }
@media (min-width: 1024px) { .h-about-page { height: 480px; } }
.h-detail { height: 320px; }
@media (min-width: 640px) { .h-detail { height: 480px; } }
@media (min-width: 1024px) { .h-detail { height: 620px; } }
.h-gallery { height: 280px; }
@media (min-width: 1024px) { .h-gallery { height: 420px; } }

/* ---------- Home: about ---------- */
@media (min-width: 1024px) { .sticky-col { position: sticky; top: 8rem; } }
.mt-10 { margin-top: 2.5rem; }

/* ---------- Services ---------- */
.service-list { margin-top: 4rem; display: grid; gap: 5rem; }
@media (min-width: 1024px) { .service-list { margin-top: 6rem; gap: 7rem; } }
.service-row { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) {
  .service-row { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .service-row .service-text { padding-left: 1.5rem; }
  .service-row.reverse .img-frame { order: 2; }
  .service-row.reverse .service-text { order: 1; padding-left: 0; padding-right: 1.5rem; }
}
.service-text h2, .service-text h3 { margin-top: 1rem; }
.service-text p.lead { margin-top: 1.5rem; max-width: 28rem; }
.service-text .link-underline { margin-top: 2rem; }
.h-service-title { font-size: 3rem; }
@media (min-width: 1024px) { .h-service-title { font-size: 3.75rem; } }
.h-service-title-lg { font-size: 3rem; }
@media (min-width: 1024px) { .h-service-title-lg { font-size: 4.5rem; } }
.pages-list { display: grid; gap: 5rem; }
@media (min-width: 1024px) { .pages-list { gap: 8rem; } }

.standard-band { margin-top: 5rem; border-top: 1px solid var(--border); padding-top: 3rem; display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .standard-band { margin-top: 7rem; padding-top: 4rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .standard-band > :first-child { grid-column: span 4; }
  .standard-band > :last-child { grid-column: 6 / span 7; }
}
.standard-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .standard-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .standard-grid > :first-child { grid-column: span 4; }
  .standard-grid > :last-child { grid-column: 6 / span 7; }
}
.note { margin-top: 1.25rem; font-size: .875rem; color: var(--muted-foreground); }

/* ---------- Projects (home rows) ---------- */
.project-rows { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .project-rows { margin-top: 5rem; gap: 2rem; } }
.project-row { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 1024px) {
  .project-row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
  .project-row > :first-child { grid-column: span 7; }
  .project-row > :last-child { grid-column: span 5; }
}
.meta { margin: 1.5rem 0 0; display: grid; gap: .75rem; font-size: .875rem; }
.meta-row { display: flex; gap: 1rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.meta-row dt { width: 7rem; flex-shrink: 0; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.meta-row dd { color: var(--charcoal); }
.meta--compact { margin-top: 1rem; gap: .5rem; }
.meta--compact .meta-row { padding-top: .5rem; }
.meta--compact .meta-row dt { width: 6rem; }
.link-top { margin-top: 4rem; border-top: 1px solid var(--border); padding-top: 2.5rem; }
@media (min-width: 1024px) { .link-top { margin-top: 5rem; } }

/* Projects page grid */
.project-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .project-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.project-grid .group:hover .zoomable img { transform: scale(1.05); }

/* ---------- Dark grid cards (standards / company data) ---------- */
.line-grid { margin-bottom: 0; margin-top: 3.5rem; display: grid; border-top: 1px solid rgb(255 255 255 / .15); border-left: 1px solid rgb(255 255 255 / .15); }
@media (min-width: 640px) { .line-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .line-grid { margin-top: 5rem; } }
.line-grid > * { border-right: 1px solid rgb(255 255 255 / .15); border-bottom: 1px solid rgb(255 255 255 / .15); padding: 2rem; }
@media (min-width: 1024px) { .line-grid > * { padding: 2.5rem; } }
.line-grid .n { font-family: var(--font-display); font-weight: 700; font-size: .875rem; color: rgb(255 255 255 / .4); letter-spacing: .2em; }
.line-grid h3 { margin-top: 1rem; font-size: 1.5rem; color: #fff; }
@media (min-width: 1024px) { .line-grid h3 { font-size: 1.875rem; } }
.line-grid p.d { margin-top: 1rem; max-width: 24rem; font-size: .875rem; line-height: 1.625; color: rgb(255 255 255 / .65); }
@media (min-width: 1024px) { .line-grid p.d { font-size: 1rem; } }
.line-grid--facts { margin-top: 0; }
.line-grid--facts > * { padding: 1.5rem; }
@media (min-width: 1024px) { .line-grid--facts > * { padding: 2rem; } }
.fact-label { font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: rgb(255 255 255 / .45); margin-bottom: .5rem; }
.fact-value { font-size: 1.125rem; color: #fff; }
@media (min-width: 1024px) { .fact-value { font-size: 1.25rem; } }

/* ---------- References ---------- */
.refs { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .refs { margin-top: 5rem; grid-template-columns: repeat(3, 1fr); } }
.ref { border: 1px solid var(--border); padding: 2rem; height: 100%; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .ref { padding: 2.5rem; } }
.stars { display: flex; gap: .25rem; color: var(--charcoal); font-size: 1.125rem; }
.ref blockquote { margin-top: 1.5rem; flex: 1; line-height: 1.625; color: rgb(var(--charcoal-rgb) / .8); }
.ref figcaption { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.ref-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--charcoal); font-size: .875rem; }
.ref-role { margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 640px) { .logos { grid-template-columns: repeat(4, 1fr); } }
.logo-slot { height: 3.5rem; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: rgb(102 97 92 / .5); font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; text-align: center; }
.logos-note { margin-top: 1rem; font-size: .75rem; color: rgb(102 97 92 / .7); }

/* ---------- Careers banner ---------- */
.careers { position: relative; overflow: hidden; background: var(--charcoal); color: var(--offwhite); }
.careers .cover-img { opacity: .55; transform: scale(1.08); transition: transform 8s ease-out; }
.careers .cover-img.in { transform: scale(1); }
.careers-shade { position: absolute; inset: 0; background: linear-gradient(to right, var(--charcoal), rgb(var(--charcoal-rgb) / .7), rgb(var(--charcoal-rgb) / .3)); }
.careers-inner { position: relative; z-index: 10; padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 1024px) { .careers-inner { padding-top: 9rem; padding-bottom: 9rem; } }
.careers-inner .box { max-width: 42rem; }
.careers-sub { margin-top: 1.5rem; font-size: 1.125rem; color: rgb(255 255 255 / .8); }
@media (min-width: 1024px) { .careers-sub { font-size: 1.25rem; } }
.careers-text { margin-top: 2rem; max-width: 36rem; font-size: 1rem; line-height: 1.625; color: rgb(255 255 255 / .75); }
@media (min-width: 1024px) { .careers-text { font-size: 1.125rem; } }

/* Careers page hero */
.jobs-hero { position: relative; min-height: 80svh; overflow: hidden; background: var(--charcoal); color: var(--offwhite); }
.jobs-hero .cover-img { opacity: .6; }
.jobs-hero .hero-shade { background: linear-gradient(to top, var(--charcoal), rgb(var(--charcoal-rgb) / .5), rgb(var(--charcoal-rgb) / .4)); }
.jobs-hero-inner { position: relative; z-index: 10; min-height: 80svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 9rem; padding-bottom: 4rem; }
.h-jobs { font-size: 3.75rem; color: #fff; }
@media (min-width: 1024px) { .h-jobs { font-size: 6rem; } }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.cat-grid > li { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--charcoal); font-size: .875rem; }

/* ---------- Contact info & forms ---------- */
.info-list { margin-top: 2.5rem; display: grid; gap: 1rem; font-size: .875rem; }
.info-list > div + div { border-top: 1px solid var(--border); padding-top: 1rem; }
.info-list .eyebrow { margin-bottom: .5rem; display: flex; }
.info-list a:hover { text-decoration: underline; }
.info-list--lg { margin-top: 0; gap: 1.5rem; font-size: 1rem; }
.info-list--lg > div + div { padding-top: 1.25rem; }
.info-list--lg .big { font-size: 1.125rem; color: var(--charcoal); }

.form { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.form label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-foreground); margin-bottom: .25rem; }
.field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(var(--charcoal-rgb) / .2);
  border-radius: 0;
  padding: .75rem 0;
  font-size: .875rem;
  color: var(--charcoal);
  transition: border-color .15s;
}
.field::placeholder { color: rgb(102 97 92 / .7); }
.field:focus { outline: none; border-bottom-color: var(--charcoal); }
select.field { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2376706a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .25rem center; }
textarea.field { resize: vertical; }
.file { font-size: .875rem; color: var(--muted-foreground); }
.file::file-selector-button {
  margin-right: 1rem;
  padding: .5rem 1rem;
  border: 0;
  background: var(--charcoal);
  color: var(--offwhite);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  cursor: pointer;
}
.form-done { border: 1px solid rgb(var(--charcoal-rgb) / .15); padding: 2rem; }
@media (min-width: 1024px) { .form-done { padding: 2.5rem; } }
.form-done p.msg { margin-top: 1rem; font-size: 1.125rem; line-height: 1.625; color: var(--charcoal); max-width: 28rem; }
.form-done .btn { margin-top: 2rem; }
[hidden] { display: none !important; }

/* ---------- Page header (subpages) ---------- */
.page-head { padding-top: 8rem; padding-bottom: 4rem; }
@media (min-width: 1024px) { .page-head { padding-top: 10rem; padding-bottom: 6rem; } }
.page-head .lead { margin-top: 1.75rem; color: var(--muted-foreground); }
.page-head .hairline { margin-top: 3rem; }

.pull-quote { border-left: 2px solid var(--charcoal); padding-left: 1.5rem; max-width: 42rem; }
@media (min-width: 1024px) { .pull-quote { padding-left: 2rem; } }
.pull-quote p { font-size: 1.5rem; line-height: 1.25; color: var(--charcoal); }
@media (min-width: 1024px) { .pull-quote p { font-size: 2.25rem; } }

/* Project detail */
.detail-list { margin: 0; border-top: 1px solid var(--border); }
.detail-list > div { display: flex; gap: 1rem; border-bottom: 1px solid var(--border); padding: 1rem 0; }
.detail-list dt { width: 8rem; flex-shrink: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-foreground); }
.detail-list dd { font-size: .875rem; color: var(--charcoal); }
.gallery { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .gallery { gap: 2rem; } }
.next-band { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 640px) { .next-band { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(var(--ry, 24px)); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--rd, 0s); }
.reveal.in { opacity: 1; transform: none; }
.hero-anim { opacity: 0; transform: translateY(20px); animation: heroIn .8s var(--ease-out) forwards; animation-delay: var(--rd, 0s); }
@keyframes heroIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-anim { opacity: 1; transform: none; transition: none; animation: none; }
  .hero-img, .careers .cover-img { transform: none; transition: none; }
}
.no-js .reveal, .no-js .hero-anim { opacity: 1; transform: none; animation: none; }


/* ---------- SEO / semantics / accessibility additions ---------- */
dl, dd { margin: 0; }
address { font-style: normal; }
.meta-row dd { margin: 0; }
.hero h1 { margin: 0; }
.hero h1 > span { display: block; }
.hero h1 .eyebrow-light { display: flex; }
.strip-label { display: block; }
a.strip-label:hover { text-decoration: underline; text-underline-offset: 4px; }
.group, .project-row { color: inherit; }
a.group { display: block; }
a.project-row { display: grid; }
.logo-slot img { max-height: 2.5rem; width: auto; filter: grayscale(1); opacity: .7; }
.text-link { text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--charcoal); }
.footer-copy { color: rgb(255 255 255 / .5); }
.footer-copy a { text-decoration: underline; text-underline-offset: 3px; }
.footer-copy a:hover { color: #fff; }
.footer-since { color: rgb(255 255 255 / .8); }
.lead--light { color: rgb(255 255 255 / .75); }
.note--light { color: rgb(255 255 255 / .5); }
.h-apply { max-width: 16ch; }
@media (min-width: 1024px) { .h-apply { font-size: 3rem; } }

.band { padding: 5rem 0; }
@media (min-width: 1024px) { .band { padding: 7rem 0; } }
.page-body { padding-bottom: 6rem; }
@media (min-width: 1024px) { .page-body { padding-bottom: 8rem; } }
.about-body { padding-bottom: 5rem; }
.about-quote { margin-top: 4rem; }
@media (min-width: 1024px) { .about-body { padding-bottom: 8rem; } .about-quote { margin-top: 6rem; } }
.crumbs { padding-top: 8rem; }
.next-wrap { padding: 4rem 0; }
.next-link { color: #fff; }
.next-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.thanks { min-height: 70vh; }
.thanks .lead { color: rgb(var(--charcoal-rgb) / .8); }
.legal { max-width: 46rem; }
.legal h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.125rem; letter-spacing: .02em; color: var(--charcoal); margin-top: 1rem; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: #fff; color: var(--charcoal); padding: .75rem 1.25rem;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.field:focus-visible { outline: none; }

/* Forms */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: .75rem; align-items: flex-start; flex-wrap: wrap; }
.consent input { width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; accent-color: var(--charcoal); flex-shrink: 0; cursor: pointer; }
.form .consent label { flex: 1; margin: 0; font-size: .8125rem; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.5; color: rgb(var(--charcoal-rgb) / .8); cursor: pointer; }
.consent label a { text-decoration: underline; text-underline-offset: 3px; }
.consent .field-error { flex-basis: 100%; }
.field[aria-invalid="true"] { border-bottom-color: hsl(0 55% 45%); }
.field-error, .form-error { margin-top: .375rem; font-size: .8125rem; color: hsl(0 55% 40%); }
.form-error { margin: 0; font-weight: 600; }
.btn:disabled { opacity: .6; cursor: progress; }

/* Cookie banner */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--charcoal); color: var(--offwhite);
  border-top: 1px solid rgb(255 255 255 / .15);
  box-shadow: 0 -8px 30px rgb(0 0 0 / .25);
}
.cookie-inner { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.cookie-inner p { font-size: .875rem; line-height: 1.6; color: rgb(255 255 255 / .8); max-width: 52rem; }
.cookie-inner a { text-decoration: underline; text-underline-offset: 3px; color: #fff; }
.cookie-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.cookie-actions .btn { flex: 1; min-width: 8rem; }
@media (min-width: 768px) {
  .cookie-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  .cookie-actions { flex-shrink: 0; }
  .cookie-actions .btn { flex: none; }
}
.cookie-settings { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cookie-settings:hover { color: #fff; }
.hint { margin-top: .5rem; font-size: .75rem; color: var(--muted-foreground); }
.form-note { font-size: .8125rem; color: var(--muted-foreground); }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
.contact-hint { margin-top: -.75rem; }