/* ==========================================================================
   Asran Office for Accounting and Auditing — main stylesheet
   Laid out like a printed annual report: one column axis at ~42% of the
   width, a serif title face, flat blocks of the brand's navy and sage.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --navy: #0b1f3a;
  --navy-2: #142d52;
  --sage: #8db27a;            /* the green of the logo */
  --sage-soft: #c9dcba;
  --sage-ink: #335c2a;        /* green dark enough for text on paper */

  --paper: #f4f2ec;
  --paper-2: #e9e6dd;         /* one tone step down, used instead of lines */
  --ink: #0b1f3a;
  --ink-2: #4a5568;           /* secondary notes only */
  --link: var(--sage-ink);
  --field-navy: #0b1f3a;
  --field-navy-ink: #f4f2ec;
  --field-sage: #8db27a;
  --field-sage-ink: #0b1f3a;

  --m: clamp(16px, 2.6vw, 44px);            /* outer margin, both sides */
  --g: clamp(20px, 2.4vw, 40px);            /* grid gutter */
  --section: clamp(96px, 11vw, 176px);      /* gap between sections */
  --header-h: 76px;

  --fs-display: clamp(2.25rem, 7.2vw, 7.5rem);
  --fs-h2: clamp(2rem, 4.1vw, 3.9rem);
  --fs-h3: clamp(1.4rem, 1.9vw, 1.75rem);
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;

  --font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2, .7, .1, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a1526;
    --paper-2: #112038;
    --ink: #eef1f5;
    --ink-2: #a9b4c4;
    --link: #a6c592;
    --field-navy: #142d52;
    --field-navy-ink: #eef1f5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0a1526;
  --paper-2: #112038;
  --ink: #eef1f5;
  --ink-2: #a9b4c4;
  --link: #a6c592;
  --field-navy: #142d52;
  --field-navy-ink: #eef1f5;
  color-scheme: dark;
}

/* Arabic: one family for everything */
:root[lang="ar"] {
  --font-text: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
}


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: inherit;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
h1 { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: 0; }
h4 { font-size: 1.375rem; font-weight: 600; }
:root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] h3 { letter-spacing: 0; line-height: 1.25; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--sage); color: var(--navy); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

.wrap { padding-inline: var(--m); max-width: 1680px; margin-inline: auto; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.skip-link {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* The axis: a side zone (≈42%) and a main column hanging from the line */
.axis {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g);
}
@media (min-width: 900px) {
  .axis { grid-template-columns: 5fr 7fr; column-gap: var(--g); }
  .axis > .on-axis { grid-column: 2; }
}

.section { padding-block: var(--section); }
.field-navy { background: var(--field-navy); color: var(--field-navy-ink); }
.field-sage { background: var(--field-sage); color: var(--field-sage-ink); }
.field-navy a:not(.btn), .field-sage a:not(.btn) { color: inherit; }
.tone { background: var(--paper-2); }

.standfirst { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.4; max-width: 34ch; }
.measure { max-width: 62ch; }
.cols-2 { columns: 2 30ch; column-gap: var(--g); }
.cols-2 p { break-inside: avoid; }
.note { font-size: var(--fs-small); color: var(--ink-2); }
.field-navy .note, .field-sage .note { color: inherit; opacity: 0.82; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 0;
  font: 600 1rem/1 var(--font-text);
  text-decoration: none; cursor: pointer;
  background: var(--navy); color: #fff;
  transition: background-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.btn:hover { background: var(--navy-2); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.btn-sage { background: var(--sage); color: var(--navy); }
.btn-sage:hover { background: var(--sage-soft); }
:root[data-theme="dark"] .btn:not(.btn-sage):not(.btn-whatsapp) { background: var(--sage); color: var(--navy); }
:root[data-theme="dark"] .btn:not(.btn-sage):not(.btn-whatsapp):hover { background: var(--sage-soft); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.btn-sage):not(.btn-whatsapp) { background: var(--sage); color: var(--navy); }
  :root:not([data-theme="light"]) .btn:not(.btn-sage):not(.btn-whatsapp):hover { background: var(--sage-soft); }
}
.btn-whatsapp { background: #1f7a45; color: #fff; }
.btn-whatsapp:hover { background: #18663a; }

.text-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; color: inherit; text-decoration: none;
  position: relative; padding-bottom: 4px;
}
.text-link::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
:root[dir="rtl"] .text-link::before { transform-origin: right; }
.text-link:hover::before { transform: scaleX(1); }
.text-link::after { content: "→"; transition: transform .25s var(--ease); }
:root[dir="rtl"] .text-link::after { content: "←"; }
.text-link:hover::after { transform: translateX(5px); }
:root[dir="rtl"] .text-link:hover::after { transform: translateX(-5px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  transition: background-color .3s var(--ease);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 42px; flex: none; }
.brand-mark img { width: 100%; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--font-display); font-variant-numeric: lining-nums; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.brand-text small { font-size: 0.8125rem; color: var(--ink-2); white-space: nowrap; }
.main-nav ul { display: flex; gap: clamp(14px, 2vw, 32px); }
.main-nav a {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem;
  padding-block: 6px; position: relative;
}
.main-nav a::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--sage); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
:root[dir="rtl"] .main-nav a::before { transform-origin: right; }
.main-nav a:hover::before, .main-nav a[aria-current="page"]::before { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 6px; }
.lang-toggle, .icon-btn {
  min-height: 44px; min-width: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font: 600 0.95rem/1 var(--font-text);
  transition: background-color .2s var(--ease);
}
.lang-toggle span { font-family: "IBM Plex Sans Arabic", var(--font-text); }
:root[lang="ar"] .lang-toggle span { font-family: "Montserrat", sans-serif; }
a.lang-toggle { text-decoration: none; }
.lang-toggle:hover, .icon-btn:hover { background: var(--paper-2); }
.icon-btn { padding: 0; }
.icon-btn svg { width: 21px; height: 21px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--paper);
    padding: 8px var(--m) 28px;
    display: none;
  }
  .nav-open .main-nav { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a {
    display: block; padding: 14px 0;
    font-family: var(--font-display); font-variant-numeric: lining-nums; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em;
  }
  .main-nav a::before { display: none; }
  .main-nav a[aria-current="page"] { color: var(--sage-ink); }
  :root[data-theme="dark"] .main-nav a[aria-current="page"] { color: var(--sage); }
}
@media (max-width: 420px) {
  .brand-text small { display: none; }
  .brand-mark { width: 36px; }
  .brand { gap: 8px; }
  /* tighter header so the language, theme and menu buttons all fit on phones */
  .header-inner { gap: 8px; }
  .header-actions { gap: 0; }
  .lang-toggle { padding: 0 6px; }
  .icon-btn { min-width: 40px; }
}
@media (max-width: 360px) {
  .brand-text { display: none; }   /* smallest phones: logo mark only */
}

/* ---------- Home masthead ---------- */
.masthead { padding-top: 8px; }
.mosaic {
  display: grid;
  grid-template-columns: 7fr 2fr 3fr;
  height: clamp(240px, 36vh, 460px);
  overflow: hidden;
}
.mosaic figure { margin: 0; position: relative; overflow: hidden; background: var(--paper-2); }
.mosaic img, .photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
.mosaic .tile-sage { background: var(--sage); display: flex; align-items: flex-end; padding: 20px; color: var(--navy); }
.mosaic .tile-sage span { font-family: var(--font-display); font-variant-numeric: lining-nums; font-weight: 600; font-size: clamp(2rem, 3.6vw, 3.75rem); line-height: .9; letter-spacing: -0.03em; }
.mosaic .drift img { animation: drift 24s var(--ease) both; transform-origin: 40% 60%; }
@keyframes drift { from { transform: scale(1.12); } to { transform: scale(1); } }
.masthead-caption { margin-top: 12px; }

.title-block { padding-top: clamp(28px, 3vw, 44px); }
.title-under {
  display: grid; gap: 28px; margin-top: clamp(24px, 2.4vw, 36px);
  align-items: end;
}
@media (min-width: 900px) {
  .title-under { grid-template-columns: 5fr 7fr; column-gap: var(--g); }
  .title-under .standfirst { grid-column: 2; }
  .title-under .office-status { grid-column: 1; grid-row: 1; align-self: end; }
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }

/* Masked headline: each line rises out of its own mask */
.mask-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mask-line > span { display: block; }
:root[lang="ar"] .mask-line { padding-bottom: .3em; margin-bottom: -.3em; padding-top: .1em; }

/* Live office status */
.office-status { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-small); max-width: 34ch; }
.status-dot {
  flex: none; width: 12px; height: 12px; margin-top: .35em; border-radius: 50%;
  background: var(--ink-2);
}
.office-status[data-open="true"] .status-dot { background: #3f8f3a; animation: pulse 2.4s ease-in-out infinite; }
.office-status strong { display: block; font-size: 1rem; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .55; } }

/* ---------- Inner page heads ---------- */
.page-head { padding-top: clamp(40px, 6vw, 96px); }
.page-head h1 { max-width: 12ch; }
.page-head .standfirst { margin-top: 28px; }
.page-head-band { margin-top: clamp(48px, 6vw, 88px); height: clamp(220px, 38vh, 460px); overflow: hidden; }
.page-head-band img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.page-head-band.pos-top img { object-position: 50% 30%; }
.page-head-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.page-head-split figure { margin: 0; overflow: hidden; position: relative; }

/* ---------- Statement of figures ---------- */
.statement h2 { max-width: 12ch; }
.figures { display: grid; }
.figure-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px;
  padding: 14px 0;
}
.figure-label { font-size: 1.125rem; }
.figure-value {
  font-family: var(--font-display); font-variant-numeric: lining-nums; font-weight: 600;
  font-size: clamp(3rem, 7vw, 7.5rem); line-height: .9; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr; unicode-bidi: isolate;
}
:root[lang="ar"] .figure-value { font-family: "Cormorant Garamond", serif; }
.statement-foot { margin-top: 28px; }

/* ---------- Split with portrait ---------- */
.portrait { margin: 0; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.portrait figcaption { margin-top: 12px; }
@media (min-width: 900px) { .portrait { max-width: 420px; } }
.split-body h2 { margin-bottom: 32px; max-width: 20ch; }
.split-body .text-link { margin-top: 28px; }

/* ---------- Service contents list (home) ---------- */
.contents { display: grid; grid-template-columns: 1fr; gap: 0 var(--g); margin-top: 48px; }
@media (min-width: 700px) { .contents { grid-template-columns: 1fr 1fr; } }
.contents a {
  display: block; padding: 0 0 40px; text-decoration: none; color: inherit;
  transition: transform .3s var(--ease);
}
.contents a:hover { transform: translateX(6px); }
:root[dir="rtl"] .contents a:hover { transform: translateX(-6px); }
.contents h3 { display: flex; justify-content: space-between; gap: 16px; }
.contents h3::after { content: "→"; font-family: var(--font-text); font-weight: 400; transition: transform .3s var(--ease); }
:root[dir="rtl"] .contents h3::after { content: "←"; }
.contents p { margin-top: 8px; max-width: 46ch; }

/* ---------- Clients board (home) ---------- */
.board { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) { .board { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.board-photos { display: grid; grid-template-rows: 1fr 1fr; min-height: 520px; }
.board-photos figure { margin: 0; overflow: hidden; }
.board-text { background: var(--paper-2); padding: clamp(32px, 4vw, 64px); }
.board-text h2 { max-width: 20ch; margin-bottom: 32px; }
.name-list { columns: 2 14em; column-gap: var(--g); font-size: 1.125rem; }
.name-list li { break-inside: avoid; padding: 7px 0; font-weight: 500; }
.board-text .text-link { margin-top: 32px; }

/* Client logos: each sits on a white tile, since most were drawn for white paper */
.logo-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.logo-wall li, .client-logo {
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease);
}
.logo-wall li { aspect-ratio: 3 / 2; --tile-pad: 20px; }
/* Each logo is placed absolutely inside its tile. Safari doesn't resolve max-height: 100% against a
   tile whose height comes from aspect-ratio, so logos rendered at full size and pushed the grid off-screen. */
.logo-wall li, .client-logo { position: relative; min-width: 0; }
.logo-wall img, .client-logo img {
  position: absolute; inset: var(--tile-pad); margin: auto;
  width: calc(100% - 2 * var(--tile-pad)); height: calc(100% - 2 * var(--tile-pad));
  object-fit: contain;
}
.logo-wall li:hover, .client:hover .client-logo { transform: translateY(-4px); }
@media (max-width: 600px) { .logo-wall { gap: 8px; } .logo-wall li { --tile-pad: 10px; } }

.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 32px 16px; }
.client-logo { aspect-ratio: 4 / 3; --tile-pad: 20px; margin-bottom: 14px; }
.client strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.client .note { display: block; margin-top: 4px; }
.client[hidden] { display: none; }
@media (max-width: 600px) { .client-grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; } .client-logo { --tile-pad: 14px; } }

/* ---------- Two offices ---------- */
.offices { display: grid; grid-template-columns: 1fr; gap: clamp(48px, 5vw, 80px) var(--g); }
@media (min-width: 900px) { .offices { grid-template-columns: 1fr 1fr; } }
.office figure { margin: 0 0 24px; overflow: hidden; }
.office figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.office h3 { margin-bottom: 10px; }
.office p { max-width: 40ch; }
.offices-head { margin-bottom: clamp(40px, 5vw, 72px); }
.offices-head h2 { max-width: 20ch; }

/* ---------- Closing call ---------- */
.closing { padding-block: clamp(80px, 9vw, 140px); }
.closing h2 { max-width: 22ch; }
.closing p { margin-top: 20px; max-width: 44ch; font-size: 1.25rem; }
.closing .btn { margin-top: 32px; }

/* ---------- Vision statement ---------- */
.vision blockquote { margin: 0; }
.vision blockquote p {
  font-family: var(--font-display); font-variant-numeric: lining-nums; font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.2; letter-spacing: -0.02em;
  max-width: 24ch;
}

/* ---------- Ruled rows (why us, services, sectors) ---------- */
.rows > * { padding-block: clamp(36px, 4vw, 64px); }
.row { display: grid; grid-template-columns: 1fr; gap: 16px var(--g); }
@media (min-width: 900px) { .row { grid-template-columns: 5fr 7fr; } }
.row h2, .row h3 { max-width: 18ch; }
.rows h3 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.08; letter-spacing: -0.025em; }
.h2-row { font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.05; letter-spacing: -0.025em; scroll-margin-top: calc(var(--header-h) + 24px); }
.row { scroll-margin-top: calc(var(--header-h) + 24px); }
.row-body { display: grid; gap: 24px; }
@media (min-width: 1200px) { .row-body.two { grid-template-columns: 1fr 1fr; } }
.row-body p { max-width: 52ch; }

.plain-list li { position: relative; padding-inline-start: 22px; margin-bottom: 10px; }
.plain-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 8px; height: 8px; background: var(--sage);
}

.section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.section-head h2 { max-width: 22ch; }
.section-head p { margin-top: 20px; max-width: 52ch; }

/* ---------- Sectors & client schedule ---------- */
.sector-list { display: grid; grid-template-columns: 1fr; gap: 0 var(--g); }
@media (min-width: 700px) { .sector-list { grid-template-columns: 1fr 1fr; } }
.sector-list li { padding: 0 0 40px; }
.sector-list h3 { margin-bottom: 6px; }

.schedule { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.schedule th { text-align: start; font-weight: 600; font-size: var(--fs-small); color: var(--ink-2); padding: 0 16px 14px; }
.schedule td { padding: 15px 16px; vertical-align: top; }
.schedule td:first-child { font-weight: 600; }
.schedule tbody tr:nth-child(odd) td { background: var(--paper-2); }
.schedule tbody tr { transition: transform .2s var(--ease); }
@media (max-width: 600px) {
  .schedule thead { display: none; }
  .schedule tr { display: block; padding: 12px 14px; }
  .schedule tbody tr:nth-child(odd) { background: var(--paper-2); }
  .schedule tbody tr:nth-child(odd) td { background: transparent; }
  .schedule td { display: block; padding: 2px 0; }
}

/* Sector filter (clients page) */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter button {
  min-height: 44px; padding: 0 18px; border: 0; cursor: pointer;
  background: var(--paper-2); color: var(--ink);
  font: 500 0.975rem/1 var(--font-text);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.filter button:hover { transform: translateY(-2px); }
.filter button[aria-pressed="true"] { background: var(--navy); color: #fff; }
:root[data-theme="dark"] .filter button[aria-pressed="true"] { background: var(--sage); color: var(--navy); }
.filter-count { margin-bottom: 16px; }
.schedule tr[hidden] { display: none; }

/* ---------- Team ---------- */
.profile { display: grid; grid-template-columns: 1fr; gap: 28px var(--g); }
@media (min-width: 900px) { .profile { grid-template-columns: 5fr 7fr; } }
.profile + .profile { margin-top: clamp(72px, 8vw, 128px); }
.profile figure { margin: 0; overflow: hidden; }
.profile figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.04); transition: filter .6s var(--ease), transform .8s var(--ease); }
.profile figure:hover img { filter: grayscale(0); transform: scale(1.02); }
@media (min-width: 900px) { .profile figure { max-width: 460px; } }
.profile h2 { max-width: 20ch; }
.team-role { margin-top: 12px; font-size: 1.25rem; }
.profile h3 { font-size: 1.5rem; font-weight: 600; margin: 36px 0 16px; }
.cred-list { font-size: 1rem; }
@media (min-width: 1200px) { .cred-list.two-col { columns: 2; column-gap: var(--g); } .cred-list.two-col li { break-inside: avoid; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--g); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 5fr 7fr; } }
.panel { background: var(--paper-2); padding: clamp(28px, 3.4vw, 52px); }
.panel h2 { font-size: var(--fs-h3); margin-bottom: 24px; }
.info-list li { padding: 14px 0; }
.info-list strong { display: block; font-size: var(--fs-small); color: var(--ink-2); font-weight: 500; }
.info-list span, .info-list a { font-size: 1.125rem; }
.panel .btn-whatsapp { margin-top: 24px; }
.panel .office-status { margin-top: 20px; }

.form-status { margin: 0 0 24px; padding: 14px 18px; background: var(--sage-soft); color: #0b1f3a; font-weight: 500; }
.form-status-error { background: #f6d9d4; color: #6b1d12; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; padding: 14px 16px; min-height: 52px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid transparent; border-radius: 0;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input:hover, .field textarea:hover { border-color: rgba(11, 31, 58, .25); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sage-ink); }
.field textarea { min-height: 160px; resize: vertical; }
.hidden-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.map-wrap { margin-top: var(--g); height: clamp(320px, 45vh, 480px); background: var(--paper-2); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #eef1f5; padding-top: clamp(72px, 8vw, 120px); overflow: hidden; }
:root[data-theme="dark"] .site-footer { background: #06101e; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--sage); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px var(--g); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 5fr 3.5fr 3.5fr; } }
.footer-grid h2 { font-size: 1.25rem; font-weight: 600; color: var(--sage-soft); margin-bottom: 16px; }
.footer-grid li { padding: 4px 0; }
.footer-grid p { max-width: 36ch; font-size: 1.125rem; }
.footer-name {
  display: block; margin-top: clamp(64px, 8vw, 120px);
  font-family: var(--font-display); font-variant-numeric: lining-nums; font-weight: 600;
  font-size: min(26rem, calc((100vw - 2 * var(--m)) / 4.5)); line-height: .78; letter-spacing: -0.055em; /* "Asran Office" is ~4.4× its font size wide */
  color: var(--sage); white-space: nowrap;
  transform: translateY(.06em);
}
/* "مكتب عسران" is about 5.05× its font size wide in IBM Plex Sans Arabic; size it to the space between the margins (with room for a scrollbar) */
:root[lang="ar"] .footer-name { font-size: min(26rem, calc((100vw - 2 * var(--m)) / 5.35)); letter-spacing: 0; line-height: 1.4; transform: none; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-block: 28px; font-size: var(--fs-small); color: #b9c3d2; }
.footer-bottom a { text-decoration: underline; text-underline-offset: .2em; }
.credits { max-width: 90ch; }

/* ---------- Motion ---------- */
.js [data-reveal] > *, .js [data-reveal-self] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal].is-in > *, .js [data-reveal-self].is-in { opacity: 1; transform: none; }
.js .reveal-img > img { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path 1.2s var(--ease), transform 1.6s var(--ease), filter .6s var(--ease); }
.js .reveal-img.is-in > img { clip-path: inset(0 0 0 0); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] > *, .js [data-reveal-self] { opacity: 1; transform: none; }
  .js .reveal-img > img { clip-path: none; transform: none; }
}

/* ---------- Phone ---------- */
@media (max-width: 899px) {
  .mosaic { grid-template-columns: 3fr 1fr; height: 300px; }
  .mosaic .m-third { display: none; }
  .mosaic .tile-sage { padding: 14px; }
  .board-photos { min-height: 0; grid-template-rows: none; grid-template-columns: 1fr 1fr; height: 220px; }
  .page-head-split { grid-template-columns: 1fr; }
  .page-head-split figure + figure { display: none; }
  .figure-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Address linked to its Google Maps location */
.map-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.map-link:hover { color: var(--link); }
.site-footer .map-link:hover { color: var(--sage); }