/* StartupX marketing site.
 *
 * Every colour, face, step and duration comes from startupx-tokens.css; there
 * are no literal hex values below the reset. Square corners, 1px hairlines in
 * place of shadows, one lime element per screenful.
 *
 * Direction is expressed in logical properties throughout — inline-start,
 * padding-inline, text-align: start — so /ar is the same stylesheet with
 * dir="rtl" on the document and nothing else. */

/* ── Reset ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: calc(var(--sx-header) + var(--sx-8));
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Images carry width and height attributes so the browser can reserve their
   box before they load. Those attributes map to the CSS width and height
   properties, though, and an explicit height beats aspect-ratio — so without
   this every framed image renders at its intrinsic pixel height. */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--sx-lime);
  outline-offset: 3px;
}

::selection {
  background: var(--sx-lime);
  color: var(--sx-lime-ink);
}

/* ── Base ──────────────────────────────────────────────────────────── */
:root {
  --sx-header: 64px;
  --sx-wrap: 1240px;
  --sx-gutter: var(--sx-6);
  /* The hero line is a sentence, not a label, so it is allowed to grow past
     the display step on a wide screen where it still sets in two lines. */
  --sx-hero: 600 clamp(32px, 6vw, 76px) / 1.02 var(--sx-font-sans);
}

@media (min-width: 720px) {
  :root {
    --sx-gutter: var(--sx-12);
  }
}

body {
  background: var(--sx-ink);
  color: var(--sx-body);
  font: var(--sx-body-t);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 360px is the floor the layout is built to; below it the page scrolls
     rather than reflowing into something unreadable. */
  min-width: 320px;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  color: var(--sx-bone);
  font-family: var(--sx-font-sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

strong {
  color: var(--sx-bone);
  font-weight: 600;
}

/* ── Layout primitives ─────────────────────────────────────────────── */
.wrap {
  margin-inline: auto;
  max-width: var(--sx-wrap);
  padding-inline: var(--sx-gutter);
  width: 100%;
}

/* Sections are divided by a hairline, never by a change of ground. */
.band {
  border-block-start: var(--sx-border);
  padding-block: clamp(var(--sx-16), 9vw, 120px);
}

.band--tight {
  padding-block: clamp(var(--sx-12), 6vw, var(--sx-22));
}

/* The mono voice: labels, status, data, counts. Never set in the muted ash —
   that colour has a 15px floor and this is 11px. */
.mono {
  color: var(--sx-body);
  font: var(--sx-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mono--bone {
  color: var(--sx-bone);
}

/* Section masthead: a numbered mono label over the heading, split by a rule
   that runs to the end of the measure. */
.masthead {
  align-items: baseline;
  display: flex;
  gap: var(--sx-4);
  margin-block-end: var(--sx-12);
}

.masthead__rule {
  background: var(--sx-hairline);
  block-size: 1px;
  flex: 1;
}

.lede {
  color: var(--sx-body);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  max-width: 62ch;
}

.ash {
  color: var(--sx-ash);
  font-size: 15px;
  line-height: 1.6;
}

/* ── The mark ──────────────────────────────────────────────────────── */
/* Drawn inline so it costs no request. Clear space is half its height, held
   by the padding on whatever wraps it — never by scaling the glyph. */
.mark {
  block-size: var(--size, 24px);
  flex: none;
  inline-size: var(--size, 24px);
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: var(--sx-3);
}

.brand__word {
  color: var(--sx-bone);
  font-family: var(--sx-font-sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.brand__word i {
  color: var(--sx-ash);
  font-style: normal;
}

/* ── Buttons and links ─────────────────────────────────────────────── */
/* Three weights of call to action, so a screenful can carry more than one
   without two things claiming the eye at once:
     .btn--lime   the action. One to a screenful, never decorative.
     .btn--bone   the primary action where lime is already spoken for.
     .btn--ghost  the second way out — hairline, and quiet until hovered. */
.btn {
  align-items: center;
  background: transparent;
  border: var(--sx-border);
  border-radius: var(--sx-radius);
  color: var(--sx-bone);
  display: inline-flex;
  font-family: var(--sx-font-sans);
  font-size: 16px;
  font-weight: 600;
  gap: var(--sx-3);
  letter-spacing: -0.01em;
  padding: var(--sx-4) var(--sx-6);
  transition:
    background var(--sx-dur-state) var(--sx-ease),
    border-color var(--sx-dur-state) var(--sx-ease),
    color var(--sx-dur-state) var(--sx-ease);
}

.btn--lime {
  background: var(--sx-lime);
  border-color: var(--sx-lime);
  color: var(--sx-lime-ink);
}

.btn--lime:hover {
  background: var(--sx-bone);
  border-color: var(--sx-bone);
}

.btn--bone {
  background: var(--sx-bone);
  border-color: var(--sx-bone);
  color: var(--sx-ink);
}

.btn--bone:hover {
  background: var(--sx-lime);
  border-color: var(--sx-lime);
  color: var(--sx-lime-ink);
}

/* A row of calls to action, wrapping rather than shrinking on a phone. */
.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sx-3);
  margin-block-start: var(--sx-2);
}

.wa {
  flex: none;
}

.btn__arrow {
  transition: transform var(--sx-dur-state) var(--sx-ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* RTL: the arrow points the way the text runs. */
[dir="rtl"] .btn__arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .btn:hover .btn__arrow {
  transform: scaleX(-1) translateX(3px);
}

.btn--ghost {
  background: transparent;
  border-color: var(--sx-hairline);
  color: var(--sx-bone);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--sx-bone);
}

/* An outbound link: mono, underlined by a hairline that thickens on hover. */
.out {
  align-items: center;
  border-block-end: 1px solid var(--sx-hairline);
  color: var(--sx-bone);
  display: inline-flex;
  font: var(--sx-label);
  gap: var(--sx-2);
  letter-spacing: 0.2em;
  padding-block-end: var(--sx-2);
  text-transform: uppercase;
  transition:
    border-color var(--sx-dur-state) var(--sx-ease),
    color var(--sx-dur-state) var(--sx-ease);
}

.out:hover {
  border-color: currentColor;
}

.out--lime {
  color: var(--sx-lime);
}

/* Off-screen until it is tabbed to, then the first thing on the page. */
.skip {
  position: absolute;
  inset-block-start: var(--sx-2);
  inset-inline-start: -9999px;
  z-index: 60;
}

.skip:focus-visible {
  background: var(--sx-lime);
  border-color: var(--sx-lime);
  color: var(--sx-lime-ink);
  inset-inline-start: var(--sx-4);
}

/* ── Header ────────────────────────────────────────────────────────── */
.header {
  background: color-mix(in srgb, var(--sx-ink) 88%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: var(--sx-border);
  inset-block-start: 0;
  position: sticky;
  z-index: 40;
}

.header__bar {
  align-items: center;
  block-size: var(--sx-header);
  display: flex;
  gap: var(--sx-6);
  justify-content: space-between;
}

.nav {
  align-items: center;
  display: flex;
  gap: var(--sx-6);
}

.nav__link {
  color: var(--sx-body);
  font: var(--sx-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color var(--sx-dur-state) var(--sx-ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--sx-bone);
}

/* The language switch is a hairline square, not a dropdown: there are two. */
.lang {
  border: var(--sx-border);
  color: var(--sx-body);
  font: var(--sx-label);
  letter-spacing: 0.2em;
  padding: var(--sx-2) var(--sx-3);
  text-transform: uppercase;
  transition:
    border-color var(--sx-dur-state) var(--sx-ease),
    color var(--sx-dur-state) var(--sx-ease);
}

.lang:hover {
  border-color: var(--sx-bone);
  color: var(--sx-bone);
}

@media (max-width: 599px) {
  .nav {
    gap: var(--sx-4);
  }

  .nav__link {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

/* ── Hero: the scroll stage ────────────────────────────────────────── */
/* After GoBachaloria's hero, rebuilt in this brand. A scroller a screen and a
   half tall holds a stage that sticks under the header. The product grid sits
   in the middle, count tags float around it, and the line runs along the
   bottom. Over the first half-screen of scrolling the grid slides aside, the
   tags fade, and the sub-line and the lime button arrive in the space left
   behind. Under 1024px the stage unsticks and the layers fall into reading
   order — the choreography needs a wide screen to have room to move in.
   site.js writes the transforms; this file owns the resting state. */
.hero {
  position: relative;
}

.stage {
  display: flex;
  flex-direction: column;
  gap: var(--sx-12);
  padding-block: var(--sx-16) var(--sx-12);
}

.hero__line h1 {
  font: var(--sx-hero);
  letter-spacing: -0.03em;
  max-width: 20ch;
}

.hero__sub {
  color: var(--sx-body);
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.5;
  max-width: 40ch;
}

.hero__sub b {
  color: var(--sx-bone);
  font-weight: 600;
}

.hero__cta {
  margin-block-start: var(--sx-8);
}

/* The designed rectangle: three live products and the studio, as four square
   tiles on a hairline grid.
   Three nested elements, because three different things move: .hero__grid is
   the layer the stage slides and scales, .hero__tilt takes the pointer's
   perspective lean on its own so nothing set in type leans with it, and
   .hero__tiles is the grid itself. */
/* The grid is the mark itself, not a rectangle standing in for it.
 *
 * The Bracket S is two squares offset on a diagonal — read on a 2x3 lattice,
 * four cells are filled and two are cut away:
 *
 *     .  1        1  Ashrhly      blue      cut  the top-left notch
 *     3  2        2  Techmakerz   teal      cut  the bottom-right notch
 *     4  .        3  GoBachaloria amber
 *                 4  StartupX     lime
 *
 * Every block is the studio's own lime, so the four read as one mark rather
 * than four logos sharing a silhouette. No gap and no border either: the
 * blocks meet, and the shape's outline is the logo rather than a box around
 * it. What separates the products is their marks and their names. */
.hero__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
}

.tile {
  background: var(--sx-lime);
  color: var(--sx-lime-ink);
  display: flex;
  flex-direction: column;
  gap: var(--sx-2);
  min-block-size: 104px;
  padding: var(--sx-4);
  --plogo-ground: var(--sx-lime);
}

/* Placement is written twice, once per direction, because a grid fills from
   the inline start: under RTL `grid-column: 2` is the left-hand column, and
   the shape would come out mirrored — which is flipping the logo. */
html:not([dir="rtl"]) .tile--1,
html:not([dir="rtl"]) .tile--2 {
  grid-column: 2;
}

html:not([dir="rtl"]) .tile--3,
html:not([dir="rtl"]) .tile--4 {
  grid-column: 1;
}

[dir="rtl"] .tile--1,
[dir="rtl"] .tile--2 {
  grid-column: 1;
}

[dir="rtl"] .tile--3,
[dir="rtl"] .tile--4 {
  grid-column: 2;
}

.tile--1 {
  grid-row: 1;
}

.tile--2,
.tile--3 {
  grid-row: 2;
}

.tile--4 {
  grid-row: 3;
}

/* The product's own mark, in whatever colour the tile is set in. */
.plogo {
  flex: none;
}

.tile__name {
  color: inherit;
  font-family: var(--sx-font-sans);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-block-start: var(--sx-2);
}

.tile__name span {
  display: block;
}

.tile__ar {
  font-family: var(--sx-font-ar);
  letter-spacing: 0;
}

/* Pushed to the foot of the block, so the four facts line up across the shape
   however long the names above them run. It takes the block's own ink at a
   step back rather than the page's muted grey, which would disappear on
   amber and lime. */
.tile__fact {
  color: inherit;
  font-size: 15px;
  line-height: 1.35;
  margin-block-start: auto;
  opacity: 0.74;
  padding-block-start: var(--sx-3);
}

/* Count tags: square hairline chips, the pills of that hero made honest. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sx-2);
}

.tag {
  border: var(--sx-border);
  color: var(--sx-body);
  font: var(--sx-label);
  letter-spacing: 0.2em;
  padding: var(--sx-2) var(--sx-3);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Below the stage breakpoint the sub-line and its buttons are simply on the
   page, so the resting pair would be a second copy of them. */
.hero__rest {
  display: none;
}

.hero__cue {
  align-items: center;
  color: var(--sx-body);
  display: none;
  flex-direction: column;
  font: var(--sx-label);
  gap: var(--sx-2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .hero {
    block-size: 165vh;
  }

  .stage {
    block-size: calc(100vh - var(--sx-header));
    display: block;
    inset-block-start: var(--sx-header);
    overflow: hidden;
    padding: 0;
    position: sticky;
  }

  /* Each layer is placed against the stage and then moved by script. The
     stage carries .wrap's gutter, and an absolute child is positioned
     against the padding box, so 0 here already sits on the gutter. */
  .hero__line {
    inset-block-end: 8%;
    inset-inline: 0;
    position: absolute;
    z-index: 3;
  }

  .hero__line h1 {
    font-size: clamp(40px, 4.6vw, 76px);
    margin-inline: auto;
    max-width: 26ch;
    text-align: center;
  }

  .hero__aside {
    inset-block-start: 44%;
    inset-inline-start: 6%;
    opacity: 0;
    position: absolute;
    transform: translateY(-50%);
    inline-size: 34%;
    z-index: 2;
  }

  /* Centring is physical, not logical: half the element's own width, the
     same in both directions. `left` and `translate` here would be wrong if
     written as inline-start, which flips the anchor edge under RTL. */
  .hero__grid {
    inset-block-start: 42%;
    left: 50%;
    inline-size: min(560px, 44vw, 68vh);
    position: absolute;
    translate: -50% -50%;
    z-index: 1;
    will-change: transform;
  }

  .hero__tilt {
    will-change: transform;
  }

  .hero__tags {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
    will-change: opacity;
  }

  /* Scattered around the grid rather than queued under it. */
  .hero__tags .tag {
    pointer-events: auto;
    position: absolute;
  }

  /* The calls to action at rest, in the spot the sub-line will occupy once
     it arrives: this layer fades out over exactly the scroll the sub-line
     fades in over, so one of the two is always on screen. */
  /* Stacked, and held to the same column the sub-line will occupy, so the
     pair never runs under the grid on a narrow desktop window. */
  .hero__rest {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    inline-size: 34%;
    inset-block-start: 44%;
    inset-inline-start: 6%;
    pointer-events: auto;
    position: absolute;
    translate: 0 -50%;
  }

  /* Scattered clear of the band between 36% and 56% on the starting side —
     that is where the resting buttons sit, and after them the sub-line. */
  .hero__tags .tag:nth-child(1) {
    inset-block-start: 20%;
    inset-inline-start: 9%;
  }

  .hero__tags .tag:nth-child(2) {
    inset-block-start: 27%;
    inset-inline-end: 9%;
  }

  .hero__tags .tag:nth-child(3) {
    inset-block-start: 69%;
    inset-inline-start: 7%;
  }

  .hero__tags .tag:nth-child(4) {
    inset-block-start: 52%;
    inset-inline-end: 11%;
  }

  .hero__tags .tag:nth-child(5) {
    inset-block-start: 78%;
    inset-inline-start: 17%;
  }

  .hero__cue {
    display: inline-flex;
    inset-block-end: 2%;
    left: 50%;
    position: absolute;
    translate: -50%;
    z-index: 3;
  }

  .hero__tiles {
    aspect-ratio: 1;
  }

  .tile {
    min-block-size: 0;
    padding: var(--sx-6);
  }
}

/* ── What we do ────────────────────────────────────────────────────── */
/* Three columns, no icons. The rule above each column is the only ornament. */
.cols {
  display: grid;
  gap: var(--sx-12) var(--sx-8);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

.col {
  border-block-start: var(--sx-border);
  display: flex;
  flex-direction: column;
  gap: var(--sx-3);
  padding-block-start: var(--sx-6);
}

.col h3 {
  font-size: clamp(21px, 2.2vw, 26px);
}

/* ── Products ──────────────────────────────────────────────────────── */
.row {
  align-items: center;
  border-block-start: var(--sx-border);
  display: grid;
  gap: var(--sx-8);
  grid-template-columns: 1fr;
  padding-block: clamp(var(--sx-12), 7vw, var(--sx-22));
}

@media (min-width: 900px) {
  .row {
    gap: clamp(var(--sx-12), 6vw, 96px);
    grid-template-columns: 1fr 1fr;
  }

  /* Alternating: on even rows the panel takes the second column, so the
     copy leads. Grid resolves both against the writing direction, so /ar
     mirrors without a second rule. */
  .row:nth-child(even) .row__media {
    grid-column: 2;
    grid-row: 1;
  }
}

.row__body {
  display: flex;
  flex-direction: column;
  gap: var(--sx-4);
}

.row__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sx-3);
  font-size: clamp(28px, 3.4vw, 40px);
}

/* The Arabic name leads where a product has one. */
.row__name .ar {
  font-family: var(--sx-font-ar);
  letter-spacing: 0;
}

.row__name .lat {
  color: var(--sx-ash);
  font-size: 0.62em;
}

.row__say {
  color: var(--sx-body);
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.5;
  max-width: 46ch;
}

/* Three facts, in mono, on hairlines. */
.facts {
  border-block-start: var(--sx-border);
  display: flex;
  flex-direction: column;
}

.facts li {
  border-block-end: var(--sx-border);
  color: var(--sx-body);
  font: var(--sx-label);
  letter-spacing: 0.2em;
  padding-block: var(--sx-3);
  text-transform: uppercase;
}

.status {
  align-items: center;
  display: flex;
  gap: var(--sx-3);
}

.status__dot {
  background: var(--sx-bone);
  block-size: 7px;
  flex: none;
  inline-size: 7px;
}

/* The proof: a capture of the product's live home page, framed in a hairline
   and captioned in mono with the domain it was taken from. The screenshot is
   the one place a product's own colour is allowed onto this page. */
.shot {
  display: block;
  inline-size: 100%;
}

.shot img {
  aspect-ratio: 3 / 2;
  background: var(--sx-surface);
  border: var(--sx-border);
  inline-size: 100%;
  object-fit: cover;
  object-position: top center;
}

.shot figcaption {
  border-block-end: var(--sx-border);
  border-inline: var(--sx-border);
  padding: var(--sx-3) var(--sx-4);
}

/* The mark and the name on one baseline. */
.row__head {
  align-items: center;
  display: flex;
  gap: var(--sx-4);
}

/* The line the product's own site leads with, in its own voice. */
.row__own {
  color: var(--sx-bone);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  max-width: 22ch;
}

[dir="rtl"] .row__own,
[lang="ar"] .row__own {
  font-family: var(--sx-font-ar);
  letter-spacing: 0;
}

/* ── Build with us ─────────────────────────────────────────────────── */
/* The funnel close. It sits directly under the products, where the reader has
   just seen three that exist and is best placed to picture a fourth. */
.next__grid {
  display: grid;
  gap: var(--sx-8);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .next__grid {
    gap: clamp(var(--sx-12), 6vw, 96px);
    grid-template-columns: 1fr 1fr;
  }
}

.next__title {
  font-size: clamp(30px, 4.4vw, 56px);
  max-width: 16ch;
}

.next__body {
  display: flex;
  flex-direction: column;
  gap: var(--sx-6);
}

/* A standing way to start the conversation, at any scroll position. Hairline
   on the surface until it is hovered, so it never competes with the one lime
   action in view. */
.wafloat {
  align-items: center;
  background: var(--sx-surface);
  border: var(--sx-border);
  bottom: var(--sx-6);
  color: var(--sx-bone);
  display: inline-flex;
  font: var(--sx-label);
  gap: var(--sx-2);
  inset-inline-end: var(--sx-6);
  letter-spacing: 0.2em;
  padding: var(--sx-3) var(--sx-4);
  position: fixed;
  text-transform: uppercase;
  transition:
    background var(--sx-dur-state) var(--sx-ease),
    border-color var(--sx-dur-state) var(--sx-ease),
    color var(--sx-dur-state) var(--sx-ease);
  z-index: 50;
}

.wafloat:hover {
  background: var(--sx-lime);
  border-color: var(--sx-lime);
  color: var(--sx-lime-ink);
}

/* On a phone the label would eat the row; the glyph alone is the button. */
@media (max-width: 599px) {
  .wafloat span {
    display: none;
  }

  .wafloat {
    bottom: var(--sx-4);
    inset-inline-end: var(--sx-4);
    padding: var(--sx-3);
  }
}

/* ── Founder ───────────────────────────────────────────────────────── */
.founder {
  display: grid;
  gap: var(--sx-8);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .founder {
    gap: clamp(var(--sx-12), 5vw, 72px);
    grid-template-columns: minmax(0, 320px) 1fr;
  }
}

/* One hard square crop. No rounding, no ring, no shadow. */
.portrait {
  aspect-ratio: 1;
  border: var(--sx-border);
  max-inline-size: 320px;
  object-fit: cover;
  inline-size: 100%;
}

.founder__body {
  display: flex;
  flex-direction: column;
  gap: var(--sx-4);
}

/* A run of numbers, set as data rather than prose. */
.stats {
  border-block-start: var(--sx-border);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--sx-hairline);
  margin-block-start: var(--sx-4);
}

@media (min-width: 620px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stats div {
  background: var(--sx-ink);
  padding: var(--sx-4) var(--sx-4) var(--sx-6);
}

.stats dt {
  color: var(--sx-bone);
  font-family: var(--sx-font-sans);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.stats dd {
  color: var(--sx-body);
  font: var(--sx-label);
  letter-spacing: 0.2em;
  margin-block-start: var(--sx-2);
  text-transform: uppercase;
}

/* ── Contact ───────────────────────────────────────────────────────── */
/* Email and WhatsApp. No form, no newsletter, nothing to dismiss. */
.contact {
  display: grid;
  gap: var(--sx-8);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .contact {
    align-items: end;
    grid-template-columns: 1fr auto;
  }
}

.contact__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sx-6);
}

.contact__line {
  border-block-start: var(--sx-border);
  padding-block-start: var(--sx-4);
}

.contact__line a {
  color: var(--sx-bone);
  display: inline-block;
  font-family: var(--sx-font-sans);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-block-start: var(--sx-2);
  transition: color var(--sx-dur-state) var(--sx-ease);
}

.contact__line a:hover {
  color: var(--sx-lime);
}

/* Phone numbers read left-to-right even on an RTL page. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── Footer ────────────────────────────────────────────────────────── */
.footer {
  border-block-start: var(--sx-border);
  padding-block: var(--sx-12);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sx-8);
  justify-content: space-between;
}

.footer__sig {
  color: var(--sx-lime);
  font: var(--sx-label);
  letter-spacing: 0.2em;
  margin-block-start: var(--sx-3);
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sx-6);
}

.footer__links a {
  color: var(--sx-body);
  font: var(--sx-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color var(--sx-dur-state) var(--sx-ease);
}

.footer__links a:hover {
  color: var(--sx-bone);
}

.footer__legal {
  border-block-start: var(--sx-border);
  color: var(--sx-ash);
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  gap: var(--sx-4) var(--sx-8);
  justify-content: space-between;
  margin-block-start: var(--sx-12);
  padding-block-start: var(--sx-6);
}

/* ── Motion ────────────────────────────────────────────────────────── */
/* Entrances at 220ms, state changes at 120ms, both on the brand's curve. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--sx-dur-enter) var(--sx-ease),
    transform var(--sx-dur-enter) var(--sx-ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Without script there is no observer to say "you are on screen", and every
   revealed block would stay at zero. The animation is a nicety; the page is
   not. This hands the words back to anyone whose script did not run. */
.no-js .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.no-js .hero__aside {
  opacity: 1;
}

[data-parallax] {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

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

  /* The stage stops being a stage: everything sits at its final position and
     the page is read, not watched. */
  .hero__aside {
    opacity: 1;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Print ─────────────────────────────────────────────────────────── */
@media print {
  .header,
  .hero__tags,
  .hero__cue {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}