/* ===========================================================================
   About and contact — the two reading surfaces.
   Both share the masthead-over-photograph, and both end on the same footer.
   =========================================================================== */

/* --- The masthead --------------------------------------------------------
   A photograph the page opens onto, washed almost to black so that the
   heading is the only thing with contrast on it.                          */

.mast {
  position: relative;
  /* A floor, not a ceiling. This used to be a locked `100svh` with the
     overflow hidden, which meant the statement inside it was cut off the
     moment it grew past one screen — and it has. The section now starts at
     a full screen and grows with whatever is put in it. */
  min-height: calc(100svh - var(--hdr));
  display: flex;
  align-items: center;
  /* Mounted, like the hero: the ground shows on three sides and the header
     band closes the fourth. */
  margin: 0 var(--frame) var(--frame);
}

.mast__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.mast__wash {
  position: relative;
  z-index: 10;
  width: 100%;
  /* The wash sets the height; the media behind it is absolute and follows. */
  min-height: calc(100svh - var(--hdr));
  padding: var(--sp-field) var(--gut);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  align-items: flex-start;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.88) 0%,
    rgba(10, 10, 10, 0.72) 45%,
    rgba(10, 10, 10, 0.94) 100%
  );
}

.mast__title {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

/* The heading sets its own width; the rule takes whatever is left. Without
   this the flex rule squeezes a two-word Persian heading onto two lines. */
.mast__title > * { flex: none; }

/* The rule that runs out of the heading and off toward the margin. It is the
   same hairline as everything else; it simply has nothing to enclose. */
.mast__title::after {
  content: '';
  height: 1px;
  flex: 1 1 clamp(3rem, 12vw, 16rem);
  max-width: 22rem;
  background: var(--hair);
}

/* The measure, not a box. Prose wants roughly 68 characters a line whatever
   the window is doing; the paragraphs inside space themselves. */
.mast__body {
  width: min(100%, 68ch);
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
}

.mast__prose {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
}

/* --- The statement on a wide screen --------------------------------------
   One 68ch column in a 2300px band used a third of the width and left the
   other two-thirds empty, which reads as a paragraph that has been cut off
   rather than as a measure. Above 1200px the statement takes the whole band
   and is set in columns instead: the block fills the width it is given, and
   every line is still the length a line should be. A paragraph is never
   broken across a column — with three of them, three columns means one
   each.                                                                  */

@media (min-width: 1200px) {
  .mast__body { width: 100%; }

  .mast__prose {
    display: block;
    columns: 2;
    column-gap: clamp(2.5rem, 4vw, 5rem);
  }

  .mast__prose > * {
    break-inside: avoid;
    margin-block-end: clamp(0.9rem, 1.6vw, 1.35rem);
  }

  .mast__prose > :last-child { margin-block-end: 0; }
}

@media (min-width: 1800px) {
  .mast__prose { columns: 3; }
}

/* A row of buttons under the statement — the error page's way back. */
.mast__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.mast__sign {
  margin: 0;
  font-family: 'Lahzeh', sans-serif;
  font-weight: 500;
  font-size: var(--fs-key);
  color: var(--muted);
  word-spacing: 0.16em;
}

/* --- The record: figures in frames ---------------------------------------- */

.record {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 2.4vw, 2rem);
  width: 100%;
}

.record > * { flex: 1 1 240px; }

.stat {
  border: 1px solid var(--hair);
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  transition: border-color var(--t) var(--ease);
}

.stat:hover { border-color: var(--paper); }
.stat__label { color: var(--muted); font-weight: 500; font-size: var(--fs-key); }
.stat__note  { color: var(--muted); font-weight: 500; font-size: var(--fs-key); }

/* --- The staircase -------------------------------------------------------
   Every project the company has delivered, one row each, stepped inward so
   the list draws its own elevation. The rule under each row grows from the
   leading edge as the row arrives — the same 2px bar as every hover on the
   site, here doing the work of a chart.                                   */

.stair {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
  width: 100%;
  align-items: center;
}

.stair__row {
  position: relative;
  width: min(100%, 62rem);
  display: flex;
  align-items: stretch;
}

.stair__step {
  flex: none;
  width: var(--step, 0px);
}

.stair__card {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-tight) var(--sp-band);
  padding-block-end: var(--sp-tight);
}

.stair__year {
  font-weight: 400;
  font-size: var(--fs-key);
  color: var(--brand);
  white-space: nowrap;
}

.stair__name {
  font-family: 'Lahzeh', sans-serif;
  font-weight: 600;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.2;
}

.stair__meta {
  font-weight: 400;
  font-size: var(--fs-key);
  color: var(--muted);
  text-align: end;
}

/* The bar. It measures nothing — it is a rule that arrives. */
.stair__row::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: var(--step, 0px);
  inset-inline-end: 100%;
  height: 2px;
  background: var(--paper);
  transition: inset-inline-end 1000ms var(--ease);
}

.stair__row.is-in::after { inset-inline-end: 0; }

/* --- Vision and mission --------------------------------------------------- */

.pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
}

.pair__cell {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  align-items: flex-start;
  padding-inline-start: clamp(1rem, 2vw, 2rem);
  border-inline-start: 1px solid var(--hair-soft);
}

/* --- The founder ---------------------------------------------------------
   A portrait and a statement, side by side at the page's own gutter. The
   portrait is drained like every other photograph on the site and colours
   on contact, which is the one gesture the whole site shares.            */

.ceo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  width: 100%;
}

.ceo__plate {
  margin: 0;
  overflow: hidden;
  background: var(--ink-lift);
  aspect-ratio: 4 / 5;
}

.ceo__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(0);
  transition: filter 620ms var(--ease), transform 900ms var(--ease);
}

.ceo:hover .ceo__plate img { filter: saturate(1); transform: scale(1.03); }

.ceo__say {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}

.ceo__role { color: var(--brand); }

@media (max-width: 859px) {
  .ceo { grid-template-columns: 1fr; }
  .ceo__plate { aspect-ratio: 3 / 2; }
}

/* --- The wall of faces ---------------------------------------------------
   The roster used to be a list of rows. It is now the same tile the projects
   page is built from, at a quarter of the size: the portrait is drained, the
   name sits on its floor, and the responsibility and the line under it open
   on contact.

   Behind a hover query, for the same reason the projects wall is: a phone
   has no hover, so there the portraits arrive in colour with the role and
   the line already showing.                                              */

.people {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: clamp(8px, 1vw, 16px);
}

.person {
  position: relative;
  overflow: hidden;
  background: var(--ink-lift);
  aspect-ratio: 3 / 4;
}

.person__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform var(--t-enter) var(--ease), filter 520ms var(--ease);
}

.person:hover .person__media { transform: scale(1.04); }

.person__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(1, 1, 1, 0.94) 0%,
    rgba(1, 1, 1, 0.72) 24%,
    rgba(1, 1, 1, 0.38) 46%,
    rgba(1, 1, 1, 0.12) 68%,
    rgba(1, 1, 1, 0) 88%
  );
}

.person__body {
  position: absolute;
  z-index: 2;
  inset-block-end: clamp(0.75rem, 1.4vw, 1.1rem);
  inset-inline: clamp(0.75rem, 1.2vw, 1.1rem);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.person__name {
  font-family: 'Lahzeh', sans-serif;
  font-weight: 500;
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.3;
}

.person__desc {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--t-hover) var(--ease-hover),
              opacity var(--t-hover) var(--ease-hover);
}

.person__desc > * { overflow: hidden; }

.person__desc-inner {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  padding-block-start: 0.4em;
}

.person__role { color: var(--brand); }

@media (hover: hover) {
  .person__media { filter: saturate(0); }
  .person:hover .person__media { filter: saturate(1); }

  .person__desc { grid-template-rows: 0fr; opacity: 0; }
  .person:hover .person__desc,
  .person:focus-within .person__desc { grid-template-rows: 1fr; opacity: 1; }
}

/* A person with no portrait yet. The tile keeps its place and proportion as
   a blank mounted sheet, and since there is no picture to reveal anything
   under, the role is showing from the start. */
.person--blank .person__desc { grid-template-rows: 1fr; opacity: 1; }

.ceo__edu {
  margin-block-start: var(--sp-tight);
  padding-block-start: var(--sp-step);
  border-block-start: 1px solid var(--hair-soft);
  width: 100%;
}

/* --- The roster ----------------------------------------------------------
   One person per row, on a hairline. Responsibility on the leading edge,
   name on the trailing edge, and the whole row lights on hover — the same
   reveal the collage uses, applied to text.                               */

.roster {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--hair-soft);
}

.roster__person {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-tight) var(--sp-band);
  padding-block: clamp(1rem, 1.8vw, 1.6rem);
  border-block-end: 1px solid var(--hair-soft);
  transition: border-color var(--t) var(--ease);
}

.roster__person:hover { border-block-end-color: var(--paper); }

.roster__role {
  font-weight: 400;
  font-size: var(--fs-key);
  color: var(--muted);
  transition: color var(--t) var(--ease);
}

.roster__person:hover .roster__role { color: var(--brand); }

.roster__name {
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
}

/* --- Contact: the glass panel -------------------------------------------- */

.contact-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

/* An accordion row. Closed, it is a heading on a hairline; open, it lifts
   onto a ground of its own so the block reads as one object. */
.fold {
  border-block-end: 1px solid var(--hair-soft);
}

.fold:last-child { border-block-end: 0; }

.fold__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-step);
  padding: clamp(1rem, 1.8vw, 1.5rem) var(--gut-in);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: start;
  transition: background-color var(--t) var(--ease);
}

.fold__head:hover { background: rgba(0, 0, 0, 0.3); }
.fold[data-open='true'] .fold__head { background: rgba(0, 0, 0, 0.45); }

.fold__title { font-family: 'Lahzeh', sans-serif; font-weight: 500; font-size: var(--fs-h3); }

.fold__sign {
  flex: none;
  width: 14px;
  height: 14px;
  position: relative;
}

.fold__sign::before,
.fold__sign::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--t) var(--ease);
}

.fold__sign::after { transform: rotate(90deg); }
.fold[data-open='true'] .fold__sign::after { transform: rotate(0deg); }

.fold__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease);
  background: rgba(0, 0, 0, 0.45);
}

.fold[data-open='true'] .fold__panel { grid-template-rows: 1fr; }

.fold__inner {
  overflow: hidden;
  padding-inline: var(--gut-in);
}

.fold[data-open='true'] .fold__inner { padding-block-end: clamp(1.25rem, 2.4vw, 2rem); }

.fold__rows {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  align-items: flex-start;
}

.fold__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em 1.25em;
}

.fold__row dt { color: var(--muted); font-weight: 500; font-size: var(--fs-key); min-width: 9rem; }
.fold__row dd { margin: 0; font-weight: 400; font-size: var(--fs-key); }

/* --- Contact: headquarters and the call ---------------------------------- */

.hq {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  justify-content: space-between;
  align-items: flex-end;
  padding-inline: var(--gut-in);
}

.hq__block {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  flex: 1 1 20rem;
}

.hq__lines {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: flex-start;
  padding-inline-start: clamp(0.9rem, 1.4vw, 1.25rem);
  border-inline-start: 1px solid var(--hair);
  font-weight: 400;
  font-size: var(--fs-key);
}

.hq__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-step);
  align-items: stretch;
}

/* --- Contact: the locator ------------------------------------------------- */

.locator {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-band) clamp(1rem, 2vw, 2rem);
  align-content: center;
  width: 100%;
}

.locator__head   { grid-column: 1 / 6; display: flex; flex-direction: column; gap: var(--sp-step); align-items: flex-start; }
.locator__plate  { grid-column: 6 / 13; align-self: center; }
.locator__legend { grid-column: 1 / 13; }

.locator__plate svg { width: 100%; height: auto; display: block; }

.locator__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-step) clamp(1.5rem, 4vw, 4rem);
  margin: 0;
  padding: var(--sp-step) 0 0;
  border-block-start: 1px solid var(--hair-soft);
  list-style: none;
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-key);
}

.dr-poche-label { fill: var(--ink); font-weight: 400; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1023px) {
  .locator__head, .locator__plate, .locator__legend { grid-column: 1 / 13; }
  .locator__plate { overflow-x: auto; }
  .locator__plate svg { min-width: 680px; }
}

@media (max-width: 859px) {
  .pair { grid-template-columns: 1fr; }
  .stair__step { display: none; }
  .stair__row::after { inset-inline-start: 0; }
  .stair__meta { text-align: start; }
  .mast__title::after { display: none; }
  .hq { padding-inline: 0; }
  .fold__head, .fold__inner { padding-inline: clamp(1rem, 4vw, 1.75rem); }
}

/* The page's two outbound links — the route and the office walkthrough —
   side by side. Neither makes a request until it is clicked, so the site's
   no-third-party rule is intact. */
.locator__route {
  grid-column: 1 / 13;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-self: flex-start;
  margin-block-start: var(--sp-step);
}
/* project.css sizes the button glyphs; this page does not load it. */
.locator__route .btn__icon       { width: 1.2em; height: 1.2em; flex: none; }
.locator__route .btn__icon--tour { width: 1.45em; height: 1.45em; }

/* --- After-construction services ----------------------------------------
   Five rows on hairlines: the numeral on the leading edge, the service
   beside it, the line that explains it on the trailing side. The rule under
   a row is the site's one hover gesture, the bar growing from the leading
   edge — carried by `transform`, so nothing reflows.                      */

.svc {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--hair-soft);
}

.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 7fr);
  align-items: baseline;
  gap: var(--sp-tight) var(--sp-band);
  padding-block: clamp(1.25rem, 2.4vw, 2.25rem);
  border-block-end: 1px solid var(--hair-soft);
}

.svc__row::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 2px;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-hover) var(--ease-hover);
}

.svc__row:hover::after { transform: scaleX(1); }

.svc__desc { color: var(--muted); }

@media (max-width: 859px) {
  .svc__row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .svc__desc { grid-column: 2; }
}

/* The three steps of a request, side by side on a hairline each — the same
   cell the vision-and-mission pair uses. */
.steps {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}

.steps__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-tight);
  padding-inline-start: clamp(1rem, 2vw, 2rem);
  border-inline-start: 1px solid var(--hair-soft);
}

.steps__cell .body-text { color: var(--muted); text-align: start; }

@media (max-width: 859px) {
  .steps { grid-template-columns: 1fr; }
}

.svc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-tight);
}


/* ===== Client revision 2026-10: softer mastheads, tighter service table ===== */
.mast--soft .mast__wash {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.76) 0%,
    rgba(10, 10, 10, 0.54) 45%,
    rgba(10, 10, 10, 0.86) 100%
  );
}
#services .say { padding-block: 0 clamp(1rem, 2vw, 1.5rem); }
#services { padding-block-start: clamp(2.2rem, 4vw, 3.5rem); }

/* About-page record cards: quiet monochrome architecture revealed on hover. */
.stat { position: relative; overflow: hidden; isolation: isolate; }
.stat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  transform: scale(1.04);
  background-position: center;
  background-size: cover;
  filter: grayscale(1) blur(5px) contrast(0.82);
  transition: opacity 520ms var(--ease), transform 900ms var(--ease);
}
.stat::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10,10,10,.58);
  opacity: 0;
  transition: opacity 520ms var(--ease);
}
.stat:hover::before { opacity: .38; transform: scale(1.01); }
.stat:hover::after { opacity: 1; }
.stat:nth-child(1)::before { background-image: url('../img/home/hero-detail.webp'); }
.stat:nth-child(2)::before { background-image: url('../img/home/hero-roshana.webp'); }
.stat:nth-child(3)::before { background-image: url('../img/home/hero-nora.webp'); }
.stat:nth-child(4)::before { background-image: url('../img/home/hero-mahsan.webp'); }
.stat::before { z-index: 0; }
.stat::after { z-index: 1; }
.stat > * { position: relative; z-index: 2; }