/* 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 */
  --brown: #2C170A;       /* deep brown, official Lamsa colour (18 Oct): Lamsa's own grounds and frames, large areas only */
  --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: 64px;
  --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: 20px; }
.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: 12px; }
.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: 16px 32px; 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; background: var(--brown); box-shadow: inset 0 0 0 1px rgba(246, 244, 240, .14); }   /* Lamsa's own frame: brown with the paper hairline where it meets ink */
.ground img, .ground video { display: block; width: 100%; height: auto; border-radius: 4px; }
.ground--balance { background: #2C170A; box-shadow: none; }   /* Balance brown #5D1F00, muted toward Lamsa ink (project ground, unchanged) */
.ground--balance img { box-shadow: 0 0 0 1px rgba(246, 231, 206, .14); }
.ground--luma { background: #301B26; box-shadow: none; }      /* Luma plum #6B2D5C, muted toward Lamsa ink (project ground, unchanged) */
.ground--luma img { box-shadow: 0 0 0 1px rgba(250, 247, 243, .14); }
.showcase > figcaption { margin-block-start: 12px; 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: 40px; }

/* 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: 12px; 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. Centred on every screen (owner, 19 Oct: "get rid of the empty space look");
   the work section follows after one section gap, not two. */
#services { padding-block-end: 0; }
#services h2, .services li, .also { text-align: center; }
#work-title, #how-title, #contact-title { text-align: center; }   /* "Our work", "How we work" and "Contact" headings centred too (owner, 19 Oct); the content under them keeps its own alignment */
.services { display: grid; }
.services li { padding-block: 24px; border-block-start: 1px solid var(--line); }
.services li:last-child { border-block-end: 1px solid var(--line); }
.services p { margin-block-start: 4px; text-wrap: balance; }
.also { margin-block-start: 24px; color: var(--text-2); text-wrap: balance; }

/* 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: 8px; 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; }
.work-note .work-body { margin-inline: auto; justify-items: center; text-align: center; }   /* centred with the invitation below it (owner, 19 Oct) */
.work-note .text { text-wrap: balance; }
#work { padding-block-end: 0; }   /* the invitation sets the gap after the work */

/* 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: centred (owner, 19 Oct). Three quarters of a section above it
   (48 px phones, 72 px computers); "How we work" adds its own section gap below it. */
.invite { padding-block: calc(var(--section) * .75) 0; }
.invite .wrap { display: grid; gap: 24px; justify-items: center; text-align: center; 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: 24px; 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 { display: flex; width: 100%; max-width: 420px; margin-inline: auto; }   /* centred under the heading (owner, 19 Oct); full width on phones */
.contact-list { margin-block-start: 40px; 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: 16px; 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: 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: 96px; }
  .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); column-gap: 32px; }   /* tablets: 4 services as 2 x 2 (owner, 19 Oct); 4 in a row from 1040 px */
  .services li, .services li:last-child { border-block-end: 0; padding-inline: 8px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .steps li, .steps li:first-child { flex-direction: column; align-items: center; gap: 16px; text-align: center; border-block: 0; border-block-start: 1px solid var(--line); }   /* centred in each column (owner, 19 Oct) */
  .contact-list { max-width: 560px; margin-inline: auto; }
  .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); }
}