/* PrimeLedger landing page styles.
 *
 * Every value here was lifted from the approved design bundle's own 448 inline `style="…"`
 * attributes and its 1,673-character base <style> block. The artifact contained zero CSS
 * custom properties and zero class attributes; the tokens and class names below are
 * authored here for the first time, so the rule is: computed values must not change, only
 * where they live.
 *
 * Do NOT take values from design/README.md's "Дизайн-система" section — it documents an
 * earlier, discarded iteration (different palette, Source Serif 4 instead of Newsreader,
 * a dark theme that no longer exists) and its own banner says so.
 *
 * RTL: the layout mirrors through logical properties (padding-inline, border-inline,
 * inset-inline-start). Those are load-bearing — replacing any of them with a physical
 * left/right equivalent silently breaks the Arabic locale. The only explicit RTL rule in
 * the whole design is the <select> arrow position, near the bottom of this file.
 *
 * Sections, in order: tokens, base, layout primitives, buttons, header/nav, hero, trust,
 * services, industries, how we work, about + why, faq, reviews, cta, contact, footer,
 * floating actions, motion, form controls, media queries.
 */

/* ---------------------------------------------------------------- tokens ---------- */

:root {
  --bg: #F7F5EF;
  --surface: #FFFFFF;
  --surface-soft: #FDFCF8;
  --surface-warm: #EAE3D4;

  --ink: #161B26;
  --ink-2: #3B4252;
  --ink-3: #5B6270;
  --ink-inverse: #FFFBF2;

  --gold: #8A6A20;
  --gold-hover: #6E5417;
  --gold-light: #C9A24B;
  --gold-deep: #5A4210;
  --gold-line: rgba(138, 106, 32, .5);
  --gold-line-soft: rgba(138, 106, 32, .4);
  --gold-wash: rgba(138, 106, 32, .1);

  --line: #E3DCCB;
  --line-soft: #E9E3D6;
  --line-warm: #EAE3D4;
  --line-strong: #D6CBB2;
  --edge: #BFB6A2;
  --dot: #C6BEA9;
  --danger: #B3402A;

  --font-sans: 'Golos Text', system-ui, sans-serif;
  --font-serif: 'Newsreader', serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --shell: 1260px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-y: clamp(72px, 9vw, 130px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ base ---------- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); }
a:hover { color: var(--gold-hover); }
::selection { background: rgba(138, 106, 32, .16); }

.pl-root {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  text-wrap: pretty;
}

/* Clears the 76px sticky header when an in-page anchor is followed. */
.pl-root [id] { scroll-margin-top: 92px; }

@keyframes plShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Declared by the artifact but not used by any element; kept so the design's motion
   vocabulary survives the port intact. */
@keyframes plDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Arabic typography. The heading override is the artifact's; the body-font line replaces
   what its JavaScript used to set inline on the root element. */
[lang="ar"] .pl-root { font-family: "Noto Naskh Arabic", "Golos Text", serif; }

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] blockquote { font-family: "Noto Naskh Arabic", serif !important; }

/* ------------------------------------------------------ layout primitives ---------- */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; }

/* Sections that sit on white with a rule above and below: Industries, About, Reviews. */
.section--alt {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.section-head--lg { margin-bottom: clamp(40px, 5vw, 64px); }

.overline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  white-space: nowrap;
}

/* The small double-rule mark that precedes most overlines. */
.rule-mark {
  width: 26px;
  height: 3px;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold-line);
}

.rule-mark--card {
  display: block;
  width: 34px;
  margin-bottom: 16px;
}

/* Full-width version used at the top of the Why and Contact panels. */
.rule-bar {
  display: block;
  height: 3px;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold-line);
}

.rule-bar--spaced { margin-bottom: 22px; }

.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
}

.section-title--narrow { max-width: 20ch; }

.section-intro {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-3);
  margin: 0;
  max-width: 46ch;
}

.section-intro--wide { max-width: 50ch; }

/* The heavy "ledger" double rule above the services list. */
.ledger-rule {
  height: 4px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid rgba(23, 28, 40, .4);
  margin-bottom: 2px;
}

/* Every image in this design was a bare <img>; the port wraps each one in a <picture> to
   offer AVIF and WebP. `display: contents` removes the wrapper's own box from layout, so the
   <img> lays out exactly as it did before — percentage heights resolve against the real
   parent, and no inline strut is introduced. Leaving <picture> as its default inline box
   shifted the whole page down by 2px through the About photo alone. */
.pl-root picture { display: contents; }

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

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: 999px;
  white-space: nowrap;
}

.btn-primary {
  background: var(--ink);
  color: var(--ink-inverse);
  transition: transform .25s var(--ease), box-shadow .25s, background .25s;
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--edge);
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  transition: border-color .25s, background .25s, transform .25s;
}

.btn-outline--nowrap { white-space: nowrap; }

.btn-outline--lg {
  padding: 13px 26px;
  white-space: nowrap;
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--gold-light);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  padding: 16px 34px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--ink-inverse);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 15px 32px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s;
}

/* --------------------------------------------------------- header and nav ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  z-index: 90;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(247, 245, 239, .84);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease;
}

.nav-bar {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}

.brand-mark {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  flex: none;
  box-shadow: 0 0 0 1px rgba(138, 106, 32, .35);
}

/* Deliberately physical offsets: this is a fixed crop of the logo artwork, and the
   artifact does not mirror it under RTL either. */
.brand-mark img {
  position: absolute;
  width: 230%;
  height: 230%;
  left: -65%;
  top: -42%;
  object-fit: cover;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  line-height: 1;
}

.brand-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}

.nav-link {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

/* Three plain links, one per locale route. The active state reproduces what the original
   export applied from JavaScript. */
.lang-option {
  display: inline-block;
  text-decoration: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink-3);
  transition: background .2s, color .2s;
}

.lang-option[aria-current="page"] {
  background: var(--ink);
  color: var(--ink-inverse);
}

.btn-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 14px var(--gutter) 22px;
}

/* column-reverse, so the language switcher declared last in base.html paints above the link
   list. DOM order keeps the navigation first for a screen reader working through the panel;
   visual order puts the locale control where someone who cannot read this locale will look. */
.mobile-menu.is-open {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 14px;
}

.mobile-menu-list {
  display: grid;
  gap: 2px;
}

/* Only one of the two switchers is ever rendered. 480px is not a round number picked by feel:
   the header bar needs 436px to lay out without clipping the menu toggle, and the gap between
   the two is the safety margin. */
.lang-switch--menu { display: none; }

@media (max-width: 480px) {
  .lang-switch--bar { display: none !important; }
  .lang-switch--menu {
    display: flex;
    justify-content: center;
    align-self: center;
  }
}

.mobile-menu-link {
  text-decoration: none;
  color: var(--ink);
  font-size: 17px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.mobile-menu-link:last-child { border-bottom: 0; }

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

.hero {
  position: relative;
  padding: clamp(56px, 8vw, 110px) 0 clamp(60px, 8vw, 104px);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}

.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(247, 245, 239, .68) 0%, rgba(247, 245, 239, .82) 55%, rgba(247, 245, 239, .99) 100%);
}

.hero-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 7.5%;
  width: 6px;
  border-inline-start: 1px solid var(--gold-line);
  border-inline-end: 1px solid rgba(138, 106, 32, .22);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 74%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 74%, transparent);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 780px);
}

.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(42px, 5.8vw, 82px);
  line-height: 1.0;
  letter-spacing: -.022em;
  margin: 0 0 28px;
}

/* Gold gradient text with a slow shimmer sweep. */
.hero-title-accent {
  display: block;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(100deg, var(--gold) 12%, var(--gold-light) 34%, var(--gold-deep) 56%, var(--gold) 78%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: plShimmer 10s linear infinite;
}

.hero-sub {
  font-size: clamp(16.5px, 1.35vw, 19px);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 18px;
}

.hero-industries {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 54ch;
  margin: 0 0 36px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid rgba(138, 106, 32, .45);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.hero-contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .03em;
}

/* Negative margin against the padding keeps a 44px touch target without changing the
   visual line height. */
.hero-contact-link {
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
}

/* DELIBERATELY LEFT AT --dot (1.7:1 against the hero), reviewed 17.08.2026 and not changed.
   The element is aria-hidden and purely decorative, so WCAG 1.4.3 does not apply to it, and
   every darker token in this palette (--edge is 1.85:1, --ink-3 is 5.54:1) either fails to
   help or turns a hairline separator into something as heavy as the contact text beside it.
   Raising it would mean inventing a colour the approved design does not contain, which is a
   palette change, not a fix. If the owner wants the dots more visible, that is a design
   decision to take deliberately rather than a defect to repair quietly. */
.hero-contact-sep { color: var(--dot); }

/* ----------------------------------------------------------- trust strip ---------- */

.trust {
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.trust-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(34px, 4vw, 54px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.trust-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}

.trust-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  padding-top: 4px;
}

.trust-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 7px;
}

.trust-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- services ---------- */

.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-item { border-bottom: 1px solid var(--line); }

/* The <h3> exists for document outline only; the button inside carries the type. */
.acc-heading {
  margin: 0;
  font-weight: inherit;
}

.svc-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 44px;
  align-items: start;
  gap: clamp(10px, 2vw, 28px);
  text-align: start;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: clamp(22px, 2.6vw, 32px) 0;
  font: inherit;
  color: inherit;
  transition: background .25s;
}

.svc-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
  padding-top: 9px;
}

.svc-heading-text { display: block; }

.svc-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(23px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: 7px;
}

.svc-desc {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 62ch;
}

.chev-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gold);
  transition: transform .4s var(--ease), background .25s, border-color .25s;
}

/* Open state, driven by the button's aria-expanded rather than by inline styles. */
[aria-expanded="true"] .chev-circle {
  transform: rotate(180deg);
  background: var(--gold-wash);
  border-color: var(--gold);
}

/* 0fr -> 1fr is what animates an accordion open; the inner .acc-clip hides the overflow
   while the row height interpolates. */
.svc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}

.acc-clip { overflow: hidden; }

.svc-panel-inner {
  padding: 4px 0 clamp(26px, 3vw, 38px);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(10px, 2vw, 28px);
}

.svc-include {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.svc-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px 28px;
}

/* The most repeated rule in the design — 29 elements. Logical properties, so the gold
   tick rule moves to the right-hand side under RTL by itself. */
.svc-feature {
  font-size: 15px;
  color: var(--ink-2);
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--gold-line-soft);
}

.svc-close {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 58ch;
}

.svc-close--tight { max-width: 52ch; }

.svc-panel-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

.svc-panel-photo {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* ------------------------------------------------------------ industries ---------- */

.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.ind-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}

.ind-photo {
  overflow: hidden;
  height: 168px;
}

.ind-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

/* The artifact bound this zoom with mouseenter/mouseleave listeners; CSS does the same job
   with no JavaScript. */
.ind-card:hover .ind-photo-img { transform: scale(1.07); }

.ind-body {
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ind-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 10px;
}

.ind-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 18px;
}

/* `margin: auto 0 0` pins the tag list to the bottom of a card whatever its copy length. */
.ind-tags {
  list-style: none;
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-warm);
  display: grid;
  gap: 7px;
}

.ind-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink-2);
}

.ind-more {
  margin-top: clamp(26px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.ind-more-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 62ch;
}

/* ----------------------------------------------------------- how we work ---------- */

.how-head { margin-bottom: clamp(40px, 5vw, 64px); }

.how-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* Physical right padding, as in the artifact: the four steps read as a single ruled band
   and the gap belongs between columns, not at the reading edge. */
.how-step {
  position: relative;
  padding: 34px clamp(18px, 2vw, 28px) 34px 0;
  border-top: 1px solid var(--ink);
}

.how-dot {
  position: absolute;
  top: -5px;
  inset-inline-start: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--gold);
}

/* Rule and dot fade step by step, so the sequence reads as progress. */
.how-step:nth-child(2) { border-top-color: rgba(23, 28, 40, .5); }
.how-step:nth-child(2) .how-dot { background: rgba(138, 106, 32, .7); }
.how-step:nth-child(3) { border-top-color: rgba(23, 28, 40, .32); }
.how-step:nth-child(3) .how-dot { background: rgba(138, 106, 32, .45); }
.how-step:nth-child(4) { border-top-color: rgba(23, 28, 40, .18); }
.how-step:nth-child(4) .how-dot { background: rgba(138, 106, 32, .25); }
.how-step:nth-child(4) { padding-right: 0; }

.how-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--gold);
  margin-bottom: 18px;
}

.how-title {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 500;
  margin: 0 0 10px;
}

.how-text {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-3);
  margin: 0;
}

/* ----------------------------------------------------------- about + why ---------- */

.about-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.about-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 28px;
}

.about-photo {
  display: block;
  width: 100%;
  height: clamp(200px, 24vw, 300px);
  object-fit: cover;
  margin-bottom: 30px;
  border-top: 2px solid var(--gold);
}

.about-mission {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 23px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 22px;
}

.about-para {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-2);
  margin: 0 0 16px;
}

.about-para--last { margin-bottom: 22px; }

.about-values {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--gold);
  margin: 0 0 12px;
}

.about-industries {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}

.why-panel {
  position: sticky;
  top: 100px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: clamp(28px, 3vw, 40px);
}

.why-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  margin: 0 0 24px;
}

.why-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
}

.why-item {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.why-item:last-child { border-bottom: 0; }

.why-close {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}

/* ------------------------------------------------------------------- faq ---------- */

.faq-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}

.faq-list { border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: start;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 22px 0;
  font: inherit;
  color: inherit;
}

.faq-question {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
}

.chev-plain {
  flex: none;
  color: var(--gold);
  transition: transform .4s var(--ease);
}

[aria-expanded="true"] .chev-plain {
  transform: rotate(180deg);
  background: var(--gold-wash);
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}

.faq-answer {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-3);
  margin: 0;
  padding: 0 0 24px;
}

/* --------------------------------------------------------------- reviews ---------- */

.section--reviews {
  padding: clamp(60px, 7vw, 100px) 0;
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.reviews-head { margin-bottom: clamp(30px, 4vw, 48px); }

.reviews-overline {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.reviews-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(18px, 2vw, 28px);
}

/* Dashed border signals "placeholder" — these are not real testimonials yet. */
.review-card {
  margin: 0;
  padding: 30px 28px;
  background: var(--bg);
  border: 1px dashed var(--line-strong);
}

.review-quote-mark {
  display: block;
  font-family: var(--font-serif);
  font-size: 46px;
  line-height: .6;
  color: var(--gold-line-soft);
  margin-bottom: 14px;
}

.review-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 18px;
}

.review-author {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}

.reviews-foot {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
}

.reviews-note {
  margin: 0;
  font-size: 15px;
  color: var(--ink-3);
  max-width: 64ch;
}

/* ------------------------------------------------------------ cta banner ---------- */

.cta {
  position: relative;
  padding: clamp(70px, 9vw, 124px) 0;
  overflow: hidden;
  background: var(--surface-warm);
}

.cta-bg {
  position: absolute;
  inset: 0;
}

.cta-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(247, 245, 239, .86), rgba(247, 245, 239, .93));
}

.cta-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 8%;
  width: 6px;
  border-inline-start: 1px solid rgba(201, 162, 75, .5);
  border-inline-end: 1px solid rgba(201, 162, 75, .24);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.cta-logo {
  display: inline-block;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  margin: 0 0 24px;
  box-shadow: 0 0 0 1px rgba(201, 162, 75, .4);
}

.cta-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 20px;
}

.cta-sub {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(23, 28, 40, .75);
  margin: 0 auto 32px;
  max-width: 60ch;
}

/* --------------------------------------------------------------- contact ---------- */

.contact-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.contact-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}

.contact-intro {
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-3);
  margin: 0 0 34px;
  max-width: 52ch;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px;
}

.field {
  display: grid;
  gap: 8px;
}

.field--full { grid-column: 1 / -1; }

.field-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field-input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}

.field-input--textarea { resize: vertical; }

.field-input.is-invalid { border-color: var(--danger); }

/* The errName / errEmail strings shipped in all three dictionaries but had no element to
   appear in. They do now; main.js reveals the matching one on a failed submit. */
/* 12px, not the artifact's 11px. This is the one place on the page where small type has a job
   to do rather than a texture to provide: it is the text a visitor reads at the moment their
   submission just failed. The mono face and letter-spacing that carry the design's voice are
   untouched. */
.field-error {
  display: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--danger);
}

.field-error.is-visible { display: block; }

.form-actions { grid-column: 1 / -1; }

.form-success {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  padding: 16px 18px;
  background: rgba(138, 106, 32, .08);
  border-inline-start: 2px solid var(--gold);
  font-size: 15px;
  color: var(--ink);
}

.form-success.is-visible { display: block; }

/* The server-side failure slot, mirroring .form-success above exactly — same grid span, same
   padding, same border treatment — and differing only in colour, so a visitor reads the two
   as the same kind of notice rather than as two unrelated widgets. --danger is the same token
   .field-error already uses. */
.form-submit-error {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  padding: 16px 18px;
  background: rgba(179, 64, 42, .07);
  border-inline-start: 2px solid var(--danger);
  font-size: 15px;
  color: var(--ink);
}

.form-submit-error.is-visible { display: block; }

/* Honeypot. Positioned off-screen rather than `display: none` or `hidden`: the bots worth
   catching here are the naive ones that fill every input they can find, and the slightly less
   naive ones specifically skip fields the CSS has hidden. Off-screen still counts as "found"
   to a form-filler while being invisible to a person.
   `aria-hidden="true"` plus `tabindex="-1"` on the markup keep it out of the accessibility
   tree and the tab order, so a screen-reader user never meets it either. */
.hp-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-info {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(26px, 3vw, 38px);
  display: grid;
  gap: 22px;
}

.info-block {
  display: grid;
  gap: 6px;
}

.info-block--divided {
  padding-top: 20px;
  border-top: 1px solid var(--line-warm);
}

.info-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* min-height, not padding, so the type keeps its position: at a 23px line box these links were
   the one control on the page under WCAG 2.2 SC 2.5.8's 24x24 floor, and missed it by a pixel.
   inline-flex + align-items: center grows the hit area downward from the same baseline. */
.info-value {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-family: var(--font-serif);
  font-size: 23px;
  color: var(--ink);
  text-decoration: none;
}

.info-value--break { word-break: break-all; }

.info-text {
  font-size: 15.5px;
  color: var(--ink-2);
}

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

.site-footer {
  background: var(--ink);
  color: rgba(247, 245, 239, .72);
  padding: clamp(50px, 6vw, 78px) 0 0;
}

.footer-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.footer-logo {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.footer-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--ink-inverse);
  margin-bottom: 16px;
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
}

.footer-brand-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.footer-tagline {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  max-width: 40ch;
}

.footer-col {
  display: grid;
  gap: 11px;
  align-content: start;
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 5px;
  font-weight: 500;
}

.footer-link {
  font-size: 14px;
  color: rgba(247, 245, 239, .72);
  text-decoration: none;
  display: inline-block;
  padding: 8px 0;
  margin: -8px 0;
}

.footer-note {
  font-size: 14px;
  color: rgba(247, 245, 239, .5);
}

.footer-bottom {
  max-width: var(--shell);
  margin: clamp(36px, 4vw, 56px) auto 0;
  padding: 22px var(--gutter);
  border-top: 1px solid rgba(247, 245, 239, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(247, 245, 239, .5);
}

/* ------------------------------------------- mobile bar and float actions ---------- */

.mobile-cta {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(247, 245, 239, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

.mobile-cta-call,
.mobile-cta-request {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.mobile-cta-call {
  flex: none;
  border: 1px solid var(--edge);
  color: var(--ink);
}

.mobile-cta-request {
  flex: 1;
  background: var(--ink);
  color: var(--ink-inverse);
}

.float-actions {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 24px;
  z-index: 70;
  display: grid;
  gap: 10px;
}

.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px -10px rgba(23, 28, 40, .4);
  transition: transform .25s var(--ease), box-shadow .25s;
}

.float-btn--telegram { color: #2AABEE; }
.float-btn--whatsapp { color: #25D366; }

/* ---------------------------------------------------------------- motion ---------- */

/* Reveal-on-scroll. The hidden state is applied by main.js (class `reveal-armed`), never
   by CSS alone — with JavaScript unavailable the content simply stays visible instead of
   disappearing, which is also how the original behaved. */
[data-reveal].reveal-armed {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------- form control chrome ------ */

.pl-root input:focus,
.pl-root select:focus,
.pl-root textarea:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(138, 106, 32, .12);
}

/* RESTORES the approved design rather than departing from it. The artifact's own wrapper
   carries `* { margin: 0; padding: 0; box-sizing: border-box; }`; that reset was not carried
   into this sheet, so `width: 100%` plus `padding: 13px 15px` plus a 1px border rendered every
   text field 32px wider than its grid column — the name field overlapped the phone field, and
   on a phone the right border fell outside `.pl-root { overflow-x: hidden }` and was cut off.
   Scoped to the form controls rather than applied as `*`, because every other rule in this
   file was hand-written against content-box and a global switch would need all 12 sections
   re-verified. `<select>` never had the bug: Chrome's UA sheet already gives it border-box,
   which is why it alone lined up with its column and looked narrower than its neighbours. */
.pl-root .field-input {
  box-sizing: border-box;
}

/* Custom dropdown arrow, drawn inline so no extra request is made. The !important on the
   inline padding is inherited from the artifact, where it had to beat an inline style. */
.pl-root select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A6A20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-inline-end: 42px !important;
}

/* The one and only explicit RTL rule in the design: background-position has no logical
   form, so the arrow has to be moved by hand for Arabic. */
[dir="rtl"] .pl-root select { background-position: left 14px center; }

/* ---------------------------------------------------------- media queries ---------- */

@media (max-width: 980px) {
  .nav-links { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
  .btn-nav-cta { display: none !important; }
  .mobile-cta { display: flex !important; }
  .float-actions { bottom: 88px !important; }
}

@media (max-width: 620px) {
  /* Carried over verbatim from the artifact, where no element ever carried
     data-herophoto — the hero photograph is not actually hidden on small screens. Kept as
     documentation of the design's intent rather than resurrected as new behaviour. */
  [data-herophoto] { display: none !important; }
}

/* ------------------------------------------------------------ reduced motion ---------- */

/* main.js already honours this query for the 37 scroll-reveal elements, and does it the right
   way round — it applies the hidden state from JavaScript, so with the preference set (or with
   no JavaScript at all) the content is simply visible and nothing animates in.
 *
 * What it could not cover is CSS: 20 transitions and the accordion's grid-template-rows
 * interpolation run regardless of the preference. Hover lifts are not what triggers vestibular
 * symptoms, but a 0.7s image zoom and a half-second panel expansion are exactly the kind of
 * large-area movement WCAG 2.3.3 is about.
 *
 * `!important` and the very broad selector are deliberate: this block has to beat 20 specific
 * rules it does not enumerate, and any transition added later is covered without anyone
 * remembering to come back here. 0.01ms rather than 0 so transitionend still fires and no
 * JavaScript waiting on it stalls. Scroll behaviour goes back to auto because the smooth
 * anchor scroll is itself motion the visitor asked to be spared. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-parallax] { transform: none !important; }
}