/* Legazione Vclaude: landing page styles.
   Geometry comes from the mark (LEGAZIONE-brand/docs/MARK-SPEC.md): a 96-unit grid, stroke and clearance of
   8 units, tip clearance 12, tooth pitch 16. One unit is 4 px here, so the clearance is 2rem.
   The two columns of every split stand in the ratio of the mark's spines, 80 to 48 (5fr to 3fr). */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Variable-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Amiri, subset to the one Arabic word on the English pages (العربية) with its shaping tables: 9 KB instead of
   120 KB. Built from LEGAZIONE - Master/Amiri/Amiri-Regular.ttf with fontTools (see README). */
@font-face {
  font-family: "Amiri";
  src: url("../fonts/Amiri-Regular-subset.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF;
}
/* Amiri for the headings of Arabic pages, subset to the Arabic text of those pages (see README; subset again
   when it changes), and scaled to sit at EB Garamond's size: Amiri draws small in its em. */
@font-face {
  font-family: "Amiri Display";
  src: url("../fonts/Amiri-Regular-ar.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 112%;
  unicode-range: U+0600-06FF;
}
/* IBM Plex Sans Arabic for Arabic running text: a plain grotesque, as Inter is for English. Arabic block only,
   so English pages never download it. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-400-arabic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-600-arabic.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: "Inter Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Segoe UI"), local("Roboto");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "EB Garamond Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------- tokens */

:root {
  /* Brand primitives */
  --ink: #101010;
  --paper: #F7F4EE;
  --oxblood: #5C1A1B;
  --brass: #B8873F;
  --white: #FFFFFF;

  /* Derived, contrast by the WCAG formula */
  --paper-sunken: #EFEBE3;
  --graphite: #4A4744;     /* 8.4:1 on paper */
  --stone: #756F67;        /* 4.5:1 on paper: field borders, quiet text */
  --rule: #DED8CE;         /* hairline, decorative */
  --error: #8C2C2D;        /* 7.6:1 on paper */
  --brass-light: #D6A85F;  /* 8.7:1 on ink */
  --mist: #BDB6AC;         /* 9.5:1 on ink */
  --ink-rule: #34312D;

  --font-display: "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ar: "Amiri", "Geeza Pro", "Noto Naskh Arabic", serif;

  /* The mark's units */
  --u: .25rem;
  --c: 2rem;   /* clearance = stroke = 8 units */
  --t: 3rem;   /* tip clearance = 12 units */
  --p: 4rem;   /* tooth pitch = 16 units */

  /* Type, after the classic scale: 14, 16, 17, 21, 24, 30, 36, 48, 56, 72, 96 */
  --fs-display: clamp(2.75rem, 1.35rem + 5.2vw, 6rem);
  --fs-page: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);   /* interior page titles */
  --fs-h2: clamp(2.125rem, 1.55rem + 2.2vw, 3.5rem);
  --fs-statement: clamp(1.5rem, 1.1rem + 1.5vw, 2.375rem);
  --fs-h3: clamp(1.5rem, 1.35rem + .55vw, 1.875rem);
  --fs-lead: clamp(1.0625rem, .97rem + .4vw, 1.3125rem);
  --fs-body: clamp(1rem, .98rem + .1vw, 1.0625rem);
  --fs-small: .9375rem;
  --fs-caption: .875rem;

  /* Layout */
  --container: 80rem;
  --margin: clamp(1.25rem, .6rem + 3.6vw, 5rem);
  --section: clamp(4.5rem, 2.6rem + 7vw, 8rem);
  --header-h: 4.5rem;
  --target: 2.75rem;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ----------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--c));
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-variation-settings: "opsz" 16;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4, ul, dl, dd, figure, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.section--ink :focus-visible { outline-color: var(--paper); }

.skip {
  position: absolute;
  inset-inline-start: var(--margin);
  top: .75rem;
  z-index: 30;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}

.nobr { white-space: nowrap; }
.small { font-size: var(--fs-small); line-height: 1.55; }

/* ------------------------------------------------------------ type */

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 460;
  line-height: .98;
  letter-spacing: -.022em;
  text-wrap: balance;
  max-width: 10.5em;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 470;
  line-height: 1.04;
  letter-spacing: -.016em;
  text-wrap: balance;
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-page);
  font-weight: 460;
  line-height: 1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.008em;
}
.statement {
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  font-weight: 420;
  line-height: 1.22;
  text-wrap: pretty;
  max-width: 24em;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--graphite);
  text-wrap: pretty;
  max-width: 32rem;
}
.caption {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--graphite);
  font-variation-settings: "opsz" 14;
  max-width: 24rem;
}
.label-head {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--graphite);
}

/* ---------------------------------------------------------- actions */

.btn {
  display: inline-grid;
  place-items: center;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-small);
  font-weight: 550;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--compact { min-height: var(--target); padding: 0 1.125rem; }
.btn--quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--oxblood); }
  .btn--quiet:hover { background: var(--ink); color: var(--paper); }
}

.link {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: currentColor;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--oxblood); text-decoration-thickness: 2px; }
  .section--ink .link:hover { color: var(--brass-light); }
}
.link--action {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-weight: 550;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem var(--c);
}

/* ----------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.site-header[data-scrolled] { border-bottom-color: var(--rule); }

.header-row {
  display: flex;
  align-items: center;
  gap: var(--c);
  min-height: var(--header-h);
}
.lockup {
  display: block;
  flex: none;
  padding-block: .5rem;
}
.lockup img { width: 11.25rem; height: auto; }

.nav, .header-back { margin-inline-start: auto; }
.header-back { font-size: var(--fs-small); }
.nav-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--c);
}
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms ease;
}
.nav-list a[aria-current] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .nav-list a:hover { color: var(--oxblood); }
}

/* The current page is marked by a tooth: a short Brass bar under its link. */
.nav-list a { position: relative; }
.nav-list a[aria-current]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: .375rem;
  height: 2px;
  background: var(--brass);
}
.footer-nav .link[aria-current] { text-decoration-color: currentColor; }

.menu-button { display: none; }
.menu-foot { display: none; }

@media (min-width: 60rem) {
  .lockup img { width: 12.25rem; }
}

@media (max-width: 59.99rem) {
  .header-cta { display: none; }
}

/* Phone header: lockup and a menu button; the menu drops below the header. Without JavaScript the list stays
   visible and wraps, so the page is still navigable. */
@media (max-width: 59.99rem) {
  .js .menu-button {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    min-height: var(--target);
    min-width: var(--target);
    padding: 0 .25rem 0 .5rem;
    border: 0;
    background: none;
    font-size: var(--fs-small);
    font-weight: 550;
    cursor: pointer;
  }
  .menu-icon {
    display: grid;
    gap: 5px;
    width: 1.25rem;
  }
  .menu-icon span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform 200ms var(--ease-out);
  }
  /* Two bars of unequal length, like the mark's teeth. */
  .menu-icon span:last-child { width: 70%; }
  .menu-button[aria-expanded="true"] .menu-icon span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] .menu-icon span:last-child { transform: translateY(-3.5px) rotate(-45deg); width: 100%; }

  .js .menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: .5rem var(--margin) var(--c);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;
  }
  .js .menu[data-open] {
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: 0 0 0 100vmax rgb(16 16 16 / .32);
    clip-path: inset(0 -100vmax -100vmax -100vmax); /* the backdrop dims the page below, never the header */
    transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s;
  }
  .js .nav-list { display: grid; gap: 0; }
  .js .nav-list a {
    min-height: 3.5rem;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 470;
    width: 100%;
    border-bottom: 1px solid var(--rule);
  }
  .js .nav-list a[aria-current]::after { inset-inline-end: auto; width: 19.5px; height: 3px; bottom: .75rem; }
  .js .menu-foot { display: block; margin-top: 1.25rem; font-size: var(--fs-small); }
  .js .menu-foot .link { display: inline-flex; align-items: center; min-height: var(--target); }

  html:not(.js) .header-row { flex-wrap: wrap; padding-block: .5rem; }
  html:not(.js) .nav { margin-inline-start: 0; width: 100%; }
}

/* The narrowest phones: the lockup keeps its 180 px brand minimum, so the menu button gives up its word. */
@media (max-width: 21.99rem) {
  .header-row { gap: 1rem; }
  .js .menu-button { padding: 0; justify-content: center; }
  .js .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------- hero */

.hero { padding-block: clamp(3rem, 1.5rem + 5vw, 6.5rem) var(--section); }
.hero-grid {
  display: grid;
  gap: var(--t) var(--c);
  align-items: center;
}
.house {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);
  font-weight: 450;
  color: var(--oxblood);
  margin-bottom: 1.25rem;
}
.hero-lead { margin-top: var(--c); }
.hero .actions { margin-top: var(--c); }

/* The hero visual: the mark as a solid object. The still render is in the HTML and paints first; the live
   scene, when it loads, fades in over it in the same pose. With no script, reduced motion or no WebGL the still
   render is all there is, and it is complete. */
.hero-visual {
  justify-self: start;
  display: grid;
  gap: 1.25rem;
  width: min(100%, 20rem);
  margin: 0;
}
.hero-stage {
  position: relative;
  aspect-ratio: 1;
}
.hero-poster, .hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-poster { object-fit: contain; transition: opacity 400ms ease; }
/* While the first-visit motion is due (gate.js), the still render waits for the live scene; site.js shows it
   if the scene does not come. Applied by script only: without script the still render is visible. */
[data-intro="play"] .hero-poster { opacity: 0; }
.hero-canvas { display: block; opacity: 0; transition: opacity 600ms ease; }
.hero-canvas.is-ready { opacity: 1; }
/* A soft contact shadow on the page, so the object rests on the Paper rather than floating over it. */
.hero-floor {
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 12%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(16 16 16 / .14), rgb(16 16 16 / 0));
}
.mark-brass { fill: var(--brass); }

@media (min-width: 40rem) {
  .hero-visual { width: min(100%, 24rem); }
}
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 5fr 3fr; }
  .hero-visual { justify-self: end; width: 100%; max-width: 30rem; }
}

/* The handshake, used by the sent confirmation: the two forms close from either side and stop one clearance
   apart. They travel one tooth pitch (16 units) each, so at no frame do they touch. */
@keyframes lgz-primary { from { opacity: 0; transform: translateX(-16px); } }
@keyframes lgz-counter { from { opacity: 0; transform: translateX(16px); } }

/* -------------------------------------------------------- sections */

.section { padding-block: var(--section); border-top: 1px solid var(--rule); }

.section-head {
  display: grid;
  gap: 1rem var(--c);
  align-items: end;
  margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}
.section-head--top { align-items: start; }
.section-note {
  color: var(--graphite);
  font-size: var(--fs-body);
  max-width: 34rem;
  text-wrap: pretty;
}
@media (min-width: 60rem) {
  .section-head { grid-template-columns: 5fr 3fr; }
}

/* The tooth list: each item starts with a short bar, at the three reaches of the mark's left teeth
   (52, 36 and 44 units, scaled to a 3 px stroke), never equal from one item to the next. */
.teeth { display: grid; gap: .5rem; }
.teeth li {
  position: relative;
  padding-inline-start: 2rem;
  color: var(--graphite);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.teeth li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .69em;
  height: 3px;
  width: 19.5px;
  background: var(--ink);
}
.teeth li:nth-child(3n + 2)::before { width: 13.5px; }
.teeth li:nth-child(3n + 3)::before { width: 16.5px; }
.teeth--loose { gap: .875rem; }
.teeth--loose li { font-size: var(--fs-body); color: var(--ink); }

/* ------------------------------------------------------ page header */

/* Shared by every interior page: the page title and its lead on the 5:3 split, then the first section's rule. */
.page-header { padding-top: clamp(3rem, 1.5rem + 5vw, 6.5rem); }
.page-header-aside { display: grid; gap: 1rem; }
.page-header .section-head { row-gap: 1.5rem; }
@media (min-width: 60rem) {
  .page-header .section-head { grid-template-columns: 3fr 5fr; }
  .page-header .page-title { grid-column: 1 / -1; }
  .page-header .page-header-aside { grid-column: 2; }
  /* Contact's form sits in the 5 and its details in the 3, so there the lead takes the 3. */
  .page-header--form .section-head { grid-template-columns: 5fr 3fr; }
}
/* The header already closes a section: what follows starts at the header's own spacing, not a full section's.
   A group list that brings its own heavy rule drops the hairline too. */
.page-header + .section:not(.section--ink) { padding-top: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); }
.page-header + .section.section--flush { padding-top: 0; border-top: 0; }

/* Breadcrumb on pages under another page: one link back up, above the title. */
.crumb { grid-column: 1 / -1; font-size: var(--fs-small); }
.crumb .link { display: inline-flex; align-items: center; min-height: var(--target); }

/* --------------------------------------------------- service pages */

.facts--wide { max-width: 52rem; }
.facts.facts--wide > div { grid-template-columns: 9rem 1fr; font-size: var(--fs-body); }
.when-list { max-width: 46rem; }
.faq { border-bottom: 1px solid var(--rule); }
.faq-row {
  display: grid;
  gap: 1rem var(--c);
  padding-block: var(--c);
  border-top: 1px solid var(--rule);
}
.faq .faq-q { font-size: 1.5rem; line-height: 1.2; }
.faq-a { max-width: 38rem; }
@media (min-width: 60rem) {
  .faq-row { grid-template-columns: 3fr 5fr; }
  /* On the same 3:5 lines as the groups and questions above and below it. */
  .facts--wide { max-width: none; }
  .facts.facts--wide > div { grid-template-columns: 3fr 5fr; column-gap: var(--c); }
  .facts--wide dd { max-width: 38rem; }
}
.record--note .plain { gap: .25rem; }

/* ------------------------------------------------------ home teasers */

.teasers { display: grid; gap: var(--t) var(--c); }
.teaser {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding-top: var(--c);
  border-top: 2px solid var(--ink);
}
.teaser p { color: var(--graphite); max-width: 26rem; }
.teaser-link { text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (min-width: 52rem) {
  .teasers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.app-rows { display: grid; gap: var(--c); }
.app-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding-top: var(--c);
  border-top: 2px solid var(--ink);
}
.app-row .app-icon { width: 4rem; height: 4rem; }
/* The icon's picture wrapper is the flex item: it must not shrink, or the icon narrows on a phone. */
.app-row > picture, .record-head > picture { flex: none; display: block; }
.app-row-text { display: grid; gap: .375rem; }
.app-row-text p { color: var(--graphite); max-width: 30rem; }
@media (min-width: 52rem) {
  .app-rows { grid-template-columns: 1fr 1fr; }
}
.section-foot { margin-top: var(--c); }
/* A related link breaks between links, never inside one. */
.section-foot .link { white-space: nowrap; }

.section--close .section-head { margin-bottom: 0; }
.close-aside { display: grid; gap: 1.5rem; }

/* ---------------------------------------------------------- services */

.group {
  display: grid;
  gap: var(--c);
  padding-block: var(--c) var(--t);
  border-top: 2px solid var(--ink);
}
.group + .group { margin-top: var(--c); }
.group-intro { display: grid; gap: 1rem; align-content: start; }
.group-intro p { color: var(--graphite); max-width: 26rem; }
.group-intro .link--action { justify-self: start; }

.services { display: grid; gap: 0; }
.service {
  display: grid;
  gap: .625rem var(--c);
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}
.service:first-child { border-top: 0; padding-top: 0; }
.service-name {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.35;
}
.service > p { color: var(--graphite); max-width: 34rem; }
.service .teeth { margin-top: .5rem; }

@media (min-width: 48rem) {
  .service .teeth { grid-template-columns: 1fr 1fr; column-gap: var(--c); }
}
@media (min-width: 60rem) {
  .group { grid-template-columns: 3fr 5fr; padding-block: var(--c) var(--t); }
  .group-intro { position: sticky; top: calc(var(--header-h) + var(--c)); }
}

/* ------------------------------------------------------------- work */

.section--work { background: var(--paper-sunken); }
.records { display: grid; gap: var(--t) var(--c); }
.record {
  display: grid;
  align-content: start;
  gap: 1.5rem;
  padding-top: var(--c);
  border-top: 2px solid var(--ink);
}
.record-head { display: flex; align-items: center; gap: 1.25rem; }
.app-icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgb(16 16 16 / .08);
  flex: none;
}
.record-summary { max-width: 32rem; text-wrap: pretty; }
.facts {
  display: grid;
  border-top: 1px solid var(--rule);
}
.facts > div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding-block: .625rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.facts dt { color: var(--graphite); }
.facts dd { font-variant-numeric: tabular-nums; }
.record .btn, .record .link--action { justify-self: start; }
/* App screens: two of the app's own screenshots side by side, with the app icon's soft edge. */
.screens { display: grid; grid-template-columns: repeat(2, minmax(0, 10.5rem)); gap: 1rem; margin: 0; }
.screens img { display: block; width: 100%; height: auto; border-radius: 1.25rem; box-shadow: 0 0 0 1px rgb(16 16 16 / .08); background: var(--paper-sunken); }
.screens figcaption { grid-column: 1 / -1; color: var(--graphite); }

@media (min-width: 52rem) {
  .records { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------- about */

.section--ink {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
.section--ink .label-head { color: var(--mist); }
.section--ink p { color: var(--paper); }

.about-head {
  display: grid;
  gap: var(--c);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.about-head .h2 { color: var(--brass-light); }
@media (min-width: 60rem) {
  .about-head { grid-template-columns: 3fr 5fr; align-items: start; }
}

.about-grid {
  display: grid;
  gap: var(--t) var(--c);
  padding-top: var(--c);
  border-top: 1px solid var(--rule);
}
.section--ink .about-grid { border-top-color: var(--ink-rule); }
.about-cell { display: grid; gap: .875rem; align-content: start; }
.about-cell p:not(.founder-name):not(.company-name):not(.languages) { color: var(--graphite); font-size: var(--fs-small); }
.section--ink .about-cell p:not(.founder-name):not(.company-name):not(.languages) { color: var(--mist); }
.founder-name, .company-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 480;
  line-height: 1.15;
}
.languages {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 480;
  line-height: 1.2;
}
.lang-ar {
  font-family: var(--font-ar);
  font-size: 1.1em;
  font-weight: 400;
}
@media (min-width: 52rem) {
  .about-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Founder biography: a native disclosure whose height animates where the browser can size to auto. */
.bio summary {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--target);
  font-size: var(--fs-small);
  font-weight: 550;
  color: var(--paper);
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}
.bio summary::-webkit-details-marker { display: none; }
.summary-icon {
  position: relative;
  width: .75rem;
  height: .75rem;
  flex: none;
}
.summary-icon::before, .summary-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: 100%;
  height: 2px;
  background: var(--brass-light);
  transition: transform 200ms var(--ease-out);
}
.summary-icon::after { transform: rotate(90deg); }
.bio[open] .summary-icon::after { transform: rotate(0deg); }
.bio-body { display: grid; gap: 1rem; padding-top: 1rem; }
.bio-body p { font-size: var(--fs-small); color: var(--graphite); max-width: 34rem; }
.section--ink .bio-body p { color: var(--mist); }
.bio::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete;
}
.bio[open]::details-content { block-size: auto; }
@media (hover: hover) and (pointer: fine) {
  .bio summary:hover { color: var(--brass-light); }
}

.studies {
  display: grid;
  gap: .875rem var(--c);
  margin-top: var(--t);
  padding-top: var(--c);
  border-top: 1px solid var(--rule);
}
.section--ink .studies { border-top-color: var(--ink-rule); }
.studies p { color: var(--graphite); font-size: var(--fs-small); max-width: 38rem; } /* the bio's measure */
.section--ink .studies p { color: var(--mist); }
@media (min-width: 60rem) {
  .studies { grid-template-columns: 3fr 5fr; }
}

.about-head-body { display: grid; gap: var(--c); }
.about-prose { display: grid; gap: 1rem; max-width: 38rem; }
.section--ink .about-prose p { color: var(--mist); }
.section--ink .about-head:last-child { padding-bottom: 0; }
.founder-row {
  display: grid;
  gap: 1rem var(--c);
  padding-block: var(--c) var(--t);
  border-top: 1px solid var(--rule);
}
.section--ink .founder-row { border-top-color: var(--ink-rule); }
.founder-row .bio-body { padding-top: 0; }
.founder-row .bio-body p { font-size: var(--fs-body); max-width: 38rem; color: var(--ink); }
.section--ink .founder-row .bio-body p { color: var(--mist); }
/* On About the founder row opens its own Paper section, so it needs no rule of its own. */
.section--people .founder-row:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 52rem) {
  .about-grid.about-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .founder-row { grid-template-columns: 3fr 5fr; }
  /* Company and languages follow the founder row's 3:5, so languages starts on the bio's line. */
  .about-grid.about-grid--two { grid-template-columns: 3fr 5fr; }
}

/* -------------------------------------------------------- engagements */

.lists { display: grid; gap: var(--t) var(--c); }
.lists .h3 { margin-bottom: 1.5rem; }
.sectors {
  margin-top: var(--t);
  padding-top: var(--c);
  border-top: 1px solid var(--rule);
}
.sectors p {
  color: var(--graphite);
  font-size: var(--fs-small);
  max-width: 46rem;
}
@media (min-width: 52rem) {
  .lists { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------ contact */

.contact-grid { display: grid; gap: var(--t) var(--c); }
@media (min-width: 60rem) {
  .contact-grid { grid-template-columns: 5fr 3fr; align-items: start; }
}

.form { display: grid; gap: 1.75rem; max-width: 40rem; }
.field { display: grid; gap: .5rem; }
.field label, .field legend {
  font-size: var(--fs-small);
  font-weight: 600;
}
.hint, .field-hint { color: var(--graphite); font-weight: 400; font-size: var(--fs-small); }
.input {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .875rem;
  border: 1px solid var(--stone);
  border-radius: 0;
  background: var(--white);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
textarea.input { min-height: 10rem; resize: vertical; }
.input:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.field[data-invalid] .input { border-color: var(--error); box-shadow: inset 3px 0 0 var(--error); }
.error-msg {
  color: var(--error);
  font-size: var(--fs-small);
  font-weight: 550;
}

.radios { display: grid; gap: .25rem; margin-top: .25rem; }
.radio {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--target);
  font-size: 1rem;
  cursor: pointer;
}
.field .radio { font-size: 1rem; font-weight: 400; }
.radio input {
  appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 1px solid var(--stone);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}
.radio input::before {
  content: "";
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(.4);
  opacity: 0;
  transition: transform 160ms var(--ease-out), opacity 120ms ease;
}
.radio input:checked { border-color: var(--ink); }
.radio input:checked::before { transform: none; opacity: 1; }
.radio input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.field[data-invalid] .radio input { border-color: var(--error); }

.form-note { color: var(--graphite); font-size: var(--fs-small); }
.form-note .link { color: var(--ink); }

.btn--submit { justify-self: start; min-width: 12rem; }
.btn-label {
  grid-area: 1 / 1;
  transition: opacity 180ms ease, filter 180ms ease;
}
.btn-label--busy { opacity: 0; filter: blur(2px); }
.btn--submit[aria-busy="true"] { cursor: progress; }
.btn--submit[aria-busy="true"] [data-label-idle] { opacity: 0; filter: blur(2px); }
.btn--submit[aria-busy="true"] [data-label-busy] { opacity: 1; filter: none; }

.hp, .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.error-summary, .notice {
  max-width: 40rem;
  margin-bottom: var(--c);
  padding: 1.25rem 1.5rem;
  border-inline-start: 4px solid var(--error);
  background: var(--white);
}
.error-summary h2 { font-size: 1rem; font-weight: 650; color: var(--error); }
.error-summary ul { margin-top: .5rem; display: grid; gap: .25rem; }
.error-summary a { color: var(--error); font-weight: 550; text-underline-offset: .2em; }
.notice p { font-size: var(--fs-small); }

.sent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--c);
  align-items: start;
  max-width: 40rem;
  padding: var(--c);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--rule);
  opacity: 1;
  transform: none;
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}
@starting-style {
  .sent { opacity: 0; transform: translateY(.5rem); }
}
.sent > div { display: grid; gap: 1rem; }
.sent .btn { justify-self: start; margin-top: .5rem; }
.sent .h3:focus { outline: none; }
.mark--small { width: 4rem; height: 4rem; color: var(--ink); }
.sent:not([hidden]) .mark-primary { animation: lgz-primary 900ms var(--ease-out) 120ms both; }
.sent:not([hidden]) .mark-counter { animation: lgz-counter 900ms var(--ease-out) 220ms both; }

.aside { display: grid; gap: var(--c); align-content: start; }
.aside > div { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.aside .link { display: inline-flex; align-items: center; min-height: var(--target); }
.plain { display: grid; align-content: start; }

@media (max-width: 30rem) {
  .sent { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- footer */

.site-footer { border-top: 2px solid var(--ink); padding-block: var(--t) var(--c); }
.footer-grid { display: grid; gap: var(--c); }
.footer-brand { display: grid; gap: 1rem; align-content: start; }
.footer-brand .lockup { justify-self: start; padding: 0; }
.footer-brand p { color: var(--graphite); max-width: 22rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 var(--t); }
.footer-nav .link { display: inline-flex; align-items: center; min-height: var(--target); font-size: var(--fs-small); text-decoration-color: transparent; }
.footer-nav .link:focus-visible { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .footer-nav .link:hover { text-decoration-color: currentColor; }
}
.footer-copy { color: var(--graphite); }
@media (min-width: 60rem) {
  .footer-grid { grid-template-columns: 5fr 3fr; }
  .footer-copy { grid-column: 1 / -1; }
}

/* ------------------------------------------------------- legal pages */

.legal-meta { color: var(--graphite); }
.legal-row { border-top: 1px solid var(--rule); padding-block: var(--c); }
.legal-split { display: grid; gap: 1rem var(--c); }
.legal-split .h3 { font-size: 1.5rem; }
.prose { display: grid; gap: 1rem; max-width: 38rem; }
.prose p { text-wrap: pretty; }
.legal-end { padding-block: var(--t) var(--section); }
@media (min-width: 60rem) {
  .legal-split { grid-template-columns: 3fr 5fr; }
}

.notfound-actions { padding-bottom: var(--section); }

/* ------------------------------------------------------ reduced motion */

/* Fewer and gentler, not none: movement goes, opacity and colour changes stay. */
@media (prefers-reduced-motion: reduce) {
  .sent .mark-primary, .sent .mark-counter { animation: none !important; }
  .btn { transition: background-color 200ms ease, color 200ms ease; }
  .btn:active { transform: none; }
  .js .menu, .js .menu[data-open] { transform: none; }
  .sent { transition: opacity 200ms ease; transform: none; }
  @starting-style { .sent { transform: none; } }
  .menu-icon span, .summary-icon::before, .summary-icon::after { transition: none; }
  .bio::details-content { transition: none; }
}

/* ------------------------------------------------------------- Arabic */

/* A page in Arabic runs right to left (dir="rtl" on the page). Arabic headings take Amiri, a classical naskh
   that answers EB Garamond; Arabic running text takes IBM Plex Sans Arabic, as Inter carries English. Latin
   words inside Arabic (MealMind, the email address) keep the English faces, because the Arabic faces cover the
   Arabic block only. Arabic letters join, so no tracking; and they need taller lines than Latin. */
html[lang="ar"] {
  --font-display: "Amiri Display", "EB Garamond", "EB Garamond Fallback", "Geeza Pro", serif;
  --font-ui: "IBM Plex Sans Arabic", "Inter", "Inter Fallback", "Geeza Pro", system-ui, sans-serif;
  --fs-small: 1rem;
  --fs-caption: .9375rem;
}
html[lang="ar"] * { letter-spacing: 0; }
html[lang="ar"] :is(p, li, dd, dt, .section-note) { line-height: 1.8; }
html[lang="ar"] :is(h1, h2, h3, .page-title, .statement) { line-height: 1.35; }
html[lang="ar"] [lang="en"] { line-height: inherit; }

/* The link to the same page in the other language, under the page title. */
.page-alt { margin-top: 1rem; }
.page-alt .link { display: inline-flex; align-items: center; min-height: var(--target); }
/* Arabic on an English page (the language link, the note on Contact) takes the Arabic text face, not a system font. */
.page-alt [lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-ui); font-size: 1.0625em; }