/* Lamsa · one page, Arabic (RTL) and English (LTR). Paper and ink only; colour comes from the work. */

@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/alexandria-arabic-300.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/alexandria-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/alexandria-arabic-500.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/alexandria-latin-300.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/alexandria-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/alexandria-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand colours (confirmed): Ink and Paper only */
  --paper: #F6F4F0;
  --ink: #17130F;
  /* Colours by role. The page is black (owner, 18 Oct: "swap the white with the black"). */
  --bg: var(--ink);
  --text: var(--paper);
  --text-2: #BEBCB8;      /* body: 9.7:1 on ink */
  --text-3: #9D9A96;      /* Paper 60, small labels: 6.6:1 on ink */
  --panel: #231E19;       /* ink, one step lighter: the ground behind the work */
  --line: rgba(246, 244, 240, .16);
  /* The one inverted block: contact + footer on paper */
  --inv-bg: var(--paper);
  --inv-text: var(--ink);
  --inv-text-3: #706D69;  /* Ink 60: 4.7:1 on paper */
  --inv-line: rgba(23, 19, 15, .14);
  --gutter: 20px;
  --max: 1120px;
  --section: 72px;
  --shot: min(66vw, 264px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;               /* Arabic: 300 renders thin and pale at body size */
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
html[lang="en"] body { font-weight: 300; line-height: 1.6; }   /* Latin Alexandria is heavier: 300 matches Arabic 400 */
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 20; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
section { padding-block: var(--section); }
section[id] { scroll-margin-top: 12px; }

/* Header */
.site-header { padding-block: 18px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Logo: approved wordmark (version A), -paper on the black page, no box (owner, 18 Oct).
   Smallest size the logo brief allows with a little room: letters about 21 px Arabic (minimum 20), 16 px English (minimum 14).
   The SVGs carry a 12% margin; the link is 44 px tall so it stays an easy tap target. */
.logo { display: inline-flex; align-items: center; min-height: 44px; line-height: 0; text-decoration: none; }
.logo img { height: 26px; width: auto; }
html[lang="en"] .logo img { height: 20px; }
.lang { font-size: 15px; color: var(--text-3); text-decoration: none; padding: 12px 4px; }
.lang:hover { color: var(--text); }

/* Type */
h1 {
  font-weight: 500;
  font-size: clamp(2.5rem, 7.4vw + 0.6rem, 4.6rem);
  line-height: 1.28;
  text-wrap: balance;
}
html[lang="en"] h1 { line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-weight: 500; font-size: clamp(1.75rem, 2vw + 1.2rem, 2.4rem); line-height: 1.3; margin-block-end: 28px; }
html[lang="en"] h2 { letter-spacing: -0.01em; }
h3 { font-weight: 500; font-size: 1.28rem; line-height: 1.45; }
html[lang="en"] h3 { font-weight: 400; letter-spacing: -0.005em; }
.text { color: var(--text-2); }

/* Buttons: phones get full-width stacked buttons in both languages; wider screens sit them inline */
.actions { display: grid; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px;
  border-radius: 999px; border: 1px solid var(--text);
  font: inherit; font-weight: 400; font-size: 16px; line-height: 1.2;
  text-decoration: none; text-align: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
html[lang="en"] .btn { font-weight: 400; }
.btn-solid { background: var(--text); color: var(--bg); }
.btn-solid:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)); }
.btn-line { background: transparent; color: var(--text); }
.btn-line:hover { background: var(--text); color: var(--bg); }
.btn-inv { background: var(--inv-text); color: var(--inv-bg); border-color: var(--inv-text); }   /* solid button inside the inverted block */
.btn-inv:hover { background: color-mix(in srgb, var(--inv-text) 86%, var(--inv-bg)); }

/* Hero */
.hero { padding-block: 24px 0; }
.hero .lede { margin-block: 18px 30px; font-size: 1.15rem; color: var(--text-2); max-width: 26em; }

/* Screens: real screenshots in one frame (9:16, phone corners), no drawn devices */
.shot {
  position: relative; overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(246, 244, 240, .08), 0 18px 40px -18px rgba(0, 0, 0, .7);
}
.shot img, .shot video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }

/* Showcase: real captures of the work on a ground from the project's own palette, used subtly.
   One ground per project, even margins, 4 px corners, a hairline instead of a shadow. */
.showcase { margin: 0; }
.ground { padding: 20px; border-radius: 4px; }
.ground img, .ground video { display: block; width: 100%; height: auto; border-radius: 4px; }
.ground--balance { background: #2C170A; }   /* Balance brown #5D1F00, muted toward Lamsa ink */
.ground--balance img { box-shadow: 0 0 0 1px rgba(246, 231, 206, .14); }
.ground--luma { background: #301B26; }      /* Luma plum #6B2D5C, muted toward Lamsa ink */
.ground--luma img { box-shadow: 0 0 0 1px rgba(250, 247, 243, .14); }
.showcase > figcaption { margin-block-start: 10px; font-size: 14px; color: var(--text-3); }
.showcase > figcaption a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--text); text-underline-offset: 4px; }   /* 44 px tap area */
.hero-showcase { margin-block-start: 36px; }

/* A project: short head, then its views on one shared ground, then one action */
.project { display: grid; gap: 20px; }
.project-head { display: grid; gap: 4px; max-width: 34em; }
.project-head .text { margin-block-start: 4px; }
.project-action { justify-self: start; }
.project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-underline-offset: 5px; }
.views { display: grid; gap: 28px; }
.view { margin: 0; display: grid; gap: 10px; justify-items: center; }
.view img { max-width: 320px; }
.view--wide img { max-width: 100%; }
.view figcaption { font-size: 14px; color: var(--paper); opacity: .72; justify-self: start; }

/* Phones: one view at a time, switched with the tabs (only when the script runs; otherwise both show) */
.view-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; justify-self: start; }
.view-tabs[hidden] { display: none; }
.view-tabs button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 15px; cursor: pointer; }
.view-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.views.is-tabbed { gap: 0; }
.views.is-tabbed .view { grid-area: 1 / 1; align-self: center; }
.views.is-tabbed .view.is-inactive { visibility: hidden; }
.views.is-tabbed figcaption { display: none; }

/* Services: what we build, then what we add */
.services { display: grid; }
.services li { padding-block: 22px; border-block-start: 1px solid var(--line); }
.services li:last-child { border-block-end: 1px solid var(--line); }
.services p { margin-block-start: 4px; }
.also { margin-block-start: 22px; color: var(--text-2); }

/* Work: the screens are the loudest thing on the page */
.work-list { display: grid; gap: 72px; }
.work-item { display: grid; gap: 24px; }
.work-body { display: grid; gap: 6px; justify-items: start; max-width: 34em; }
.work-body .btn { margin-block-start: 14px; }
.tag { font-size: 14px; font-weight: 400; color: var(--text-3); }
.work-note { border-block-start: 1px solid var(--line); padding-block-start: 28px; }

/* Video sits in the row like a screen; one calm play button until it plays */
.play {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 60px; border: 0; border-radius: 50%; padding: 0;
  background: var(--ink); cursor: pointer;   /* stays ink: the video cover is light */
  box-shadow: 0 10px 24px -10px rgba(23, 19, 15, .6);
}
.play::before { /* play triangle, always pointing right */
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--paper);
}
.play[hidden] { display: none; }

/* Contact invitation after the work */
.invite { padding-block: 8px var(--section); }
.invite .wrap { display: grid; gap: 22px; justify-items: start; border-block-start: 1px solid var(--line); padding-block-start: 48px; }
.invite-line { font-weight: 500; font-size: clamp(1.6rem, 3vw + 1rem, 2.4rem); line-height: 1.35; text-wrap: balance; }
html[lang="en"] .invite-line { line-height: 1.2; letter-spacing: -0.01em; }
.invite .btn { width: 100%; max-width: 420px; }

/* How we work: a real sequence, so it is numbered */
.steps { display: grid; }
.steps li { display: flex; align-items: baseline; gap: 20px; padding-block: 22px; border-block-end: 1px solid var(--line); font-size: 1.45rem; font-weight: 400; line-height: 1.4; }
.steps li:first-child { border-block-start: 1px solid var(--line); }
.num { font-weight: 300; font-size: 1.45rem; line-height: 1; color: var(--text-3); min-width: 2.2ch; font-variant-numeric: tabular-nums; }

/* Contact + footer: the one inverted block, on paper */
.inverse { background: var(--inv-bg); color: var(--inv-text); }
.inverse .muted { color: var(--inv-text-3); }
.contact { padding-block: var(--section) 40px; }
.contact .btn { width: 100%; max-width: 420px; }
.contact-list { margin-block-start: 36px; border-block-start: 1px solid var(--inv-line); }
.contact-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding-block: 14px; border-block-end: 1px solid var(--inv-line); text-decoration: none; }
.contact-list a:hover .value { text-decoration: underline; text-underline-offset: 4px; }
.contact-list .label { color: var(--inv-text-3); }
.contact-list .value { font-weight: 400; }
.site-footer { padding-block: 36px 40px; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.site-footer img { height: 28px; width: auto; }
html[lang="en"] .site-footer img { height: 24px; }
.site-footer p { font-size: 14px; }

/* Floating WhatsApp, phones only: a compact round icon in the bottom corner, clear of the screen edges and the
   home-indicator area. It appears after the hero buttons scroll away and hides while another WhatsApp button
   (invitation, contact) or the footer is on screen, so nothing at the end of the page sits under it. */
.wa-float {
  position: fixed; z-index: 10;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--text); color: var(--bg);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(23, 19, 15, .08);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.92);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.wa-float.show { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.wa-float:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* 404 */
.actions.spaced { margin-block-start: 28px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wa-float, .wa-float.show, .btn { transition: none; }
}

/* Wider phones and up: buttons sit side by side at their natural width */
@media (min-width: 560px) {
  .actions { display: flex; flex-wrap: wrap; gap: 12px; }
}

/* Tablets and computers */
@media (min-width: 760px) {
  :root { --gutter: 40px; --section: 112px; }
  .site-header { padding-block: 28px; }
  .hero { padding-block-start: 56px; }
  .hero-showcase { margin-block-start: 48px; }
  .ground { padding: 32px; }
  .views { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 40px; }
  .views--pair { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 56px; align-items: start; }   /* two phone screens, equal size */
  .view img { max-width: 100%; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .services { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .services li, .services li:last-child { border-block-end: 0; padding-inline-end: 8px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .steps li, .steps li:first-child { flex-direction: column; gap: 14px; border-block: 0; border-block-start: 1px solid var(--line); }
  .contact-list { max-width: 560px; }
  .wa-float { display: none; }
}

@media (min-width: 1040px) {
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 56px; align-items: center; }
  .hero-showcase { margin-block-start: 0; }
  .services { grid-template-columns: repeat(4, 1fr); }
}