/* services / warm-local — tokens from the site DNA (demo palette) */
:root {
  --bg: #fbf5ec; --surface: #fffdf8; --alt: #efe2cc; --fg: #2b2118; --muted: #645444; --line: #e2d2b8;
  --accent: #a5481f; --accent-text: #8f3e1a; --olive: #4f5a2c; --focus: #8f3e1a; --kicker: #4f5a2c;
  --ph-bg: #e9dac1; --ph-line: rgb(165 72 31 / .08); --ph-fg: #3a2c20; --ph-tag-bg: rgb(255 253 248 / .92); --ph-radius: 20px;
  --field-line: #d5c3a6; --field-bg: #fffdf8; --field-radius: 12px;
  --maxw: 1180px; --sp: clamp(64px, 8vw, 112px); --fs-body: 1.0625rem;
  --font-display: 'DM Sans', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-ui: 'DM Sans', system-ui, sans-serif;
  --fw-display: 800; --lh-display: 1.08; --fs-h1: clamp(38px, 5.4vw, 72px); --fs-h2: clamp(28px, 3.6vw, 46px); --fw-card: 700;
}
:root:lang(ar) {
  --font-display: 'Tajawal', 'DM Sans', sans-serif; --font-body: 'Tajawal', 'DM Sans', sans-serif; --font-ui: 'Tajawal', 'DM Sans', sans-serif;
  --fw-display: 800; --lh-display: 1.3; --fs-h1: clamp(38px, 5.2vw, 70px); --fs-h2: clamp(28px, 3.4vw, 44px); --lh-body: 1.85; --fs-body: 1.125rem;
}
.tone--alt { background: var(--alt); }
.tone--accent { background: var(--accent); color: #fff; --muted: #fbe9de; }
em { font-style: normal; color: var(--accent-text); text-decoration: underline wavy rgb(165 72 31 / .45); text-underline-offset: 8px; text-decoration-thickness: 2px; }
.tone--accent em { color: #fff; text-decoration-color: rgb(255 255 255 / .6); }
.sh__kicker, .hero__kicker { color: var(--olive); font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.sh__kicker::before, .hero__kicker::before { content: ''; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); }
.btn { border-radius: 999px; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: #8a3b18; }
.btn--ghost { border-color: var(--fg); color: var(--fg); }
.tlink { color: var(--accent-text); }

/* header */
.hd { background: var(--bg); }
.hd__in { min-block-size: 80px; }
.hd__brand { font-weight: 800; font-size: 1.3rem; }
.hd__mark { color: var(--accent); font-size: 1.3rem; }
.hd__cta { gap: .4em; }

/* hero centred with wide photo */
.s--hero { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 6vw, 96px); }
.s--hero .hero__inner { justify-items: center; }
.s--hero .hero__copy { justify-items: center; text-align: center; max-inline-size: 820px; }
.hero__chips a { min-block-size: 46px; padding: 10px 18px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font-weight: 700; }
.hero__chips li:first-child a { background: var(--olive); color: #fff; border-color: var(--olive); }
.hero__chips .i { color: var(--accent); }
.hero__chips li:first-child .i { color: #fff; }
.s--hero .hero__media { inline-size: 100%; }
.s--hero .hero__m1 { box-shadow: 0 18px 40px rgb(43 33 24 / .14); }
@media (max-width: 599px) { .s--hero .hero__m1 { aspect-ratio: 4 / 3; } }

/* about letter */
.v--portrait-letter .mt { grid-template-columns: 1fr; }
@media (min-width: 900px) { .v--portrait-letter .mt { grid-template-columns: 5fr 7fr; } }
.v--portrait-letter .mt__m1 { max-inline-size: 440px; justify-self: center; }
.v--portrait-letter .mt__copy { background: var(--surface); border-radius: 24px; padding: clamp(24px, 4vw, 48px); box-shadow: 0 10px 30px rgb(43 33 24 / .08); }
.mt__sig { font-weight: 800; color: var(--accent-text); }

/* services photo cards */
.s--services .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.s--services .card { background: var(--surface); border-radius: 22px; padding: 10px; box-shadow: 0 8px 26px rgb(43 33 24 / .07); }
.s--services .card__body { padding: 8px 12px 16px; }
.s--services .card__meta li { background: #ecefdf; color: var(--olive); padding: 2px 12px; border-radius: 999px; font-weight: 600; }

/* nearby work strip */
.s--work .cards { grid-template-columns: repeat(3, minmax(240px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 8px; }
.s--work .card { scroll-snap-align: start; }
.s--work .card__tag { color: var(--olive); }

/* soft steps */
.steps { grid-template-columns: 1fr; gap: 18px; position: relative; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } .steps::before { content: ''; position: absolute; inset-inline: 16%; inset-block-start: 58px; border-block-start: 3px dotted var(--line); } }
.step { position: relative; background: var(--alt); border-radius: 24px; padding: 28px; justify-items: center; text-align: center; }
.step__n { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 1.4rem; }
.step__title { font-weight: 800; }

/* team */
.s--team .sh { justify-items: center; text-align: center; margin-inline: auto; }
.s--team .cards { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .s--team .cards { grid-template-columns: repeat(4, 1fr); } }
.s--team .card { align-items: center; text-align: center; }
.s--team .card__media { inline-size: min(180px, 80%); }
.s--team .card__media .ph { border-radius: 50%; border: 6px solid var(--surface); }
.s--team .ph__tag { max-inline-size: 86%; font-size: 11px; }

/* location map card */
.loc { grid-template-columns: 1fr; }
@media (min-width: 960px) { .loc { grid-template-columns: 8fr 5fr; align-items: center; } .loc__info { margin-inline-start: -120px; position: relative; } }
.loc__info { background: var(--alt); border-radius: 24px; padding: clamp(24px, 3.4vw, 40px); box-shadow: 0 18px 40px rgb(43 33 24 / .12); }
.loc .dets__row .i, .loc__notes .i { color: var(--accent); }

/* phone-first cta */
.cta { justify-items: center; text-align: center; }
.cta__big { font-family: var(--font-ui); font-weight: 800; font-size: clamp(32px, 5vw, 64px); }
.cta__big a { color: #fff; border-block-end: 3px solid rgb(255 255 255 / .5); }
.tone--accent .btn--primary { background: #fff; color: var(--accent-text); }

/* footer */
.ft { background: var(--alt); }