/* LuxGen Mining Consultants — site styles
   Mood: the night shift on a lit pit. LuxGen navy is the ground, LuxGen orange is the light.
   One family (Archivo): condensed and heavy for headings, like site signage; normal width for reading.
   Two signature shapes: the stepped "pit bench" edge under the hero, and the borehole log
   that shows where LuxGen comes in. Bone "paper" surfaces are kept for paperwork only
   (the licence checklist and the contact form). */

:root {
  --navy: #041f3a;
  --deep: #02152a;
  --panel: #0b2b4b;
  --panel-2: #12385e;
  --rule: rgba(169, 185, 201, .22);
  --orange: #f1671f;
  --orange-hi: #ff7f3d;
  --orange-ink: #a9440b;     /* orange text on paper */
  --bone: #f2ece3;
  --paper: #f2ece3;
  --paper-2: #e6ddcf;
  --steel: #a9b9c9;
  --ink: #041f3a;            /* text on paper */
  --ink-soft: #3f5468;

  --laterite: #b9532a;
  --ochre: #d9a441;
  --slate: #7a8c99;
  --error-ink: #8a3014;     /* laterite, darkened for text on paper */

  --font: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4.5vw, 48px);
  --section: clamp(64px, 9vw, 120px);
  --r-sm: 6px;
  --r: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--bone);
  font: 400 1.0625rem/1.65 var(--font);
  font-stretch: 100%;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--orange-hi); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--bone); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

h1, h2, h3 { margin: 0 0 .45em; font-family: var(--font); color: inherit; }
h1, h2 {
  font-stretch: 72%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--bone); max-width: 38em; }
.muted { color: var(--steel); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.deep { background: var(--deep); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: .6rem 1rem; background: var(--orange); color: var(--navy); font-weight: 700; border-radius: var(--r-sm); }
.skip:focus { top: 8px; }

.icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* Buttons and links */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .7rem 1.5rem;
  border: 2px solid transparent; border-radius: 999px;
  font: 700 1rem/1.2 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--orange); color: var(--navy); }
.btn-primary:hover { background: var(--orange-hi); color: var(--navy); }
.btn-quiet { border-color: rgba(242, 236, 227, .45); color: var(--bone); background: transparent; }
.btn-quiet:hover { border-color: var(--bone); color: var(--bone); }
.text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--bone); font-weight: 700; text-decoration: none;
}
.text-link .icon { color: var(--orange); transition: transform .15s; }
.text-link:hover { color: var(--orange-hi); }
.text-link:hover .icon[data-move] { transform: translateX(3px); }

/* Header: a floating dark bar, as in the reference template */
.site-header { position: fixed; inset: 12px 0 auto; z-index: 50; pointer-events: none; }
.header-bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: 20px;
  width: calc(100% - 2 * var(--gutter)); max-width: var(--wrap); margin: 0 auto;
  padding: 8px 8px 8px 18px;
  position: relative;
}
/* The bar's glass sits on a pseudo-element: a backdrop-filter on the bar itself
   would trap the fixed mobile menu inside it. */
.header-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(2, 21, 42, .78);
  border: 1px solid var(--rule);
  border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color .2s;
}
.is-scrolled .header-bar::before { background: rgba(2, 21, 42, .96); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: auto; }
.brand-name { display: flex; flex-direction: column; font-stretch: 72%; font-weight: 800; font-size: 1.35rem; line-height: 1; }
.brand-name small { font-stretch: 100%; font-weight: 500; font-size: .72rem; color: var(--steel); margin-top: 3px; }
.brand:hover { color: var(--bone); }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--bone); text-decoration: none; font-weight: 600; }
.site-nav a[aria-current="page"] { color: var(--orange-hi); }
.site-nav .btn-primary, .site-nav .btn-primary:hover { color: var(--navy); }
.nav-head, .nav-extra { display: none; }

.menu-btn, .nav-close {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .45rem 1rem;
  border: 1.5px solid rgba(242, 236, 227, .45); border-radius: 999px;
  background: transparent; color: var(--bone);
  font: 700 .95rem/1 var(--font); cursor: pointer;
}
.nav-backdrop { display: none; }

@media (min-width: 900px) {
  .menu-btn { display: none; }
  .site-nav ul { display: flex; gap: 6px; }
  .site-nav ul a { display: block; padding: .55rem 1rem; border-radius: 999px; }
  .site-nav ul a:hover { background: rgba(242, 236, 227, .08); }
  .header-cta { min-height: 46px; }
}
@media (max-width: 899.98px) {
  .header-cta { display: none; }
  .site-nav {
    position: fixed; inset: 0 0 0 auto; z-index: 60;
    width: min(380px, 100%); padding: 18px 22px 28px;
    display: flex; flex-direction: column;
    background: var(--deep); border-left: 1px solid var(--rule);
    transform: translateX(100%); visibility: hidden;
    transition: transform .22s ease, visibility 0s .22s;
    pointer-events: auto; overflow-y: auto;
  }
  .site-nav.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
  .nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
  .nav-title { font-weight: 700; color: var(--steel); font-size: .95rem; }
  .site-nav ul a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 0; border-bottom: 1px solid var(--rule);
    font-stretch: 72%; font-weight: 800; font-size: 2rem; line-height: 1.1;
  }
  .site-nav ul a[aria-current="page"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
  .nav-extra { display: grid; gap: 16px; margin-top: 30px; }
  .nav-extra .btn { width: 100%; }
  .nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(2, 21, 42, .6); pointer-events: auto; }
  .nav-open { overflow: hidden; }
}

/* Home hero: full-bleed site photo, headline set like signage, stepped "bench" edge */
.hero {
  position: relative; isolation: isolate;
  min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  padding: 140px 0 clamp(110px, 13vw, 170px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 96px), 80% calc(100% - 96px), 80% calc(100% - 64px), 60% calc(100% - 64px), 60% calc(100% - 32px), 40% calc(100% - 32px), 40% 100%, 0 100%);
}
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 31, 58, .94) 0%, rgba(4, 31, 58, .78) 42%, rgba(4, 31, 58, .15) 78%),
    linear-gradient(0deg, rgba(4, 31, 58, .5) 0%, rgba(4, 31, 58, 0) 35%);
}
.hero-grid { display: grid; gap: 40px; align-items: end; }
.hero h1 { text-transform: uppercase; font-size: clamp(3rem, 9vw, 7.6rem); line-height: .9; letter-spacing: -.01em; margin-bottom: .3em; }
.hero h1 span { display: block; }
.hero h1 span + span { color: var(--orange); }
.hero .lead { max-width: 32em; }
.hero-note {
  max-width: 330px; padding: 22px 24px;
  background: rgba(2, 21, 42, .82); border: 1px solid var(--rule); border-radius: var(--r);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-note strong { display: block; font-stretch: 72%; font-weight: 800; font-size: 1.7rem; line-height: 1.05; margin-bottom: 8px; }
.hero-note p { color: var(--steel); font-size: .98rem; }
.hero-note .text-link { margin-top: 12px; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1fr auto; }
}
@media (max-width: 700px) {
  .hero { min-height: 0; padding-top: 250px; padding-bottom: 84px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 66% calc(100% - 36px), 66% calc(100% - 18px), 33% calc(100% - 18px), 33% 100%, 0 100%); }
  .hero::before { background: linear-gradient(0deg, rgba(4, 31, 58, .96) 0%, rgba(4, 31, 58, .9) 50%, rgba(4, 31, 58, .25) 85%, rgba(4, 31, 58, .5) 100%); }
  .hero-note { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero h1 span + span { animation-delay: .12s; }
  @keyframes rise { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
}

/* Who we work with: three licence scales, set inline under the hero */
.scale { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.scale li { display: grid; gap: 2px; padding-left: 18px; border-left: 3px solid var(--orange); }
.scale .code { font-stretch: 72%; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--orange); margin-bottom: 6px; }
.scale strong { font-size: 1.1rem; }
.scale li > span:last-child { color: var(--steel); }
@media (min-width: 760px) { .scale { grid-template-columns: repeat(3, 1fr); } }
.scale-band { padding-top: 46px; }

/* Section heads */
.head { display: grid; gap: 14px 60px; margin-bottom: clamp(36px, 5vw, 60px); }
.head h2 { margin: 0; }
.head p { color: var(--steel); max-width: 34em; }
@media (min-width: 900px) { .head { grid-template-columns: 1fr 1fr; align-items: end; } }

/* Borehole log: the life of a mine drawn as a drill core, top to bottom */
.log { list-style: none; margin: 0; padding: 0; counter-reset: stage; }
.log > li {
  position: relative; counter-increment: stage;
  display: grid; gap: 10px 48px;
  padding: 0 0 48px 64px;
}
.log > li::before {          /* the core segment, coloured like the stratum */
  content: ""; position: absolute; left: 14px; top: 6px; bottom: -6px; width: 14px;
  background: var(--seg, var(--slate));
  border-radius: 2px;
}
.log > li::after {           /* depth tick and stage number */
  content: counter(stage);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 30px;
  display: grid; place-items: center;
  background: var(--navy); border: 2px solid var(--seg, var(--slate)); border-radius: var(--r-sm);
  font-stretch: 72%; font-weight: 800; font-size: 1.1rem; color: var(--bone);
}
.log > li:last-child { padding-bottom: 0; }
.log > li:last-child::before { bottom: 0; border-radius: 2px 2px 8px 8px; }
.log .depth { font-weight: 600; color: var(--steel); font-size: .95rem; }
.log h3 { font-stretch: 72%; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; margin: 2px 0 8px; }
.log p { color: var(--steel); max-width: 30em; }
.log ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.log ul a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: .75rem 0; border-bottom: 1px solid var(--rule);
  color: var(--bone); font-weight: 600; text-decoration: none;
}
.log ul a .icon { color: var(--orange); transition: transform .15s; }
.log ul a:hover { color: var(--orange-hi); }
.log ul a:hover .icon { transform: translateX(3px); }
.seg-1 { --seg: var(--laterite); }
.seg-2 { --seg: var(--ochre); }
.seg-3 { --seg: var(--slate); }
.seg-4 { --seg: var(--orange); }
@media (min-width: 860px) {
  .log > li { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-left: 96px; padding-bottom: 64px; }
  .log > li::before { left: 22px; }
  .log > li::after { width: 58px; height: 36px; font-size: 1.3rem; }
}

/* Paper: bone surfaces carry paperwork (licence checklist, contact form) */
.paper { background: var(--paper); color: var(--ink); }
.paper a { color: var(--orange-ink); }
.paper a:hover { color: var(--ink); }
.paper .muted, .paper .head p { color: var(--ink-soft); }
.paper .lead { color: var(--ink); }
.paper .text-link { color: var(--ink); }
.paper .text-link .icon { color: var(--orange-ink); }
.paper .btn-quiet { border-color: rgba(4, 31, 58, .35); color: var(--ink); }
.paper .btn-quiet:hover { border-color: var(--ink); color: var(--ink); }
.paper .btn-primary, .paper .btn-primary:hover { color: var(--navy); }

.split { display: grid; gap: 40px 64px; align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.flip > :first-child { order: 2; }
}

.photo { margin: 0; position: relative; }
.photo img { width: 100%; border-radius: var(--r); }
.photo-tag {
  position: absolute; left: 16px; bottom: -22px; max-width: 280px;
  padding: 16px 18px; border-radius: var(--r);
  background: var(--navy); color: var(--bone);
  font-size: .95rem; line-height: 1.45;
}
.photo-tag strong { display: block; color: var(--orange-hi); font-stretch: 72%; font-weight: 800; font-size: 1.3rem; line-height: 1.1; margin-bottom: 4px; }
@media (min-width: 960px) { .photo-tag { left: auto; right: -24px; } }
@media (max-width: 959.98px) { .photo-tag { position: relative; left: auto; bottom: auto; margin: -28px 16px 0; } }

.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px 30px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: .3em;
  width: .5rem; height: .9rem; border: solid var(--orange); border-width: 0 3px 3px 0; transform: rotate(40deg);
}
.paper .ticks li::before { border-color: var(--orange-ink); }
@media (min-width: 600px) { .ticks.two { grid-template-columns: 1fr 1fr; } }

/* How we work: a wide site photo with the four steps along its foot */
.work-photo { position: relative; }
.work-photo img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r) var(--r) 0 0; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; }
.steps > li { counter-increment: step; position: relative; padding: 26px 0 26px 64px; border-top: 1px solid var(--rule); }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 18px;
  font-stretch: 72%; font-weight: 800; font-size: 2.8rem; line-height: 1; color: var(--orange);
}
.steps p { color: var(--steel); }
.steps.on-photo { background: var(--panel); border-radius: 0 0 var(--r) var(--r); padding: 0 clamp(20px, 3vw, 36px); }
.steps.on-photo > li:first-child { border-top: 0; }
@media (min-width: 900px) {
  .steps.four { grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
  .steps.four > li { padding: 30px 0 34px; border-top: 0; }
  .steps.four > li::before { position: static; display: block; margin-bottom: 14px; }
}

/* Expertise as a plain run of terms */
.terms { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.terms li { padding: .4rem .9rem; border: 1px solid var(--rule); border-radius: 999px; font-weight: 600; font-size: .98rem; }
.note { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.note h3 { margin-bottom: 6px; }
.split > .note { margin-top: 0; }
@media (min-width: 960px) { .split > .note { padding: 0 0 0 48px; border-top: 0; border-left: 1px solid var(--rule); } }
.head h3 { margin: 0; font-stretch: 72%; font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; }

/* Inner page heroes */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 150px 0 clamp(56px, 7vw, 90px);
}
.page-hero-bg { position: absolute; inset: 0; z-index: -2; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(4, 31, 58, .97) 0%, rgba(4, 31, 58, .85) 50%, rgba(4, 31, 58, .45) 100%);
}
.page-hero h1 { max-width: 12em; }

/* Services page */
.jump { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.jump a {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  padding: .45rem 1rem; border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(2, 21, 42, .6);
  color: var(--bone); text-decoration: none; font-weight: 600; font-size: .98rem;
}
.jump a::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--seg, var(--slate)); }
.jump a:hover { border-color: var(--bone); }

.stage-head { display: grid; gap: 6px 60px; margin-bottom: clamp(30px, 4vw, 50px); padding-left: 22px; border-left: 6px solid var(--seg, var(--slate)); }
.stage-head .depth { font-weight: 600; color: var(--steel); }
.stage-head h2 { margin: 0; }
.stage-head p { color: var(--steel); max-width: 32em; }
.paper .stage-head .depth, .paper .stage-head p { color: var(--ink-soft); }
@media (min-width: 900px) { .stage-head { grid-template-columns: 1fr 1fr; align-items: end; } .stage-head .depth { grid-column: 1 / -1; } }

.service { display: grid; gap: 28px 56px; align-items: start; padding: clamp(30px, 4vw, 44px) 0; border-top: 1px solid var(--rule); scroll-margin-top: 100px; }
.service:first-of-type { border-top: 0; padding-top: 0; }
.service h3 { font-stretch: 72%; font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.1; }
.service p { color: var(--steel); }
.service .ticks strong { color: var(--bone); }
@media (min-width: 900px) {
  .service { grid-template-columns: 1.1fr 1fr; }
  .service:nth-of-type(even) > .photo { order: -1; }
}
.paper .service { border-color: rgba(4, 31, 58, .15); }
.paper .service p { color: var(--ink-soft); }
.paper .service .ticks strong { color: var(--ink); }

/* About page */
.statement { font-stretch: 72%; font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.18; max-width: 26em; margin: 0 0 clamp(36px, 5vw, 56px); }
.values { display: grid; gap: 0; margin: 26px 0 0; }
.values > div { padding: 18px 0; border-top: 1px solid var(--rule); }
.values dt { font-stretch: 72%; font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--orange-hi); }
.values dd { margin: 4px 0 0; color: var(--steel); }

/* Contact page */
.reach { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.reach a {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center;
  height: 100%; padding: 20px 22px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--bone); text-decoration: none;
  transition: border-color .15s;
}
.reach a:hover { border-color: var(--orange); color: var(--bone); }
.reach .icon { grid-row: span 3; width: 1.7rem; height: 1.7rem; color: var(--orange); }
.reach-label { font-weight: 600; color: var(--steel); font-size: .95rem; }
.reach-value { font-stretch: 72%; font-weight: 800; font-size: 1.45rem; line-height: 1.15; overflow-wrap: anywhere; }
.reach-note { color: var(--steel); font-size: .95rem; }
@media (min-width: 860px) { .reach { grid-template-columns: repeat(3, 1fr); } }

.contact-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: 1.4fr 1fr; gap: 64px; } }
.form-sheet { padding: clamp(24px, 4vw, 44px); border-radius: var(--r); }
.form-sheet h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }

.form { display: grid; gap: 20px; margin-top: 24px; }
.form[hidden] { display: none; }
.form .row { display: grid; gap: 20px; }
@media (min-width: 600px) { .form .row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; margin-bottom: 6px; font-weight: 700; }
.reply-to { margin: 0; padding: 0; border: 0; min-width: 0; }
.reply-to legend { padding: 0; margin-bottom: 12px; font-weight: 700; font-size: 1.05rem; }
.reply-to legend .hint { display: block; margin-top: 2px; font-weight: 400; font-size: .94rem; color: var(--ink-soft); }
.reply-to .field label { font-weight: 600; }
.optional { font-weight: 400; color: var(--ink-soft); }
.field .hint { display: block; margin: -2px 0 6px; font-size: .94rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .65rem .85rem;
  border: 1.5px solid #b9ad9c; border-radius: var(--r-sm);
  background: #fffdf9; color: var(--ink); font: 400 1rem/1.4 var(--font);
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(241, 103, 31, .4); }
.field [aria-invalid="true"] { border-color: var(--laterite); border-width: 2px; background: #fdf6f1; }
.field-error { display: block; margin-top: 6px; color: var(--error-ink); font-size: .95rem; font-weight: 600; line-height: 1.4; }
.captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.captcha-code { min-width: 7.5ch; padding: .6rem .85rem; background: var(--paper-2); border-radius: var(--r-sm); font: 700 1.25rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .18em; user-select: all; }
.captcha button { min-height: 44px; padding: .4rem .9rem; border: 1.5px solid #b9ad9c; border-radius: 999px; background: transparent; color: var(--ink); font: 600 .95rem/1 var(--font); cursor: pointer; }
.captcha button:hover { border-color: var(--ink); }
.captcha input { max-width: 12rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Problems are reported beside the Send button, in the same red as the field notes */
.form-status { flex: 1 1 260px; padding-top: 4px; }
.form-status:focus { outline: none; }
.form-status[hidden] { display: none; }
.form-status-title { margin: 0 0 4px; font-weight: 700; color: var(--error-ink); }
.form-status.err a { color: var(--ink); font-weight: 600; }
.form-status.err a:hover { color: var(--error-ink); }
.form-status.problem p:last-child { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.form-status.problem a { color: var(--ink); font-weight: 600; }
.form-status.problem a:hover { color: var(--error-ink); }

/* After sending: the paper sheet itself turns into the confirmation slip */
.form-sheet.is-sent { background: var(--panel); color: var(--bone); border: 1px solid var(--rule); }
.sent { color: var(--bone); }
.sent:focus { outline: none; }
.sent[hidden] { display: none; }
.form-sheet .sent-title { position: relative; margin: 0 0 8px; padding-left: 36px; color: var(--bone); font-size: clamp(1.8rem, 2.8vw, 2.3rem); line-height: 1.1; }
.sent-title::before { content: ""; position: absolute; left: 6px; top: .12em; width: .55rem; height: 1rem; border: solid var(--orange); border-width: 0 4px 4px 0; transform: rotate(40deg); }
.sent p { color: var(--steel); }
.sent-summary { margin: 18px 0 24px; }
.sent-summary > div { display: grid; grid-template-columns: 8rem 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.sent-summary dt { color: var(--steel); font-weight: 600; }
.sent-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.paper .sent .btn-quiet { border-color: rgba(242, 236, 227, .45); color: var(--bone); }
.paper .sent .btn-quiet:hover { border-color: var(--bone); color: var(--bone); }
.form button[disabled] { opacity: .7; cursor: progress; }

.office h2 { font-size: clamp(1.8rem, 2.6vw, 2.2rem); }
.office address { font-style: normal; font-size: 1.15rem; margin-bottom: 20px; }
.office dl { margin: 0 0 26px; }
.office dl > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.office dt { color: var(--steel); font-weight: 600; }
.office dd { margin: 0; }
.map { display: grid; gap: 14px; }
.map iframe { width: 100%; height: 340px; border: 0; border-radius: var(--r); background: var(--panel); }

.form-send { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; }
.form-privacy { margin: -6px 0 0; font-size: .95rem; }

/* Privacy page: a plain reading column on paper */
.doc > * { max-width: 44rem; }
.doc h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: 1.6em; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: var(--ink-soft); }
.doc strong { color: var(--ink); }
.doc .ticks { margin: 0 0 1em; }

/* 404 */
.not-found { padding-top: 160px; padding-bottom: var(--section); }
.not-found .lead { color: var(--steel); }

/* Footer */
.site-footer { background: var(--deep); color: var(--steel); }
.footer-talk { padding-top: var(--section); padding-bottom: clamp(44px, 6vw, 70px); border-bottom: 1px solid var(--rule); }
.footer-talk h2 { color: var(--bone); max-width: 14em; font-size: clamp(2.2rem, 5vw, 4rem); }
.footer-talk ul { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 22px 48px; }
.footer-talk li { display: grid; gap: 2px; }
.footer-talk span { font-size: .95rem; }
.footer-talk a { color: var(--bone); text-decoration: none; font-stretch: 72%; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; overflow-wrap: anywhere; }
.footer-talk a:hover { color: var(--orange-hi); }
@media (min-width: 800px) { .footer-talk ul { grid-template-columns: repeat(3, auto); justify-content: start; } }
.footer-main { display: grid; gap: 36px; padding-top: 48px; padding-bottom: 40px; }
.footer-main h2 { font-stretch: 100%; font-weight: 700; font-size: 1rem; color: var(--bone); margin-bottom: 12px; letter-spacing: 0; }
.footer-main address { font-style: normal; margin-bottom: 8px; }
.footer-main ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-main a { color: var(--steel); text-decoration: none; }
.footer-main a:hover { color: var(--bone); }
.footer-main .brand { margin-bottom: 14px; }
.footer-main .brand-name { color: var(--bone); }
.footer-main p { max-width: 26em; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; color: var(--bone); }
.social a:hover { border-color: var(--orange); color: var(--orange-hi); }
@media (min-width: 800px) { .footer-main { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--rule); font-size: .92rem; }
.footer-base a { color: var(--bone); }

/* WhatsApp shortcut */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 50px; padding: .6rem 1.1rem;
  background: #1f8f4e; color: #fff; border-radius: 999px;
  font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 24px rgba(2, 21, 42, .45);
}
.wa-float:hover { background: #18773f; color: #fff; }
.wa-float .icon { width: 1.4rem; height: 1.4rem; }
@media (max-width: 600px) { .wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wa-float { padding: 0; width: 54px; justify-content: center; } }