/* 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; }

/* Section headings are centred (owner, 19 Oct); the content under them keeps its own alignment.
   The work section follows the services after one section gap, not two. */
#services { padding-block-end: 0; }
#services-title, #work-title, #how-title, #contact-title { text-align: center; }

/* Services: five accordion rows (owner, 19 Oct). Closed, a row shows its title, one line and a drawn +;
   the whole header is the button. Rows read from the start side (Arabic right, English left) in a column
   centred under the heading. Without the script every row simply shows open (no .is-ready). */
.acc { max-width: 880px; margin-inline: auto; border-block-start: 1px solid var(--line); }
.acc-item { border-block-end: 1px solid var(--line); }
.acc-h { font: inherit; letter-spacing: normal; }
.acc-btn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  width: 100%; min-height: 64px; padding: 20px 0; margin: 0;
  border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.acc-btn:focus-visible { outline-offset: 4px; border-radius: 4px; }
.acc-title { font-weight: 500; font-size: 1.1rem; line-height: 1.45; color: var(--text); }
html[lang="en"] .acc-title { font-weight: 400; }
.acc-desc { grid-column: 1; color: var(--text-2); line-height: 1.6; }
/* The + is drawn (two 1.5 px bars); open, the upright bar turns flat and it reads as a minus */
.acc-icon { grid-column: 2; grid-row: 1 / span 2; position: relative; width: 24px; height: 24px; color: var(--text-3); transition: color .2s ease; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 1.5px; border-radius: 1px; background: currentColor; }   /* centred without a transform, so the turn pivots on the bar's own centre */
.acc-icon::after { rotate: 90deg; }
.acc-btn:hover .acc-icon, .acc-item.is-open .acc-icon { color: var(--text); }
.acc-item.is-open .acc-icon::after { rotate: 0deg; }
.acc:not(.is-ready) .acc-icon { display: none; }
.acc:not(.is-ready) .acc-btn { cursor: default; }

.acc-panel { display: grid; grid-template-rows: 1fr; }
.acc-inner { min-height: 0; overflow: hidden; }
.acc-body { display: grid; gap: 8px; max-width: 36em; padding-block-end: 24px; color: var(--text-2); }
.acc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.acc-work { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.acc-ask { font-size: 15px; color: var(--text-2); }
.acc-ask:hover { color: var(--text); }
.acc.is-ready .acc-panel { grid-template-rows: 0fr; visibility: hidden; }
.acc.is-ready .acc-item.is-open .acc-panel { grid-template-rows: 1fr; visibility: visible; }
/* Transitions only once the closed state is in place, so the page never animates on load. Exponential ease-out. */
.acc.is-live .acc-panel { transition: grid-template-rows .36s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .36s; }
.acc.is-live .acc-item.is-open .acc-panel { transition: grid-template-rows .36s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.acc.is-live .acc-icon::after { transition: rotate .3s cubic-bezier(.16, 1, .3, 1); }

/* 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, .acc.is-live .acc-panel, .acc.is-live .acc-item.is-open .acc-panel, .acc.is-live .acc-icon::after { 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 rows: title | line | + on one line; the open text lines up under the line */
  .acc-btn { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: baseline; column-gap: 32px; padding-block: 24px; }
  .acc-desc { grid-column: 2; grid-row: 1; }
  .acc-icon { grid-column: 3; grid-row: 1; align-self: center; }
  .acc-body { margin-inline-start: calc(15rem + 32px); }
  .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; }
}