/* Borbolla Group — public site
   Palette is taken from the plant floor the work happens on: polished concrete for the page,
   charcoal and blue from the logo, and the safety yellow of floor markings used exactly once,
   for the sequence rail. Numbers are monospace because tonnage and clearances belong on a
   nameplate, not in a headline face. */

:root {
  --ink: #23262b;
  --ink-soft: #5b626c;
  --blue: #1e56a8;
  --blue-deep: #143d78;
  --concrete: #eceeef;
  --paper: #ffffff;
  --line: #d6d9dc;
  --mark: #f5b301;

  --shell: min(1200px, 100% - 2.5rem);
  --step: clamp(1rem, 0.6rem + 1.6vw, 1.6rem);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--concrete);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.shell { width: var(--shell); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- type ---------- */

h1, h2, h3 { line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }
p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 .9rem;
  display: block;
}
.lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--ink-soft); max-width: 60ch; }
.muted { color: var(--ink-soft); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem;
  font: 600 .95rem/1 var(--font-sans);
  border: 2px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid { background: var(--blue); color: #fff; }
.btn--solid:hover { background: var(--blue-deep); }
.btn--ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--ondark { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ondark:hover { background: #fff; color: var(--ink); }

/* ---------- header ---------- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; padding: .8rem 0; }
.masthead__logo img { height: 38px; width: auto; }
.masthead nav { margin-left: auto; }
.masthead ul { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.masthead a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.masthead a:hover, .masthead a[aria-current="page"] { border-bottom-color: var(--blue); }
.masthead .btn { padding: .55rem 1rem; }
.masthead .btn:hover { border-bottom-color: transparent; }
/* `.masthead a` (0,1,1) out-ranks `.btn--solid` (0,1,0), so without these the header buttons
   get repainted charcoal-on-blue — unreadable, and it fails contrast. */
.masthead a.btn--solid, .masthead a.btn--solid:hover { color: #fff; }
.masthead a.btn--ghost { color: var(--ink); }
.masthead a.btn--ghost:hover { color: #fff; }
.btn--sm { padding: .5rem .95rem; font-size: .88rem; }

/* Account control: who you are, where to go, how to leave. */
.account { display: flex; align-items: center; gap: .85rem; }
.account form { margin: 0; }
.account__who {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em;
  color: var(--ink-soft); text-decoration: none; border-bottom: 0;
  max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account__who:hover { color: var(--blue); border-bottom: 0; }
.account__out {
  background: none; border: 0; padding: .4rem 0; cursor: pointer;
  font: 600 .88rem/1 var(--font-sans); color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
.account__out:hover { color: #b3261e; border-bottom-color: #b3261e; }

/* ---------- auth (login, register, password reset) ----------
   Dark plate with a dimmed plant photo behind it, so signing in feels like stepping
   through to the back of house rather than landing on a blank form. */

.auth {
  position: relative;
  display: grid; place-items: center;
  min-height: calc(100vh - 190px);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--ink);
  overflow: hidden;
}
.auth__bg { position: absolute; inset: 0; }
.auth__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.auth__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, rgba(20,22,26,.55) 0%, rgba(20,22,26,.94) 70%);
}

.auth__card {
  position: relative; z-index: 1;
  width: min(440px, 100% - 2.5rem);
  background: rgba(28, 31, 36, .88);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  padding: clamp(1.9rem, 4vw, 2.75rem);
  color: #fff;
}
.auth__card h1 { font-size: clamp(1.55rem, 1.2rem + 1vw, 2rem); margin-bottom: .35rem; color: #fff; }
.auth__card .eyebrow { color: var(--mark); }
.auth__note { font-size: .93rem; color: rgba(255,255,255,.68); margin-bottom: 1.75rem; }

.auth__card .field > span { color: rgba(255,255,255,.85); }
/* Must out-specify `.field input[type=...]` further down the sheet, or the inputs render
   white-on-white inside the dark card. */
.auth__card .field input[type="text"],
.auth__card .field input[type="password"],
.auth__card .field input[type="email"] {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
}
.auth__card .field input::placeholder { color: rgba(255,255,255,.4); }
.auth__card .field input[type="text"]:focus,
.auth__card .field input[type="password"]:focus,
.auth__card .field input[type="email"]:focus {
  border-color: var(--blue); background: rgba(255,255,255,.12);
}
.auth__card .helptext { display: block; font-size: .78rem; color: rgba(255,255,255,.5); margin-top: .35rem; }
.auth__card .btn { width: 100%; justify-content: center; margin-top: .5rem; }

.auth__foot {
  margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .89rem; color: rgba(255,255,255,.64);
}
.auth__foot a { color: #fff; font-weight: 600; }
.auth__foot a:hover { color: var(--mark); }

.auth__perks { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; }
.auth__perks li {
  position: relative; padding-left: 1.6rem;
  font-size: .9rem; color: rgba(255,255,255,.78);
}
.auth__perks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .7rem; height: 3px; background: var(--mark);
}

.errorlist {
  list-style: none; margin: 0 0 1.2rem; padding: .8rem .95rem;
  background: rgba(179,38,30,.18); border-left: 4px solid #ff6b60;
  font-size: .89rem; color: #ffd9d5;
}
.field em { display: block; color: #ff8e85; font-size: .85rem; font-style: normal; margin-top: .35rem; }

.navtoggle { display: none; background: none; border: 0; padding: .4rem; margin-left: auto; cursor: pointer; }
.navtoggle svg { display: block; }

@media (max-width: 820px) {
  .navtoggle { display: block; }
  .masthead nav { display: none; margin-left: 0; }
  .masthead nav[data-open] {
    display: block; position: absolute; inset: 100% 0 auto 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 1rem 0;
  }
  .masthead nav ul { flex-direction: column; align-items: stretch; gap: 0; width: var(--shell); margin-inline: auto; }
  .masthead nav li + li { border-top: 1px solid var(--line); }
  .masthead nav a { display: block; padding: .85rem 0; border-bottom: 0; }
}

/* ---------- hero ---------- */

.hero { position: relative; background: var(--ink); }
/* width must be definite: with only aspect-ratio + max-height, the box shrinks its WIDTH to
   preserve the ratio once the height cap bites, which left a dark gutter down the right edge. */
.hero__media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(20,22,26,.88) 0%, rgba(20,22,26,.55) 45%, rgba(20,22,26,.1) 75%);
}
.hero__panel {
  position: absolute; inset: auto auto 0 0; z-index: 2;
  width: var(--shell); left: 50%; transform: translateX(-50%);
  padding-bottom: clamp(2rem, 5vw, 4.5rem);
  color: #fff;
}
.hero__panel h1 { max-width: 16ch; text-wrap: balance; }
.hero__panel .eyebrow { color: var(--mark); }
.hero__panel p { max-width: 46ch; color: rgba(255,255,255,.8); font-size: clamp(1rem, .95rem + .4vw, 1.2rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

@media (max-width: 700px) {
  .hero__media { aspect-ratio: 3 / 4; }
  /* Keep the machine and its branding in frame when the sides get cropped. */
  .hero__media img { object-position: 62% center; }
  .hero__media::after { background: linear-gradient(0deg, rgba(20,22,26,.95) 30%, rgba(20,22,26,.2) 82%); }
}

/* ---------- sections ---------- */

.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--dark { background: var(--ink); color: #fff; }
.section--dark .lede, .section--dark .muted { color: rgba(255,255,255,.72); }
.section--paper { background: var(--paper); }
.section__head { max-width: 62ch; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }

/* ---------- signature: the sequence rail ----------
   Five stations on a yellow floor line. The order is the order the work happens in, which is
   why it is numbered at all. */

.rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: station; }
@media (min-width: 860px) { .rail { grid-template-columns: repeat(5, 1fr); } }

.rail li { position: relative; padding: 2.4rem 1.25rem 0 0; counter-increment: station; }
.rail li::before {
  content: ""; position: absolute; top: .85rem; left: 0; right: 0; height: 4px;
  background: var(--mark);
}
.rail li:last-child::before { right: 1.25rem; }
.rail li::after {
  content: ""; position: absolute; top: .25rem; left: 0; width: 4px; height: 1.35rem;
  background: var(--mark);
}
.rail__no { font-family: var(--font-mono); font-size: .8rem; color: var(--mark); letter-spacing: .1em; }
.rail h3 { margin: .15rem 0 .35rem; font-size: 1.05rem; }
.rail p { font-size: .93rem; margin: 0; color: var(--ink-soft); }
.section--dark .rail p { color: rgba(255,255,255,.66); }

@media (max-width: 859px) {
  .rail li { padding: .35rem 0 1.5rem 1.6rem; }
  .rail li::before { top: 0; bottom: 0; left: 0; right: auto; width: 4px; height: auto; }
  .rail li:last-child::before { bottom: 1.2rem; right: auto; }
  .rail li::after { top: .5rem; left: 0; width: 1.1rem; height: 4px; }
}

/* ---------- capability cards ---------- */

.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.capability {
  position: relative;
  background: var(--paper); border: 1px solid var(--line);
  padding: 1.75rem 1.5rem 1.9rem;
  display: flex; flex-direction: column; gap: .85rem;
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.capability:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20, 22, 26, .09);
}
@media (prefers-reduced-motion: reduce) { .capability:hover { transform: none; } }

.capability__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: #e8eefa; color: var(--blue);
  transition: background-color .18s ease, color .18s ease;
}
.capability__icon svg { width: 32px; height: 32px; display: block; }
.capability:hover .capability__icon { background: var(--blue); color: #fff; }

.capability h3 { margin: 0; font-size: 1.12rem; }
.capability p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
/* The ERP hub reuses .capability without an icon — keep its spacing sane. */
.capability:not(:has(.capability__icon)) { gap: .5rem; }

/* ---------- spec block (nameplate-style figures) ---------- */

/* Defaults are for a light panel, which is where this block actually lives.
   Only the dark sections override them. */
.spec { border-top: 2px solid var(--ink); }
.spec__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line);
}
.spec__label { font-size: .9rem; color: var(--ink-soft); }
.spec__row > :last-child { font-weight: 600; text-align: right; }
.section--dark .spec { border-top-color: rgba(255,255,255,.35); }
.section--dark .spec__row { border-bottom-color: rgba(255,255,255,.15); }
.section--dark .spec__label { color: rgba(255,255,255,.7); }

/* ---------- project cards ---------- */

.cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--blue); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--line); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card__client { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.card h3 { margin: .4rem 0 .5rem; }
.card__summary { font-size: .94rem; color: var(--ink-soft); margin: 0 0 1rem; }
.card__meta {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  font-size: .82rem; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: .85rem;
}

.tagrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.tagrow a {
  font: 600 .85rem/1 var(--font-sans); text-decoration: none;
  padding: .55rem .95rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.tagrow a:hover { border-color: var(--blue); }
.tagrow a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- client strip ---------- */

.clients {
  display: grid; align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
}
.clients img {
  height: 34px; width: 100%; object-fit: contain; object-position: left center;
  filter: grayscale(1); opacity: .78;
  transition: filter .2s ease, opacity .2s ease;
}
.clients img:hover { filter: none; opacity: 1; }
/* Near-square lockups read far smaller than wide ones at the same height. */
.clients img.is-square { height: 48px; }
.clients span {
  font-family: var(--font-mono); font-size: .9rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.clients--partners img { height: 26px; }

.logo-note {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 2.5rem 0 1rem; display: flex; align-items: center; gap: 1rem;
}
.logo-note::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Full-bleed photo band used to break up the page rhythm. */
.band { position: relative; background: var(--ink); overflow: hidden; }
.band__media { position: relative; width: 100%; aspect-ratio: 21 / 7; max-height: 44vh; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,22,26,.9) 0%, rgba(20,22,26,.55) 50%, rgba(20,22,26,.2) 100%);
}
.band__text {
  position: absolute; inset: 0; display: flex; align-items: center;
  color: #fff;
}
.band__text .shell { width: var(--shell); }
.band__text h2 { max-width: 18ch; margin-bottom: .4rem; }
.band__text p { max-width: 42ch; color: rgba(255,255,255,.78); margin: 0; }
@media (max-width: 700px) {
  .band__media { aspect-ratio: 4 / 3; }
  .band__media::after { background: linear-gradient(0deg, rgba(20,22,26,.92) 30%, rgba(20,22,26,.35) 100%); }
  .band__text { align-items: flex-end; padding-bottom: 1.75rem; }
}

/* ---------- case study ---------- */

.case__head { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .case__head { grid-template-columns: 1.6fr 1fr; } }
.case__facts { border-top: 2px solid var(--ink); }
.case__facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.case__facts dt { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.case__facts dd { margin: 0; font-weight: 600; text-align: right; }

.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.15em; }

.scope { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.scope li { position: relative; padding-left: 1.6rem; }
.scope li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: 3px; background: var(--blue);
}

/* ---------- gallery ---------- */

.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gallery button {
  padding: 0; border: 1px solid var(--line); background: var(--paper); cursor: zoom-in;
  display: block; width: 100%;
}
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery figcaption { font-size: .85rem; color: var(--ink-soft); padding: .6rem .75rem; text-align: left; }

dialog.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh;
  color: #fff;
}
dialog.lightbox::backdrop { background: rgba(16,18,21,.93); }
.lightbox__img { max-width: 96vw; max-height: 82vh; object-fit: contain; margin-inline: auto; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem .25rem; }
.lightbox__caption { font-size: .9rem; color: rgba(255,255,255,.8); }
.lightbox button {
  background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff;
  font: 600 .9rem/1 var(--font-sans); padding: .6rem .9rem; cursor: pointer;
}
.lightbox button:hover { background: #fff; color: var(--ink); }

/* ---------- forms (upload) ---------- */

.field { display: block; margin-bottom: 1.25rem; }
.field > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.field input[type="text"], .field input[type="password"], .field input[type="email"], .field select, .field input[type="file"] {
  width: 100%; padding: .75rem .85rem; font: inherit;
  border: 1px solid var(--line); background: var(--paper); border-radius: 2px;
}
.field--check { display: flex; align-items: center; gap: .6rem; }
.dropzone {
  border: 2px dashed var(--line); background: var(--paper);
  padding: 2rem 1.25rem; text-align: center; border-radius: 2px;
}
.dropzone[data-drag] { border-color: var(--blue); background: #f2f6fd; }
.dropzone p { margin: .5rem 0 0; color: var(--ink-soft); font-size: .9rem; }

.notice { padding: .9rem 1.1rem; border-left: 4px solid var(--blue); background: var(--paper); margin-bottom: 1rem; }
.notice--error { border-left-color: #b3261e; }
.notice--warn { border-left-color: var(--mark); }

.panel { background: var(--paper); border: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- footer ---------- */

.footer { background: var(--ink); color: rgba(255,255,255,.72); padding-block: clamp(2.5rem, 4vw, 4rem); }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer h3 { color: #fff; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 500; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* width:auto is required — the HTML width attribute is a presentational hint, so setting
   only height stretches the mark. */
.footer__logo img { height: 40px; width: auto; margin-bottom: 1rem; }
.footer__group { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: rgba(255,255,255,.6); }
.footer__base {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .85rem;
}

/* No scroll-reveal animation here on purpose: anything that starts at opacity 0 risks
   staying invisible when the scroll range is never satisfied (short viewports, zoom,
   in-page anchors, print). The content carries the page. */

.auth__card--wide { width: min(560px, 100% - 2.5rem); }
.auth__card textarea {
  width: 100%; padding: .75rem .85rem; font: inherit; border-radius: 2px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.24); color: #fff;
}
.auth__card select {
  width: 100%; padding: .75rem .85rem; font: inherit; border-radius: 2px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.24); color: #fff;
}
.auth__card select option { background: var(--ink); color: #fff; }

/* The dropzone is shared with the staff upload page (light); inside the dark auth card
   it needs its own treatment or it renders as a white slab. */
.auth__card .dropzone {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.28);
}
.auth__card .dropzone[data-drag] { border-color: var(--blue); background: rgba(30,86,168,.22); }
.auth__card .dropzone p { color: rgba(255,255,255,.6); }
.auth__card .dropzone input[type="file"] { color: rgba(255,255,255,.85); }

/* ---------------------------------------------------------------------------
   Client message thread (/portal/thread/<id>/)
   --------------------------------------------------------------------------- */
.thread { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0 2rem; }

.msg {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  background: #fff;
}
/* Our own replies sit visually apart so a conversation reads at a glance. */
.msg--ours { background: var(--concrete); border-color: transparent; }
.msg--queued { opacity: .65; border-style: dashed; border-color: var(--line); }

.msg__head {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  justify-content: space-between; align-items: baseline;
  margin-bottom: .6rem;
}
.msg__from { font-weight: 600; font-size: .95rem; }
.msg__when { font-size: .82rem; color: var(--ink-soft); }
.msg__note { margin: .75rem 0 0; font-size: .85rem; color: var(--ink-soft); }

/* Third-party email markup lands here. It is sanitised on arrival, but it is still
   someone else's HTML, so it gets hard limits: it must not escape the card, and long
   unbroken strings (URLs, reference numbers) must wrap rather than stretch the page. */
.msg__body { font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.msg__body > :first-child { margin-top: 0; }
.msg__body > :last-child { margin-bottom: 0; }
.msg__body img { max-width: 100%; height: auto; }
.msg__body table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.msg__body td, .msg__body th { border: 1px solid var(--line); padding: .35rem .5rem; }
.msg__body blockquote {
  margin: .75rem 0; padding-left: .9rem;
  border-left: 3px solid var(--line); color: var(--ink-soft);
}
.msg__body pre { overflow-x: auto; background: var(--concrete); padding: .75rem; border-radius: 6px; }

.reply { margin-top: 1.5rem; }
.reply textarea {
  width: 100%; padding: .8rem .9rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; resize: vertical;
}
.reply textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.reply .field span { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .9rem; }

/* ---------------------------------------------------------------------------
   Contact call-to-action panel (home page)
   --------------------------------------------------------------------------- */

/* Full-width button. `inline-flex` on .btn would collapse to the text width inside a
   panel, which reads as a link rather than the primary action. */
.btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  padding-block: .95rem;
  font-size: 1.02rem;
}
.btn--block svg { flex: none; transition: transform .18s ease; }
.btn--block:hover svg { transform: translateX(3px); }

.panel--cta { border-color: var(--blue); }
.panel--cta h3 { margin: 0 0 .35rem; font-size: 1.25rem; letter-spacing: -.01em; }
.panel--cta > p.muted { margin: 0 0 1.25rem; font-size: .94rem; }

/* Separates the direct-contact details from the action above them without adding a
   second visual block. */
.panel__aside {
  margin: 1.5rem 0 .35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* One quiet line, so the button stays the obvious action. The full contact block
   (address, coverage area) lives in the footer on every page. */
.panel__direct {
  margin: 0;
  font-size: .95rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
}
.panel__direct span { color: var(--ink-soft); }