/* Darza ad landing page.

   One job: get a clothing brand or a business that tapped an ad onto WhatsApp with their
   logo. The button is in the first screen, in the header, at the end, and docked to the
   bottom on a phone.

   The look is a production house's, not an atelier's: white, true black and electric cobalt,
   acid lime only as a highlight on dark grounds, square corners, solid rules, heavy type.
   Alexandria (by Egyptian type designer Mohamed Gaber) sets the display lines, Readex Pro
   the text; both are drawn for Arabic and Latin together, so the two pages match.

   Deliberately absent, because they read as generated: cream backgrounds, warm terracotta,
   letter-spaced labels with a rule before them, tick-mark lists, numbered circles joined by
   a line, dashed decorative borders, rounded cards with shadows.

   Logical properties throughout: the Arabic page mirrors with no second stylesheet. No
   letter-spacing on Arabic - it pulls joined letters apart. */

:root {
  --white: #ffffff; --ink: #0b0b0b; --blue: #2231f5; --blue-dk: #1422c9; --acid: #d4ff3f;
  --tile: #f1f1ef; --line: #e2e2df; --muted: #5f5f5f; --text: #2b2b2b;
  --display: "Alexandria", "Readex Pro", system-ui, sans-serif;
  --body: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px; --gutter: clamp(1.1rem, 4vw, 2.75rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--body); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased;
  padding-block-end: 84px;                        /* room for the phone dock */
}
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.3; letter-spacing: normal; }
p { margin: 0; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(4rem, 9vw, 7rem); }
section h2 { font-size: clamp(2rem, 4.8vw, 3.6rem); max-width: 18ch; margin-block-end: clamp(2rem, 4vw, 3.2rem); }

/* ---------- Buttons: square, heavy, cobalt or black ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--blue); color: var(--white); text-decoration: none;
  font-family: var(--body); font-weight: 600; font-size: 1rem; line-height: 1.2;
  padding: 1rem 1.5rem; border: 0; border-radius: 0;
  transition: background-color .15s ease;
}
.btn:hover { background: var(--ink); }
.btn--ink { background: var(--ink); }
.btn--ink:hover { background: var(--blue); }
.btn--lg { font-size: clamp(1.05rem, 1.5vw, 1.15rem); padding: 1.2rem 2rem; }
.btn--sm { font-size: .9rem; padding: .6rem 1rem; }
.wa-ico { width: 1.3em; height: 1.3em; flex: none; }

/* ---------- Header ---------- */

.top { border-block-end: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 1.4rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .5rem; margin-inline-end: auto; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.brand svg { width: 26px; height: 26px; color: var(--blue); }
.lang { font-weight: 500; font-size: .92rem; text-decoration: none; color: var(--muted); }
.lang:hover { color: var(--ink); }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 6vw, 5rem); align-items: end; }

/* A woven-label chip: black ground, white text - the one label a clothing brand sews in. */
.tag { display: inline-block; background: var(--ink); color: var(--white); font-weight: 500; font-size: .85rem; padding: .35rem .75rem; margin-block-end: 1.6rem; }

.hero h1 { font-size: clamp(2.8rem, 7.2vw, 6.3rem); font-weight: 900; line-height: .98; letter-spacing: -.05em; }
:lang(ar) .hero h1 { font-weight: 800; line-height: 1.22; letter-spacing: normal; }
.hero h1 span { display: block; }
.hero h1 .accent { color: var(--blue); }
.hero h1 .nowrap { display: inline; white-space: nowrap; }

.lede { max-width: 46ch; margin-block-start: 1.6rem; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--text); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-block-start: 2rem; }
.micro { font-size: .85rem; line-height: 1.5; color: var(--muted); }

.hero__film { justify-self: end; inline-size: 100%; max-inline-size: 340px; }
.film { inline-size: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--tile); }
.hero__film { position: relative; }
.sound {
  position: absolute; inset-inline-start: 12px; inset-block-end: 12px;
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem;
  background: var(--ink); color: var(--white); border: 0; border-radius: 0; cursor: pointer;
  font: 600 .88rem/1 var(--body);
}
.sound svg { width: 20px; height: 20px; }
.sound[aria-pressed="false"] .sound__waves { opacity: .35; }
.sound:hover { background: var(--blue); }

/* Three promises as a ruled row, not a checklist. */
.facts { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 2px solid var(--ink); }
.facts li { padding: 1.1rem 0; font-family: var(--display); font-weight: 700; font-size: clamp(.98rem, 1.4vw, 1.1rem); line-height: 1.35; }
.facts li + li { border-inline-start: 1px solid var(--line); padding-inline-start: 1.3rem; }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__film { justify-self: center; max-inline-size: 300px; }
  .facts { grid-template-columns: 1fr; }
  .facts li + li { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--line); }
}

/* ---------- The strip: what the workshop makes, moving ---------- */

.strip { background: var(--ink); color: var(--white); overflow: hidden; padding-block: 1.05rem; }
.strip__track { display: flex; width: max-content; animation: strip 36s linear infinite; }
.strip span { display: inline-flex; align-items: center; gap: 2.2rem; padding-inline-end: 2.2rem; font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 3vw, 2.2rem); line-height: 1.2; white-space: nowrap; }
.strip span::after { content: ""; width: .42em; height: .42em; background: var(--acid); flex: none; }
@keyframes strip { to { transform: translateX(var(--strip-shift, -50%)); } }
[dir="rtl"] .strip { --strip-shift: 50%; }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* ---------- From our workshop: the real photographs ---------- */

.work__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-block-end: clamp(1.6rem, 3vw, 2.4rem); }
.work__head h2 { margin: 0; }
.work__head p { color: var(--muted); }
.work__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shot { margin: 0; position: relative; overflow: hidden; background: var(--tile); }
.shot a { display: block; height: 100%; }
.shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s ease; }
.shot--lead { grid-column: span 2; grid-row: span 2; }
.shot--lead img { height: 100%; aspect-ratio: auto; }
.shot:hover img { transform: scale(1.03); }
/* The same caption chip the film uses. */
.shot figcaption {
  position: absolute; inset-inline-start: 10px; inset-block-end: 10px; max-width: calc(100% - 20px);
  background: var(--white); color: var(--ink); font-size: .82rem; font-weight: 500; line-height: 1.35; padding: .35rem .6rem;
}
@media (max-width: 760px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .shot--lead { grid-row: auto; }
  .shot--lead img { aspect-ratio: 4 / 5; }
  .shot figcaption { font-size: .74rem; inset-inline-start: 6px; inset-block-end: 6px; }
}

/* ---------- Shared: square-bullet lists ---------- */

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.list li { position: relative; padding-inline-start: 1.35rem; }
.list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; width: .45rem; height: .45rem; background: var(--blue); }
.idx { font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--blue); }

/* ---------- Who we work with: two solid blocks ---------- */

.who__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.who__card { display: flex; flex-direction: column; min-block-size: 360px; padding: clamp(1.8rem, 4vw, 3rem); color: var(--white); }
.who__card--brand { background: var(--ink); }
.who__card--biz { background: var(--blue); }
.who__card .idx { color: var(--acid); margin-block-end: auto; }
.who__card--biz .idx { color: var(--white); opacity: .7; }
.who__card h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin-block: 2.5rem 1.4rem; }
.who__card .list li::before { background: var(--acid); }
.who__card--biz .list li::before { background: var(--white); }
@media (max-width: 760px) { .who__pair { grid-template-columns: 1fr; } .who__card { min-block-size: 0; } }

/* ---------- Catalogue: the pieces, like a lookbook page ---------- */

.catalog { padding-block-start: 0; }
.catalog__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.piece { background: var(--tile); display: flex; flex-direction: column; }
.piece__art { padding: 1.6rem 1.2rem .8rem; }
.piece__art svg { width: 100%; height: auto; transition: transform .25s ease; }
.piece:hover .piece__art svg { transform: translateY(-4px); }
.piece__meta { display: flex; align-items: baseline; gap: .6rem; padding-inline: 1.1rem; }
.piece h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.piece p { padding: .35rem 1.1rem 1.4rem; font-size: .9rem; line-height: 1.55; color: var(--muted); }

/* On a phone the catalogue is a swipeable row inside its own box, so the page never
   scrolls sideways and a peek of the next piece says there is more. */
@media (max-width: 760px) {
  .catalog__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .catalog__grid::-webkit-scrollbar { display: none; }
  .piece { scroll-snap-align: start; }
}

/* ---------- Embroidery or print ---------- */

.methods { background: var(--tile); }
.methods__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 2px solid var(--ink); }
.method { padding-block-start: 1.8rem; }
.method + .method { border-inline-start: 1px solid #cfcfcb; padding-inline-start: clamp(1.5rem, 4vw, 3rem); }
.method:first-child { padding-inline-end: clamp(1.5rem, 4vw, 3rem); }
.method h3 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 900; margin-block-end: 1.5rem; }
.method + .method h3 { color: var(--blue); }
.methods__note { margin-block-start: 2.2rem; color: var(--text); }
.methods__note a { color: var(--blue); font-weight: 600; text-underline-offset: .2em; }
@media (max-width: 700px) {
  .methods__pair { grid-template-columns: 1fr; }
  .method + .method { border-inline-start: 0; padding-inline-start: 0; margin-block-start: 2rem; border-block-start: 1px solid #cfcfcb; }
}

/* ---------- How an order goes ---------- */

.process__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.process__list li { border-block-start: 2px solid var(--ink); padding-block-start: 1.3rem; }
.process__n { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 7vw, 5.2rem); line-height: 1; color: var(--blue); letter-spacing: -.04em; }
.process__list h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 700; margin-block: 1rem .45rem; letter-spacing: -.015em; }
.process__list p { color: var(--muted); max-width: 34ch; }
@media (max-width: 760px) { .process__list { grid-template-columns: 1fr; } }

/* ---------- FAQ: native <details>, no script ---------- */

.faq { padding-block-start: 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.faq details { border-block-end: 1px solid var(--line); }
.faq details:first-child { border-block-start: 2px solid var(--ink); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.02rem, 1.7vw, 1.15rem); line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-size: 1.6em; line-height: .7; flex: none; transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-block-end: 1.3rem; color: var(--text); max-width: 60ch; }
@media (max-width: 760px) { .faq__grid { grid-template-columns: 1fr; } }

/* ---------- Closing call ---------- */

.final { background: var(--blue); color: var(--white); }
.final h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 900; max-width: 14ch; margin-block-end: 1.2rem; }
.final > .wrap > p { font-size: 1.15rem; max-width: 40ch; opacity: .9; }
.final__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-block-start: 2.2rem; }
.final__cta a[href^="tel"] { font-weight: 600; text-underline-offset: .2em; }

.foot { background: var(--ink); color: #9a9a9a; font-size: .88rem; padding-block: 1.6rem; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; }
.foot a { color: var(--white); }

/* ---------- Phone dock ---------- */

.dock { display: none; }
@media (max-width: 760px) {
  .top .btn--sm { display: none; }
  .dock {
    display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
    padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));
    background: var(--white); border-block-start: 1px solid var(--line);
  }
  .btn--dock { width: 100%; font-size: 1.05rem; padding: 1rem; }
}
@media (min-width: 761px) { body { padding-block-end: 0; } }