/* ==========================================================================
   Mosamem Studio — home page
   One bold moment (the flashlight hero), then calm, measured sections.
   ========================================================================== */

/* light-cone parameters: set per frame by home.js on the two layers that use them.
   Registered as non-inheriting so a frame only restyles those two elements. */
@property --fl-x { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --fl-y { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --fl-a { syntax: '<angle>'; inherits: false; initial-value: 180deg; }
@property --fl-w { syntax: '<angle>'; inherits: false; initial-value: 18deg; }
@property --fl-r { syntax: '<length>'; inherits: false; initial-value: 900px; }
@property --fl-d { syntax: '<length>'; inherits: false; initial-value: 40px; }

/* AA workaround until main.css changes (see the foundation request): amber #C97800 on paper is
   about 3:1, too low for small labels. On paper, text accents here use a deeper amber mixed
   from the brand constants (about 5.4:1 on paper, 4.8:1 on paper-grey). */
.band--paper,
:root[data-theme="light"] main .band { --accent-text: color-mix(in srgb, var(--amber) 66%, var(--ink)); }

/* ---------- 1 · hero: the flashlight ---------- */
.hero {
  --lamp-w: 84px;
  --lamp-top: 14px;
  --lamp-end: 16px;
  overflow: hidden;
  isolation: isolate;
  /* the edge of the drawing sheet: the light stops here on purpose */
  border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 720px) {
  .hero { --lamp-end: max(24px, calc((100% - 1200px) / 2)); }
}
@media (min-width: 760px) {
  .hero { --lamp-w: clamp(112px, 11vw, 150px); --lamp-top: clamp(22px, 3vw, 44px); }
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* the drawing: faint at rest, a lit copy shows inside the cone */
.hero__dwg {
  position: absolute;
  inset: 0;
  color: var(--paper);
  opacity: .16;
}
.hero__dwg--lit {
  opacity: 1;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  --dwg-acc: var(--lamp);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--paper) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--paper) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, var(--paper) 13%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--paper) 13%, transparent) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  background-position: -1px -1px;
}

/* drawing labels speak the mono "engineer" voice: always left-to-right, even on Arabic pages.
   (Set on the text only: on the svg it would flip the logical insets that place the pieces.) */
.dwg text, .door__art text { direction: ltr; unicode-bidi: isolate; }

.dwg {
  position: absolute;
  height: auto;
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dwg * { vector-effect: non-scaling-stroke; }
.dwg text {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
}
.dwg .faint { opacity: .5; }
.dwg .thin { opacity: .7; }
.dwg .hid { stroke-dasharray: 5 4; opacity: .8; }
.dwg .ctr { stroke-dasharray: 16 4 3 4; opacity: .7; }
.dwg .acc { stroke: var(--dwg-acc, currentColor); }
.dwg .acc-f { fill: var(--dwg-acc, currentColor); stroke: none; }
.dwg .acc-t { fill: var(--dwg-acc, currentColor); }

/* drawing layout — phone: the sketch behind the headline, the CAD views under the buttons,
   nothing dense behind the paragraph */
.dwg--block { width: min(calc(100% - var(--lamp-w) - 56px), 240px); top: 14px; inset-inline-start: 16px; }
.dwg--sketch { width: 52%; top: 150px; inset-inline-start: 4%; }
.dwg--print { display: none; }
.dwg--cad { width: 92%; bottom: -1%; inset-inline-start: 4%; }
@media (min-width: 760px) {
  .dwg--block { width: 24%; max-width: 330px; top: auto; bottom: 22px; inset-inline-start: max(24px, calc((100% - 1200px) / 2)); }
  .dwg--sketch { width: 19%; max-width: 260px; top: 7%; inset-inline-start: 37%; }
  .dwg--print { display: block; width: 13%; max-width: 190px; bottom: 5%; inset-inline-start: 45%; }
  .dwg--cad { width: 36%; max-width: 500px; bottom: 3%; inset-inline-start: auto; inset-inline-end: max(16px, calc((100% - 1240px) / 2)); }
}

/* the light: a conic cone from the lamp head, faded with distance */
.hero__glow,
.hero__dwg--lit {
  --fl-x: calc(100% - 92px);
  --fl-y: 40px;
  --fl-a: 212deg;
  --fl-w: 22deg;
  --fl-r: 760px;
  --fl-d: 25px;
}
html[dir="rtl"] .hero__glow,
html[dir="rtl"] .hero__dwg--lit { --fl-x: 92px; --fl-a: 148deg; }
@media (min-width: 760px) {
  .hero__glow,
  .hero__dwg--lit { --fl-x: calc(100% - 150px); --fl-y: 40px; --fl-a: 234deg; --fl-w: 17deg; --fl-r: 1150px; --fl-d: 60px; }
  html[dir="rtl"] .hero__glow,
  html[dir="rtl"] .hero__dwg--lit { --fl-x: 150px; --fl-a: 126deg; }
}

.hero__dwg--lit {
  -webkit-mask-image:
    conic-gradient(from calc(var(--fl-a) - var(--fl-w)) at var(--fl-x) var(--fl-y), transparent 0deg, #000 3deg, #000 calc(var(--fl-w) * 2 - 3deg), transparent calc(var(--fl-w) * 2)),
    radial-gradient(circle var(--fl-r) at var(--fl-x) var(--fl-y), transparent var(--fl-d), #000 calc(var(--fl-d) + 30px), #000 calc(var(--fl-r) * .5), transparent var(--fl-r));
  -webkit-mask-composite: source-in;
  mask-image:
    conic-gradient(from calc(var(--fl-a) - var(--fl-w)) at var(--fl-x) var(--fl-y), transparent 0deg, #000 3deg, #000 calc(var(--fl-w) * 2 - 3deg), transparent calc(var(--fl-w) * 2)),
    radial-gradient(circle var(--fl-r) at var(--fl-x) var(--fl-y), transparent var(--fl-d), #000 calc(var(--fl-d) + 30px), #000 calc(var(--fl-r) * .5), transparent var(--fl-r));
  mask-composite: intersect;
}
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle var(--fl-r) at var(--fl-x) var(--fl-y),
    transparent var(--fl-d),
    color-mix(in srgb, var(--lamp) 34%, transparent) calc(var(--fl-d) + 2px),
    color-mix(in srgb, var(--lamp) 13%, transparent) calc(var(--fl-r) * .42),
    color-mix(in srgb, var(--lamp) 4%, transparent) calc(var(--fl-r) * .75),
    transparent var(--fl-r));
  -webkit-mask-image: conic-gradient(from calc(var(--fl-a) - var(--fl-w)) at var(--fl-x) var(--fl-y), transparent 0deg, #000 3deg, #000 calc(var(--fl-w) * 2 - 3deg), transparent calc(var(--fl-w) * 2));
  mask-image: conic-gradient(from calc(var(--fl-a) - var(--fl-w)) at var(--fl-x) var(--fl-y), transparent 0deg, #000 3deg, #000 calc(var(--fl-w) * 2 - 3deg), transparent calc(var(--fl-w) * 2));
}

/* the lamp (brand icon geometry): body under the light, head above it */
.hero__lamp {
  position: absolute;
  top: var(--lamp-top);
  inset-inline-end: var(--lamp-end);
  width: var(--lamp-w);
  height: auto;
  max-width: none;
}
.hero__lamp--body { fill: var(--paper); }
.hero__lamp--head { fill: var(--lamp); }

/* content above the light */
.hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: var(--s-5);
  padding-top: calc(var(--lamp-top) + var(--lamp-w) * 1.222 - 18px);
  padding-bottom: var(--s-7);
  /* a dark halo carves the lit lines away from the letters */
  text-shadow: 0 0 2px var(--ink), 0 0 6px var(--ink), 0 0 14px var(--ink), 0 0 28px var(--ink);
}
.hero__content > * { max-width: 100%; }
.hero__content > .eyebrow { max-width: calc(100% - var(--lamp-w) - 16px); }
.hero h1 { font-size: clamp(2.4rem, 1.5rem + 4.4vw, 4.5rem); }
.hero__br { display: none; }
@media (min-width: 1180px) {
  .hero__br { display: inline; }
}
.hero__lede { color: var(--fg); opacity: .86; max-width: 34rem; text-wrap: balance; }
.hero__ctas {
  display: grid;
  gap: var(--s-3);
  width: 100%;
  margin-top: var(--s-2);
  text-shadow: none;
}
.hero__ctas .btn--ghost { background: var(--ink); }
.hero__ctas .btn--ghost:hover { background: var(--ink-2); }
.hero__hint {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: calc(-1 * var(--s-2));
}
html[lang="ar"] .hero__hint { font-family: var(--font-body); letter-spacing: 0; font-size: var(--fs-sm); }
.hero__hint-ico { width: 18px; height: 18px; color: var(--lamp); flex: none; }
.hero__hint--touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .hero__hint--mouse { display: none; }
  .hero__hint--touch { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__hint { display: none; }
}

@media (min-width: 520px) {
  .hero__ctas { display: flex; flex-wrap: wrap; width: auto; }
}
@media (min-width: 760px) {
  .hero__content {
    padding-top: clamp(4rem, 2rem + 5vw, 7rem);
    padding-bottom: clamp(6rem, 4.5rem + 4vw, 8.75rem);
    padding-inline-end: calc(var(--lamp-w) + 64px);
  }
  .hero__content > :not(h1) { max-width: 46rem; }
}

/* ---------- 2 · manifesto: idea · measure · make on a ruler ---------- */
.mani__head { display: grid; gap: var(--s-4); max-width: 46rem; margin-bottom: var(--s-7); }
.mani__scale {
  list-style: none;
  position: relative;
  display: grid;
  gap: var(--s-6);
  padding-inline-start: 34px;
  border-inline-start: 1px solid var(--tick);
}
/* vertical ruler ticks on phones */
.mani__scale::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 12px;
  background:
    repeating-linear-gradient(180deg, var(--tick) 0 1px, transparent 1px 60px) 0 0 / 12px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--tick) 0 1px, transparent 1px 30px) 0 0 / 8px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--tick) 0 1px, transparent 1px 6px) 0 0 / 5px 100% no-repeat;
}
html[dir="rtl"] .mani__scale::before {
  background-position: 100% 0, 100% 0, 100% 0;
}
.mani__mark { position: relative; display: grid; gap: var(--s-2); }
/* the major tick that points at each part */
.mani__mark::before {
  content: "";
  position: absolute;
  top: 1.55rem;
  inset-inline-start: -34px;
  width: 26px;
  height: 2px;
  background: var(--accent-text);
}
.mani__glyph {
  width: 64px;
  height: 48px;
  fill: none;
  stroke: var(--fg);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.mani__glyph .g-fill { fill: var(--lamp); stroke: none; }
.mani__glyph .g-faint { stroke: var(--fg-3); stroke-width: 1; }
.mani__glyph .g-acc { stroke: var(--accent-text); }
.mani__glyph .g-accf { fill: var(--accent-text); stroke: none; }
.mani__mark h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; font-size: var(--fs-xl); }
.mani__part {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
html[lang="ar"] .mani__part { font-family: var(--font-body); letter-spacing: 0; font-size: var(--fs-sm); }
.mani__mark p { color: var(--fg-2); max-width: 30ch; }
.mani__foot { margin-top: var(--s-6); text-transform: none; letter-spacing: .04em; }
html[lang="ar"] .mani__foot { font-family: var(--font-body); direction: rtl; letter-spacing: 0; font-size: var(--fs-sm); }

@media (min-width: 760px) {
  .mani__scale {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-inline-start: 0;
    padding-top: 0;
    border-inline-start: 0;
    border-top: 1px solid var(--tick);
  }
  .mani__scale::before {
    inset: 0 0 auto 0;
    width: auto;
    height: 18px;
    background:
      repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 60px) 0 0 / 100% 100% no-repeat,
      repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 30px) 0 0 / 100% 70% no-repeat,
      repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 6px) 0 0 / 100% 38% no-repeat;
  }
  html[dir="rtl"] .mani__scale::before { background-position: 0 0, 0 0, 0 0; }
  .mani__mark { padding-top: 3.25rem; padding-inline-end: var(--s-6); }
  .mani__mark::before { top: 0; inset-inline-start: 0; width: 2px; height: 34px; }
}

/* ---------- 3 · lines: two live doors + coming soon ---------- */
/* by day the page is paper too, so the lines band steps down to paper-grey to stay a band */
:root[data-theme="light"] .lines { --bg: var(--paper-3); }
.lines__head { margin-bottom: var(--s-6); }
.doors { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a door is a drawing sheet: hairline border that follows the cut corner */
.door {
  --cut: 22px;
  background: var(--line-strong);
  padding: 1px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  min-width: 0;
}
.door__sheet {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--bg-2);
  padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
  clip-path: polygon(calc(var(--cut) - .42px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) - .42px));
}
.door__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.door__head .chip { margin-top: .25rem; }
.door__name { display: grid; gap: .35rem; margin-top: var(--s-2); }
/* .spec is always LTR inside, so align it to the Arabic side by hand */
html[dir="rtl"] .door__name .spec,
html[dir="rtl"] .cta__contact { text-align: right; }
.door__art {
  width: clamp(124px, 34vw, 190px);
  height: auto;
  flex: none;
  fill: none;
  stroke: var(--fg);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.door__art * { vector-effect: non-scaling-stroke; }
.door__art text { fill: var(--fg-2); stroke: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.door__art .a-faint { stroke: var(--fg-3); stroke-width: 1; }
.door__art .a-dash { stroke-dasharray: 4 3; }
.door__art .a-acc { stroke: var(--accent-text); }
.door__art .a-acct { fill: var(--accent-text); }
.door__title { font-size: var(--fs-xl); }
.door__lede { color: var(--fg-2); max-width: 38ch; }
.door__list { list-style: none; display: grid; border-top: 1px solid var(--line); }
.door__list li {
  position: relative;
  padding-block: .6rem;
  padding-inline-start: 1.6rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 400;
}
/* a small ruler tick as the bullet */
.door__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc(50% - 5px);
  width: 12px;
  height: 10px;
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) 0 50% / 100% 1.5px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) 0 0 / 1.5px 100% no-repeat;
}
html[dir="rtl"] .door__list li::before { transform: scaleX(-1); }
.door__note { font-size: var(--fs-sm); color: var(--fg-3); }
.door__actions {
  margin-top: auto;
  padding-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}
.door__actions .link-arrow { min-height: 44px; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; }
.door__actions .link-arrow:hover { color: var(--accent-text); text-decoration-color: currentColor; }
@media (max-width: 519px) {
  .door__actions .btn { width: 100%; }
}

/* coming soon: quieter, dashed like a part not printed yet */
.soon {
  margin-top: var(--s-7);
  display: grid;
  gap: var(--s-4);
}
.soon__title { color: var(--fg-3); }
.soon__list { list-style: none; display: grid; gap: 0; border-top: 1px dashed var(--line-strong); }
@media (min-width: 760px) {
  .soon__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
}
.soon__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .35rem var(--s-3);
  min-height: 44px;
  padding-block: var(--s-4);
  border-bottom: 1px dashed var(--line-strong);
  text-decoration: none;
  color: var(--fg);
  height: 100%;
}
.soon__item:hover { color: var(--fg); }
.soon__item:hover .soon__go { color: var(--accent-text); }
.soon__name { font-weight: 600; font-size: var(--fs-md); }
.soon__item .chip { justify-self: start; }
.soon__line { grid-column: 1 / -1; color: var(--fg-2); font-size: var(--fs-sm); }
.soon__go {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: .3em;
}

/* ---------- 4 · how it works ---------- */
.how__steps > li > div { min-width: 0; }
.how__key h3 { box-shadow: inset 0 -.32em 0 color-mix(in srgb, var(--lamp) 38%, transparent); display: inline; }
:root[data-theme="light"] .how__key h3 { box-shadow: inset 0 -.32em 0 color-mix(in srgb, var(--lamp) 55%, transparent); }
.how__key p { margin-top: .35rem; }
@media (min-width: 1000px) {
  .how__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line-strong);
    position: relative;
  }
  .how__steps > li {
    position: relative;
    display: block;
    padding-block: var(--s-5) 0;
    padding-inline-end: var(--s-5);
    border-top: 0;
  }
  /* a node on the path for every step */
  .how__steps > li::after {
    content: "";
    position: absolute;
    top: -4px;
    inset-inline-start: 0;
    width: 7px;
    height: 7px;
    background: var(--fg);
  }
  .how__steps > li.how__key::after { background: var(--accent-fill); width: 9px; height: 9px; top: -5px; }
  .how__steps > li::before { display: block; margin-bottom: var(--s-3); padding-top: 0; }
  html[dir="rtl"] .how__steps > li::before { text-align: right; }
}

/* ---------- 5 · what we do: a parts list ---------- */
.caps__grid { display: grid; gap: var(--s-6); }
.caps__head { display: grid; gap: var(--s-4); align-content: start; max-width: 34rem; }
@media (min-width: 1000px) {
  .caps__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
}
.parts { border-top: 1px solid var(--line-strong); }
.parts__cols {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-block: .6rem;
  border-bottom: 1px solid var(--line-strong);
}
html[lang="ar"] .parts__cols > span:not(:first-child) { font-family: var(--font-body); letter-spacing: 0; font-size: var(--fs-sm); }
.parts__list { list-style: none; display: grid; }
.parts__list > li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: .25rem var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.parts__ref {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--accent-text);
  padding-top: .2em;
  text-align: start;
}
.parts__body { display: grid; gap: .2rem; }
.parts__body h3 { font-size: var(--fs-md); font-weight: 600; }
.parts__body p { color: var(--fg-2); font-size: var(--fs-sm); }
.parts__note { grid-column: 2; padding-top: .2rem; }
html[dir="rtl"] .parts__note { text-align: right; }
@media (min-width: 640px) {
  .parts__cols { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 11.5rem; gap: var(--s-4); }
  .parts__list > li { grid-template-columns: 4.5rem minmax(0, 1fr) 11.5rem; gap: var(--s-4); }
  .parts__note { grid-column: 3; padding-top: .35rem; text-align: end; }
  html[dir="rtl"] .parts__note { text-align: left; }
  .parts__cols-note { text-align: end; }
}

/* ---------- 6 · trust strip ---------- */
.trust { border-top: 1px solid var(--line); }
.trust__in { display: grid; gap: var(--s-5); padding-block: var(--s-7); }
.trust__list {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.trust__list > li {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.trust__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--accent-text);
  white-space: nowrap;
  text-align: start;
}
.trust__list p { font-size: var(--fs-sm); font-weight: 400; }
@media (min-width: 760px) {
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
}
@media (min-width: 1100px) {
  .trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; }
  .trust__list > li {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    align-content: start;
    padding: var(--s-4) var(--s-4) var(--s-2);
    padding-inline-start: var(--s-4);
    border-bottom: 0;
    border-inline-start: 1px solid var(--line-strong);
  }
}

/* ---------- 7 · CTA ---------- */
.cta { padding-top: calc(var(--section) * .7); }
.cta__in {
  display: grid;
  gap: var(--s-5);
  align-items: end;
  padding-bottom: calc(var(--section) * .6);
}
.cta__text { display: grid; gap: var(--s-3); }
.cta__text h2 { font-size: var(--fs-3xl); }
.cta__text p { max-width: 36rem; font-size: var(--fs-md); font-weight: 400; color: var(--fg-2); }
.cta__act { display: grid; gap: var(--s-3); justify-items: start; }
.cta__act .btn { gap: .6em; }
.cta__contact { color: var(--fg-3); text-transform: none; letter-spacing: .06em; }
.cta__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5em; }
html[dir="rtl"] .cta__contact { justify-content: flex-end; }
.cta__contact a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .25em; }
.cta__contact a:hover { color: var(--fg); }
@media (max-width: 519px) {
  .cta__act { justify-items: stretch; }
}
@media (min-width: 900px) {
  .cta__in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7); }
  .cta__act { justify-items: end; }
}