/* ==========================================================================
   Asude — public landing page
   Palette is lifted from the dashboard's Tailwind config so the marketing site
   and platform.asude.pro read as one brand.

   One important deviation: primary #06541D is a very dark green that only works
   on the cream surfaces the dashboard uses. On the dark background it sits at
   roughly 1.5:1 contrast and effectively disappears, so in dark mode the accent
   orange carries calls to action and the green becomes a background wash.
   Light mode uses the green exactly as the dashboard does.

   Direction is handled with logical properties throughout, so one stylesheet
   serves both the RTL Arabic page and the LTR English one.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('../fonts/NotoSansArabic.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */
:root,
:root[data-theme='dark'] {
  /* Tells the browser to render native UI — scrollbars, focus rings, form
     controls — in the matching scheme. */
  color-scheme: dark;

  --bg:          #0F1713;
  --bg-alt:      #16211B;
  --surface:     #1A241F;
  --surface-2:   #212E27;
  --border:      rgba(215, 208, 196, .11);
  --border-lift: rgba(215, 208, 196, .20);

  --text:        #F1EDE3;
  --text-muted:  #A3AC9F;
  --text-faint:  #8E968D;

  --brand:       #D88A31;
  --brand-hover: #E59B48;
  --brand-ink:   #1B211D;
  --brand-soft:  rgba(216, 138, 49, .13);

  --accent-2:    #7BB8A6;
  --green-wash:  rgba(6, 84, 29, .55);

  --shadow:      0 18px 48px rgba(0, 0, 0, .40);
  --shadow-sm:   0 6px 18px rgba(0, 0, 0, .28);
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg:          #FCF9EF;
  --bg-alt:      #F7F0E5;
  --surface:     #FFFFFF;
  --surface-2:   #F7F0E5;
  --border:      rgba(6, 84, 29, .13);
  --border-lift: rgba(6, 84, 29, .24);

  --text:        #1B211D;
  --text-muted:  #5F675E;
  --text-faint:  #8E968D;

  --brand:       #06541D;
  --brand-hover: #0A3C1B;
  --brand-ink:   #FCF9EF;
  --brand-soft:  rgba(6, 84, 29, .09);

  --accent-2:    #3C9D92;
  --green-wash:  rgba(123, 184, 166, .28);

  --shadow:      0 18px 44px rgba(6, 84, 29, .11);
  --shadow-sm:   0 6px 16px rgba(6, 84, 29, .08);
}

:root {
  --shell: 1180px;
  --radius:    18px;
  --radius-lg: 26px;
  --pad-section: clamp(4.5rem, 9vw, 7.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* The sticky header would otherwise cover the top of anchored sections. */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

html[lang='ar'] body {
  font-family: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
  line-height: 1.85;
}

h1, h2, h3 { margin: 0; line-height: 1.22; font-weight: 700; letter-spacing: -.01em; }
html[lang='ar'] h1,
html[lang='ar'] h2,
html[lang='ar'] h3 { line-height: 1.45; letter-spacing: 0; }

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 1rem;
  z-index: 200;
  padding: .7rem 1.2rem;
  border-radius: 0 0 12px 12px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  transition: inset-block-start .2s var(--ease);
}
.skip-link:focus { inset-block-start: 0; }

/* --------------------------------------------------------------- layout -- */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.section { padding-block: var(--pad-section); }
.section--alt { background: var(--bg-alt); }

.section__head {
  max-width: 720px;
  margin-inline: auto;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.section__title {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  margin-block-end: .9rem;
}

.section__subtitle {
  color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 1.075rem);
}

.eyebrow {
  display: inline-block;
  margin-block-end: 1rem;
  padding: .32rem 1rem;
  border: 1px solid var(--border-lift);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
}
:root[data-theme='dark'] .eyebrow { color: var(--brand-hover); }

.accent-text { color: var(--brand); }
:root[data-theme='dark'] .accent-text { color: var(--brand-hover); }

.grid { display: grid; gap: 1.15rem; }
.grid--services { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid--why      { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }
.grid--stats    { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.15rem; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .78rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-hover); }

.btn--ghost {
  border-color: var(--border-lift);
  background: transparent;
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
:root[data-theme='dark'] .btn--ghost:hover { color: var(--brand-hover); }

.btn--lg { padding: .95rem 1.85rem; font-size: 1rem; }
.btn--sm { padding: .55rem 1.15rem; font-size: .875rem; }

.icon { width: 20px; height: 20px; flex: none; fill: none; }
/* Directional glyphs must mirror in RTL or the arrow points the wrong way. */
[dir='rtl'] .icon--flip { transform: scaleX(-1); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  background: transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.icon-btn:hover { color: var(--brand); border-color: var(--border-lift); background: var(--brand-soft); }
:root[data-theme='dark'] .icon-btn:hover { color: var(--brand-hover); }

/* Only one of the two glyphs is ever shown, per active theme. */
.icon--moon { display: none; }
:root[data-theme='light'] .icon--sun  { display: none; }
:root[data-theme='light'] .icon--moon { display: block; }

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav.is-stuck { border-block-end-color: var(--border); box-shadow: var(--shadow-sm); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 72px;
}

/* Two-line lockup (Latin over Arabic), so it needs a little more height than a
   single-line wordmark to keep the Arabic legible. */
.nav__logo { width: auto; height: 40px; }
:root[data-theme='light'] .nav__logo,
:root[data-theme='light'] .footer__logo {
  /* The artwork is cream (#EBE2D6) — built for dark backgrounds and effectively
     invisible on the cream light-mode surface. brightness(0) keeps the alpha
     channel and renders the mark as a solid silhouette. */
  filter: brightness(0) opacity(.88);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-inline-start: auto;
}

.nav__link {
  position: relative;
  padding: .5rem .85rem;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: .925rem;
  font-weight: 500;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover,
.nav__link.is-active { color: var(--text); background: var(--brand-soft); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-inline-start: .25rem;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; height: 40px;
  padding-inline: .6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 700;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.lang-switch:hover { color: var(--brand); border-color: var(--border-lift); background: var(--brand-soft); }
:root[data-theme='dark'] .lang-switch:hover { color: var(--brand-hover); }

.nav__burger { display: none; }

.burger { display: block; width: 18px; }
.burger i {
  display: block; height: 2px; margin-block: 3px;
  border-radius: 2px; background: currentColor;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav__burger[aria-expanded='true'] .burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded='true'] .burger i:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded='true'] .burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  padding-block: clamp(4rem, 11vw, 8rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  inset-block-start: -34%;
  /* Physical `left` on purpose. This decoration is symmetric and simply needs
     to be centred; with inset-inline-start the RTL page resolves it to
     `right: 50%`, and the -50% translate then pushes it fully off-canvas. */
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 130%);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--green-wash) 0%, transparent 62%);
  pointer-events: none;
}

.hero__inner { position: relative; text-align: center; }

.hero__title {
  font-size: clamp(2.3rem, 6.4vw, 4.15rem);
  margin-block-end: 1.4rem;
}

.hero__subtitle {
  max-width: 620px;
  margin-inline: auto;
  color: var(--text-muted);
  font-size: clamp(1.02rem, 2vw, 1.19rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
  margin-block-start: 2.3rem;
}

.hero__note {
  margin-block-start: 1.2rem;
  color: var(--text-faint);
  font-size: .875rem;
}

/* ---------------------------------------------------------------- cards -- */
.card {
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-lift);
  box-shadow: var(--shadow);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-block-end: 1.1rem;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
}
:root[data-theme='dark'] .card__icon { color: var(--brand-hover); }
.card__icon .icon { width: 22px; height: 22px; }

.card__title { font-size: 1.06rem; margin-block-end: .5rem; }
.card__body  { color: var(--text-muted); font-size: .93rem; }

/* ---------------------------------------------------------------- steps -- */
.steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  counter-reset: step;
}

.step {
  display: flex;
  gap: 1.1rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.step:hover { transform: translateY(-3px); border-color: var(--border-lift); }

/* The two steps clients actually buy — quality review and their own sign-off —
   are the differentiator, so they carry the brand edge. */
.step--key {
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 62%);
}

.step__num {
  flex: none;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
:root[data-theme='dark'] .step__num { color: var(--brand-hover); }
.step--key .step__num { opacity: 1; }

.step__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.04rem;
  margin-block-end: .4rem;
}

.step__badge { width: 16px; height: 16px; color: var(--brand); }
:root[data-theme='dark'] .step__badge { color: var(--brand-hover); }

.step__body { color: var(--text-muted); font-size: .92rem; }

/* ------------------------------------------------------------- features -- */
.feature { display: flex; gap: 1rem; align-items: flex-start; }

.feature__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
}
:root[data-theme='dark'] .feature__check { color: var(--brand-hover); }
.feature__check .icon { width: 16px; height: 16px; }

.feature__title { font-size: 1.02rem; margin-block-end: .35rem; }
.feature__body  { color: var(--text-muted); font-size: .92rem; }

/* ---------------------------------------------------------------- stats -- */
.section--stats { padding-block: clamp(3rem, 6vw, 4.5rem); }

.stat {
  padding: 1.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.stat__value {
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
:root[data-theme='dark'] .stat__value { color: var(--brand-hover); }

.stat__suffix { font-size: .58em; margin-inline-start: .12em; }

.stat__label {
  margin-block-start: .45rem;
  color: var(--text-muted);
  font-size: .89rem;
}

/* ---------------------------------------------------------------- about -- */
.about {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.about__body {
  color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 1.06rem);
}
.about__body + .about__body { margin-block-start: 1rem; }

.about__places {
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.about__places-label {
  margin-block-end: 1rem;
  color: var(--text-faint);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.place-list { display: grid; gap: .7rem; }

.place {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .95rem;
  font-weight: 500;
}

.place__pin { width: 17px; height: 17px; color: var(--brand); flex: none; }
:root[data-theme='dark'] .place__pin { color: var(--brand-hover); }

/* -------------------------------------------------------------- sectors -- */
/* 260px min lands 8 sectors as an even 4 + 4 at full width; a smaller minimum
   fits 5 per row and leaves a ragged trailing row of 3. */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .85rem;
}

.sector {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: .95rem;
  font-weight: 500;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.sector:hover { border-color: var(--border-lift); transform: translateY(-2px); }

.sector__tick { width: 15px; height: 15px; flex: none; color: var(--brand); }
:root[data-theme='dark'] .sector__tick { color: var(--brand-hover); }

/* ------------------------------------------------------------ logo wall -- */
/* Locked to the dark palette in both themes — see the note in clients.html.
   Tokens are re-declared rather than inherited so the band is identical
   whichever theme is active. */
.clients-band {
  --surface: #1A241F;
  --border: rgba(215, 208, 196, .11);
  --border-lift: rgba(215, 208, 196, .22);
  --text: #F1EDE3;
  --text-muted: #A3AC9F;
  /* The brand tokens must be pinned to their dark-mode values too. Left to
     inherit, light mode resolves them to the deep green, which renders the
     eyebrow pill as dark-on-dark and invisible. */
  --brand: #D88A31;
  --brand-hover: #E59B48;
  --brand-soft: rgba(216, 138, 49, .13);
  background: #101A15;
  color: var(--text);
  /* In light mode the dark ground separates the band on its own; in dark mode
     the neighbouring sections are a near-identical green, so these hairlines
     are what make it read as a distinct band. */
  border-block: 1px solid rgba(215, 208, 196, .09);
}
.clients-band .section__title { color: var(--text); }
.clients-band .section__subtitle { color: var(--text-muted); }
.clients-band .eyebrow { color: var(--brand-hover); }

/* Fixed column counts rather than auto-fill: 16 logos divide evenly by 4 and by
   2, so every row stays full. auto-fill lands on 5 or 6 columns at common
   widths and leaves a half-empty final row. */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}

.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed height reserves the space before the lazy images land, so the grid
     never reflows as they decode. */
  height: 150px;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.logo-tile:hover { border-color: var(--border-lift); background: #202C25; }

.logo-tile__img {
  max-width: 82%;
  max-height: 88px;
  /* The width/height attributes give the browser the aspect ratio up front;
     these keep it from actually rendering at those intrinsic pixel sizes. */
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Deliberately not dimmed at rest. The usual logo-wall treatment assumes a set
   of uniform monochrome marks; here one client's crest is full colour and dark
   navy, and any rest-opacity below 1 pushes it close to invisible on this
   ground. Hover feedback lives on the tile instead. */

/* --------------------------------------------------------- social pills -- */
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 600;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.social-pill:hover { color: var(--brand); border-color: var(--border-lift); background: var(--brand-soft); }
:root[data-theme='dark'] .social-pill:hover { color: var(--brand-hover); }
.social-pill .icon { width: 17px; height: 17px; }

/* -------------------------------------------------------------- contact -- */
.contact-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.contact-card__intro .section__title { margin-block-end: .8rem; }
.contact-card__intro .section__subtitle { margin-block-end: 1.9rem; }

.contact-list { display: grid; gap: 1.15rem; align-content: start; }

.contact-item { display: flex; gap: .9rem; align-items: center; }

.contact-item__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}
:root[data-theme='dark'] .contact-item__icon { color: var(--brand-hover); }
.contact-item__icon .icon { width: 19px; height: 19px; }

.contact-item__text { display: flex; flex-direction: column; }

.contact-item__label {
  color: var(--text-faint);
  font-size: .78rem;
  font-weight: 500;
}

.contact-item__value {
  font-weight: 600;
  font-size: .96rem;
  transition: color .18s var(--ease);
}
/* Phone numbers and emails stay LTR inside the RTL page, but must still align
   to the start edge of their column rather than jumping to the right. */
[dir='rtl'] .contact-item__value[dir='ltr'] { text-align: right; }
a.contact-item__value:hover { color: var(--brand); }
:root[data-theme='dark'] a.contact-item__value:hover { color: var(--brand-hover); }

.contact-social {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--border);
}
.contact-social__links { display: flex; gap: .5rem; }

/* --------------------------------------------------------------- footer -- */
.footer {
  padding-block-start: clamp(3rem, 6vw, 4.5rem);
  border-block-start: 1px solid var(--border);
  background: var(--bg-alt);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding-block-end: 2.2rem;
}

.footer__logo { width: auto; height: 42px; margin-block-end: .8rem; }
.footer__tagline { color: var(--text-muted); font-size: .89rem; }

.footer__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__links a {
  color: var(--text-muted);
  font-size: .9rem;
  transition: color .18s var(--ease);
}
.footer__links a:hover { color: var(--brand); }
:root[data-theme='dark'] .footer__links a:hover { color: var(--brand-hover); }

.footer__bottom {
  padding-block: 1.3rem;
  border-block-start: 1px solid var(--border);
  color: var(--text-faint);
  font-size: .82rem;
  text-align: center;
}

/* --------------------------------------------------------- reveal on scroll */
/* Gated on .js (set by the inline head script) so a visitor without JavaScript
   sees the content rather than a page of invisible elements. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 900px) {
  .contact-card { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  /* Straight to 2 columns — 3 would leave an orphan on the final row. */
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .logo-tile { height: 124px; }
  .logo-tile__img { max-height: 70px; }
}

@media (max-width: 780px) {
  .nav__burger { display: inline-flex; }
  .nav__cta { display: none; }

  /* .nav__links carries the auto margin on desktop, but it goes out of flow
     here (absolute + hidden), leaving the controls floating beside the logo.
     Move the auto margin onto the actions so the logo sits hard against one
     edge and the controls against the other. */
  .nav__actions { margin-inline-start: auto; }

  .nav__links {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    margin: 0;
    padding: .75rem 1.25rem 1.25rem;
    border-block-end: 1px solid var(--border);
    background: var(--bg);
    box-shadow: var(--shadow);
  }
  .nav__links.is-open { display: flex; }
  .nav__link { padding: .8rem 1rem; font-size: 1rem; }
}

@media (max-width: 520px) {
  .hero__actions .btn { width: 100%; }
  .step { flex-direction: column; gap: .7rem; }
}

/* ------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Must match the .js prefix above, or this loses on specificity and
     reduced-motion users get a blank page until each section scrolls in. */
  .js .reveal { opacity: 1; transform: none; }
}