/* ===========================================================================
   PETRO KOVAR TADBIR — "The Quiet Corporate Register"
   Shared foundation: tokens, type, header, footer, the named components.

   The world is a near-black gallery. Photography is the only colour on the
   page; every drawn element is a hairline. Nothing is loud, everything is
   large, and the space between things is the composition. See DESIGN.md.
   =========================================================================== */

/* Two families and six files. Lahzeh sets every heading; Ravi sets
   everything a person actually reads. Both are subset to the Persian block
   plus Latin, so an email address still renders in the same family as the
   line it sits on.

   Ravi Light is gone. The body register used to be set at 300, which on a
   near-black ground reads thinner than it measures — on a bright screen the
   paragraphs simply disappeared. Prose is Regular now and the small
   registers are Medium; nothing on the site asks for 300 any more, so the
   file that served it is no longer shipped. */

@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Only the project names at slide and masthead scale reach for this. */
@font-face {
  font-family: 'Lahzeh';
  src: url('../fonts/Lahzeh-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ravi';
  src: url('../fonts/RaviFaNum-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The smallest text on the site — keys, specs, captions, the fine print —
   at Regular on a near-black ground reads thinner than it measures. This
   face is spent only there; prose stays at Regular. */
@font-face {
  font-family: 'Ravi';
  src: url('../fonts/RaviFaNum-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------

   One ground, one foreground, one secondary, one hairline, one accent.
   The accent is lifted straight out of the logo, so the site's whole colour
   budget is the company's own colour: it appears on index numerals, on the
   active state of a marker, and nowhere else. Photography supplies every
   other colour there is.                                                   */

:root {
  --ink:        #0A0A0A;   /* the ground: the whole document */
  --ink-lift:   #121212;   /* a block that must separate from the ground */
  --paper:      #FBFBFB;   /* the foreground */
  --muted:      #ABABAB;   /* secondary text — 8.6:1 on the ground */
  --brand:      #55C4BC;   /* the entire colour budget — taken from the mark */

  --hair:       rgba(251, 251, 251, 0.26);  /* card and panel borders */
  --hair-soft:  rgba(251, 251, 251, 0.13);  /* rules inside a block */

  /* Type. Four registers and nothing between them: name, heading, body, key.
     The body register is deliberately extra-light — at 200 a long Persian
     paragraph reads as engraving rather than as text, which is the single
     largest contributor to the register this page is in. */
  --fs-name:    clamp(1.5rem, 2.4vw, 2.125rem);   /* project names on slides */
  --fs-h1:      clamp(1.75rem, 3.1vw, 2.625rem);  /* one per page */
  --fs-h2:      clamp(1.375rem, 2.1vw, 2rem);
  --fs-h3:      clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body:    clamp(1rem, 1.15vw, 1.25rem);
  --fs-key:     clamp(0.8125rem, 0.95vw, 0.9375rem);
  --fs-figure:  clamp(1.5rem, 3.4vw, 3rem);       /* the numbers that matter */

  /* Layout. The page gutter is the site's signature measurement: it is
     enormous on a desktop and the reason everything feels unhurried. */
  /* Two margins, and the difference between them is the whole layout.
     `--frame` is the outer frame: the gap the page holds around every piece
     of media and every tile, so the ground reads as a mount rather than as
     the edge of the screen. `--gut` is for prose only, which wants a much
     wider margin than a photograph does. */
  --frame: clamp(0.75rem, 2vw, 2rem);
  --gut:   clamp(1.25rem, 7.2vw, 9.375rem);
  --gut-in: clamp(1rem, 3vw, 4rem);
  --hdr:   clamp(60px, 7vw, 105px);
  --seam:  16px;   /* the black gutter between full-height sections */

  --sp-hair:  4px;
  --sp-tight: 12px;
  --sp-step:  24px;
  --sp-band:  clamp(2rem, 4vw, 3.5rem);
  --sp-field: clamp(3.5rem, 8vw, 7.5rem);

  /* Two easings, two speeds. The slow one is for arrivals — a thing entering
     the page for the first time. The quick one is for hovers, where a long
     curve reads as lag rather than as grace. */
  --ease:       cubic-bezier(0.19, 1, 0.22, 1);    /* out-expo: arrivals */
  --ease-hover: cubic-bezier(0.215, 0.61, 0.355, 1); /* out-cubic: hovers */
  --t:        320ms;
  --t-hover:  500ms;
  --t-enter:  1000ms;

  /* The arrow that appears on hover, drawn once and worn as a mask so it
     takes `currentColor` wherever it lands. It points up-and-leading —
     up-LEFT, because leading is leftward on the way out of an RTL line. */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M17.5 17.5 L6.5 6.5 M6.5 6.5 h11 M6.5 6.5 v11'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--ink);
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: 'Ravi', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--paper);
  background-color: var(--ink);
  overflow-x: hidden;
}

/* The header sticks, so an anchor jump has to land clear of it. */
:target, [id] { scroll-margin-block-start: calc(var(--hdr) + var(--seam)); }

/* The UA's own `[hidden] { display: none }` sits in the user-agent origin,
   so any author rule carrying a class outranks it. Anything this site hides
   by attribute has such a rule, so the attribute is given teeth here. */
[hidden] { display: none !important; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--paper); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* An email address, or a phone number written as two Persian-numeral groups,
   is a left-to-right run sitting inside right-to-left prose. Without an
   isolate the bidi algorithm reorders it and the area code lands last. */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* --- Type registers ------------------------------------------------------ */

/* Persian is never letter-spaced: tracking inserts space inside joined
   clusters and severs the cursive connections. Air comes from word-spacing.
   This is the rule most likely to be broken by accident.

   Lahzeh sets the headings and Ravi sets the prose. Nothing is in both. */

.name {
  font-family: 'Lahzeh', sans-serif;
  font-weight: 900;
  font-size: var(--fs-name);
  line-height: 1.25;
  margin: 0;
}

.h1 {
  font-family: 'Lahzeh', sans-serif;
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.35;
  margin: 0;
  text-wrap: balance;
}

.h2 {
  font-family: 'Lahzeh', sans-serif;
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}

.h3 {
  font-family: 'Lahzeh', sans-serif;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.5;
  margin: 0;
}

/* The engraved register. Justified, because a justified Persian paragraph
   with even word-spacing is what a printed prospectus looks like. */
.body-text {
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.95;
  text-align: justify;
  text-justify: inter-word;
  margin: 0;
}

.key {
  font-weight: 500;
  font-size: var(--fs-key);
  line-height: 1.75;
  word-spacing: 0.16em;
  margin: 0;
}

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

.figure-num {
  font-weight: 400;
  font-size: var(--fs-figure);
  line-height: 1.1;
  display: block;
}

/* The index numeral. The one place the metal is allowed to speak. */
.index {
  font-weight: 500;
  font-size: var(--fs-key);
  color: var(--brand);
  word-spacing: 0.16em;
  display: block;
}

/* --- The header ----------------------------------------------------------
   A band of ground that sits above the media rather than floating over it.
   It is sticky, so it holds the top of the window on the way down — but it
   occupies its own strip of layout, which is what lets the first media below
   it read as something mounted inside a frame instead of something bleeding
   off the top of the screen.                                               */

.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  height: var(--hdr);
  padding-inline: var(--frame);
  display: flex;
  align-items: center;
  gap: var(--sp-band);
  background-color: var(--ink);
}

/* The mark. It carries the name, so nothing is set beside it. The file is
   the company's own two-colour logo with the charcoal half remapped to paper
   — the original is unreadable on this ground, and the teal is left exactly
   as drawn because it is where the site's accent comes from. */
.mark {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: clamp(30px, 3.4vw, 48px);
  transition: opacity var(--t) var(--ease);
}

.mark:hover { opacity: 0.78; }

.mark img {
  height: 100%;
  width: auto;
  /* 308 × 177, trimmed to the ink. */
  aspect-ratio: 308 / 177;
  object-fit: contain;
}

.site-nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 3.25rem);
}

.site-nav__link {
  position: relative;
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
  padding-block: 0.35em;
  color: var(--paper);
}

/* The sliding rule. It grows from the leading edge — the right, in RTL —
   which is the site's one universal hover gesture: the same 2px bar appears
   under every link on every surface. */
.site-nav__link::after,
.rule-link::after,
.u-link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 100%;
  inset-inline-end: 0;
  height: 2px;
  background: currentColor;
  transition: inset-inline-start var(--t) var(--ease);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current='page']::after,
.rule-link:hover::after,
.u-link:hover::after { inset-inline-start: 0; }

.site-nav__link[aria-current='page'] { font-weight: 400; }
.site-nav__link[aria-current='page']::after { background: var(--brand); }

.site-head__burger {
  display: none;
  margin-inline-start: auto;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  line-height: 0;
}

.site-head__burger svg { width: 24px; height: 24px; }

/* --- The drawer (below 860px) -------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-step);
  padding: var(--gut);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t);
}

.drawer[data-open='true'] { opacity: 1; visibility: visible; }

.drawer__link {
  font-weight: 400;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  padding-block: 0.25em;
  border-block-end: 1px solid var(--hair-soft);
}

.drawer__link[aria-current='page'] { color: var(--brand); }

.drawer__close {
  position: absolute;
  inset-block-start: calc(var(--hdr) / 2 - 22px);  /* on the header's own centre line */
  inset-inline-end: var(--gut);
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  line-height: 0;
}

.drawer__close svg { width: 24px; height: 24px; }

/* --- The page shell ------------------------------------------------------
   A stack of full-height sections separated by a seam of pure ground. The
   seam is what makes each section read as its own plate.                   */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--seam);
}

.band {
  position: relative;
  padding-inline: var(--gut);
}

.band--full {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.band--top { padding-block-start: var(--sp-field); }
.band--pad { padding-block: var(--sp-field); }

/* --- The read-more rule --------------------------------------------------
   A hairline across the full measure with the link tucked under its far
   end. It is the site's paragraph terminator: every block of prose ends
   this way, and the eye learns to look there for the way onward.          */

.rule {
  width: 100%;
  border-block-start: 1px solid var(--muted);
  padding-block-start: var(--sp-hair);
  display: flex;
}

.rule--end { justify-content: flex-end; }

.rule-link {
  position: relative;
  width: fit-content;
  white-space: nowrap;
  font-weight: 400;
  font-size: var(--fs-key);
  color: var(--muted);
  transition: color var(--t) var(--ease);
}

.rule-link:hover { color: var(--paper); }

/* A link inside running prose. Same gesture, no rule above it. */
.u-link {
  position: relative;
  width: fit-content;
  display: inline-block;
  white-space: nowrap;
}

/* --- A statement block ---------------------------------------------------
   Heading, one justified paragraph, and the hairline that ends it with the
   way onward tucked under its far end. The whole site is built out of this
   one shape, so it lives here rather than on any one page.                */

.say {
  padding: clamp(2.5rem, 7vw, 8rem) var(--gut);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.say__body { width: 100%; }

/* Inside a .band, the gutter is already paid for by the band. */
.say--flush { padding-inline: 0; }

/* --- The tile -----------------------------------------------------------
   The unit the whole site is now built from: a piece of media in a box, a
   gap around it, a title on its floor, and nothing drawn round the edge. A
   tile is defined by where its picture stops, not by a border.

   Resting, it shows a title. On hover the description opens under it and an
   arrow arrives in the far corner — the description's row goes 0fr → 1fr
   rather than 0 → auto height, so nothing is animating layout.            */

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-lift);
  aspect-ratio: var(--tile-ratio, 1);
}

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

.tile:hover .tile__media { transform: scale(1.03); }

/* Drained until touched, the same gesture the collage on the homepage
   makes — the wall reads as one grey field, and the building the cursor is
   on is the only one with colour in it.

   Behind a hover query on purpose. A touch screen has no hover to give, so
   on a phone this rule never applies and the photographs arrive in colour;
   without the query the projects page would be a grey wall with no way to
   reveal it. */
@media (hover: hover) {
  .tile__media { filter: saturate(0); }

  .tile:hover .tile__media,
  .tile:focus-visible .tile__media { filter: saturate(1); }
}

/* Anduril's ramp, and the reason it works: multiply keeps the photograph's
   own colour where the gradient is thin instead of greying it out the way a
   flat black scrim does.

   Two gradients, not one. The heavy one is the floor the title stands on.
   The light one is a hand's breadth at the top, and it exists only so the
   state tag stays readable when a building is shot against a bright sky —
   which, on this site's photography, is most of them. */
.tile__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.7;
  background:
    linear-gradient(to bottom,
      rgba(1, 1, 1, 0.55) 0%,
      rgba(1, 1, 1, 0.28) 6%,
      rgba(1, 1, 1, 0.08) 13%,
      rgba(1, 1, 1, 0) 22%),
    linear-gradient(
    to top,
    #010101 0%,
    rgba(1, 1, 1, 0.737) 19%,
    rgba(1, 1, 1, 0.54) 34%,
    rgba(1, 1, 1, 0.38) 47%,
    rgba(1, 1, 1, 0.28) 56.5%,
    rgba(1, 1, 1, 0.192) 65%,
    rgba(1, 1, 1, 0.125) 73%,
    rgba(1, 1, 1, 0.075) 80.2%,
    rgba(1, 1, 1, 0.043) 86.1%,
    rgba(1, 1, 1, 0.02) 91%,
    rgba(1, 1, 1, 0.008) 95.2%,
    rgba(1, 1, 1, 0.004) 98.2%,
    rgba(1, 1, 1, 0) 100%
  );
}

.tile__body {
  position: absolute;
  z-index: 2;
  inset-block-end: clamp(1rem, 2vw, 1.75rem);
  inset-inline: clamp(1rem, 1.6vw, 1.5rem);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The heading step, not a step of its own. A tile title is a heading for a
   box, and the ramp already had the size for that — the bespoke value it
   used to carry was drift, not a decision. */
.tile__title {
  font-family: 'Lahzeh', sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.25;
}

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

.tile__desc > * { overflow: hidden; }

.tile:hover .tile__desc,
.tile:focus-visible .tile__desc { grid-template-rows: 1fr; opacity: 1; }

.tile__desc-inner {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding-block-start: 0.5em;
  color: var(--paper);
}

/* The tag is the one thing that does not wait for a hover: whether a
   building is finished is the first thing a visitor wants to know. */
.tile__tag {
  position: absolute;
  z-index: 2;
  inset-block-start: clamp(0.85rem, 1.4vw, 1.25rem);
  inset-inline-start: clamp(1rem, 1.6vw, 1.5rem);
}

.tile__arrow {
  position: absolute;
  z-index: 2;
  inset-block-end: clamp(1.15rem, 2.1vw, 1.9rem);
  inset-inline-end: clamp(1rem, 1.6vw, 1.5rem);
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  opacity: 0;
  transform: translate(0.4em, 0.4em);
  transition: opacity var(--t-hover) var(--ease-hover),
              transform var(--t-hover) var(--ease-hover);
}

.tile:hover .tile__arrow,
.tile:focus-visible .tile__arrow { opacity: 1; transform: none; }

/* A building with no photograph yet. It gets a mounted sheet rather than
   somebody else's facade. */
.tile--drawn {
  background:
    repeating-linear-gradient(45deg,
      transparent 0 11px, var(--hair-soft) 11px 12px);
}

.tile--drawn .tile__wash { display: none; }

/* --- The button ----------------------------------------------------------
   Outline that fills on hover. There is one button style on the site.     */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.75em 2.25em;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-weight: 400;
  font-size: var(--fs-key);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.btn:hover { background: var(--paper); color: var(--ink); }

/* --- The catalogue -------------------------------------------------------
   One action, in one place: the header, where it is the only bordered thing
   in the nav — which is what separates an action from the four places you
   can go. Below 860px the nav is a drawer, so it goes there instead and
   takes the full measure it is given. Both share the arrow-down glyph. */

.cta__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 1.15em;
  border: 1px solid var(--hair);
  color: var(--paper);
  font-weight: 500;
  font-size: clamp(0.875rem, 1vw, 1rem);
  white-space: nowrap;
  transition: background-color var(--t) var(--ease),
              color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}

.site-nav__cta:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.drawer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-block-start: clamp(1.25rem, 3vw, 2rem);
  padding: 0.7em 1.6em;
  border: 1px solid var(--paper);
  color: var(--paper);
  font-weight: 500;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.drawer__cta:hover { background: var(--paper); color: var(--ink); }

/* The arrow's slot is always reserved — it fades and slides into a space
   that was already there, so a hover never reflows the line it sits on.
   `.rule-link` is deliberately not here: its ::after is already the sliding
   underline every link on the site shares, and a link is not a button. */
.btn::after {
  content: '';
  flex: none;
  width: 0.85em;
  height: 0.85em;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  opacity: 0;
  transform: translate(0.35em, 0.35em);
  transition: opacity var(--t-hover) var(--ease-hover),
              transform var(--t-hover) var(--ease-hover);
}

.btn:hover::after { opacity: 1; transform: none; }

/* --- The glass panel -----------------------------------------------------
   Used exactly once per page that has one: over a full-bleed photograph,
   holding the page's one block of dense information.                      */

.glass {
  border: 1px solid var(--hair);
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-block: var(--sp-band);
}

/* --- Definition rows -----------------------------------------------------
   Label and value separate by weight and by size, never by opacity.       */

.spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-tight) var(--sp-band);
  align-content: start;
  margin: 0;
}

.spec dt { font-weight: 500; color: var(--muted); font-size: var(--fs-key); }
.spec dd { margin: 0; font-weight: 500; font-size: var(--fs-key); }

/* --- Drawings ------------------------------------------------------------
   Drafting weights, shared by every drawn surface. The cut line is the
   heaviest thing on the sheet, following architectural convention.        */

.dr-line   { fill: none; stroke: currentColor; stroke-width: 1; }
.dr-cut    { fill: none; stroke: currentColor; stroke-width: 1.6; }
.dr-hair   { fill: none; stroke: currentColor; stroke-width: 0.5; opacity: 0.5; }
.dr-dash   { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 7 5; opacity: 0.7; }
.dr-fill   { fill: currentColor; }
.dr-label  { fill: currentColor; font-size: 13px; font-weight: 500; word-spacing: 0.16em; }

/* --- The footer ----------------------------------------------------------
   Chrome, not a section. The photograph that used to sit behind it made it
   read as one more panel of the page; flat ground makes it read as the end
   of the document, which is what a footer is for.

   The mark sits on the leading edge, the link columns on the trailing side,
   and a fine-print rule closes it.                                        */

.site-foot {
  margin-block-start: var(--seam);
  padding: clamp(3rem, 6vw, 5.5rem) var(--frame) clamp(1.75rem, 3vw, 2.5rem);
  border-block-start: 1px solid var(--hair-soft);
}

.site-foot__top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 2rem);
  align-items: start;
}

.site-foot__id {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.site-foot__mark {
  display: inline-flex;
  height: clamp(34px, 3.6vw, 52px);
  transition: opacity var(--t) var(--ease);
}

/* Where the company registers itself. The fine-print treatment, but under
   the mark rather than in the fine print — same size and colour as the
   copyright line it used to sit beside. */
.site-foot__id-lines {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  color: var(--muted);
  font-weight: 500;
  font-size: var(--fs-key);
  line-height: 1.6;
}

.site-foot__id-lines p { margin: 0; text-wrap: pretty; }

/* The engineering-council number is one token read left to right; it does
   not wrap, whatever the column does. */
.site-foot__id-lines .ltr { white-space: nowrap; }

.site-foot__mark:hover { opacity: 0.78; }

.site-foot__mark img {
  height: 100%;
  width: auto;
  aspect-ratio: 308 / 177;
  object-fit: contain;
}

.foot-col { grid-column: span 12; }

@media (min-width: 720px) {
  .site-foot__id { grid-column: span 3; }
  .foot-col        { grid-column: span 3; }
  /* The mark takes three columns and the three lists take nine. Written as
     one shorthand: `grid-column: span 3` sets the *start* to `span 3` and
     leaves the end auto, so a later `grid-column-start` would leave the
     column one track wide. */
  .foot-col:first-of-type { grid-column: 4 / span 3; }
}

.foot-col__title {
  color: var(--muted);
  font-weight: 500;
  font-size: var(--fs-key);
  word-spacing: 0.16em;
  margin: 0 0 clamp(1.25rem, 2.4vw, 2rem);
}

/* `__links` is only ever the box that opens and closes; `__wrap` is the
   column of links itself. Keeping them separate is what lets the fold
   animate a grid row instead of a height. */
.foot-col__wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55em;
}

/* The floor of the page: one line, the copyright. The phone and the email
   are in the دفتر مرکزی column above and were the same two links twice. */
.site-foot__bottom {
  margin-block-start: clamp(3rem, 6vw, 5rem);
  padding-block-start: clamp(1.25rem, 2.4vw, 2rem);
  border-block-start: 1px solid var(--hair-soft);
}

.site-foot__fine {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35em;
  color: var(--muted);
  font-weight: 500;
  font-size: var(--fs-key);
  line-height: 1.6;
}

.site-foot__fine p { margin: 0; }

/* On a phone a column of four links each is a lot of scroll for chrome, so
   the lists fold. The mechanic is the contact page's, reused whole. */
.foot-col__head {
  display: none;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: start;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-step);
}

@media (max-width: 719px) {
  .foot-col { border-block-end: 1px solid var(--hair-soft); padding-block-end: 1rem; }
  .foot-col__head { display: flex; }
  .foot-col__head .foot-col__title { margin: 0; }
  .foot-col > .foot-col__title { display: none; }
  .foot-col__links {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t) var(--ease-hover);
  }
  .foot-col__links > * { overflow: hidden; }
  .foot-col[data-open='true'] .foot-col__links { grid-template-rows: 1fr; }
  .foot-col__wrap { padding-block-start: 1rem; }
}

.foot-sign {
  flex: none;
  width: 12px;
  height: 12px;
  position: relative;
}

.foot-sign::before,
.foot-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-hover);
}

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

/* --- The reveal ----------------------------------------------------------
   One motion, used everywhere: content rises a hair and fades in as its
   section arrives. Anything more would be a different kind of company.    */

.rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.rise.is-in { opacity: 1; transform: none; }

.rise:nth-child(2) { transition-delay: 90ms; }
.rise:nth-child(3) { transition-delay: 180ms; }
.rise:nth-child(4) { transition-delay: 270ms; }

/* --- Scroll cue ----------------------------------------------------------- */

.cue {
  position: absolute;
  z-index: 12;
  inset-block-end: clamp(1rem, 2.4vh, 2rem);
  inset-inline-end: clamp(1rem, 1.6vw, 1.5rem);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--paper);
  opacity: 0.7;
  transition: opacity var(--t-hover) var(--ease-hover),
              transform var(--t-hover) var(--ease-hover);
}

.cue:hover { opacity: 1; transform: translateY(4px); }
.cue svg { width: 30px; height: 30px; }

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

@media (max-width: 859px) {
  .site-nav { display: none; }
  .site-head__burger { display: block; }
  .frame__media { width: 86%; }
  .foot-row { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}


/* ===== Client revision 2026-10: navigation, buttons, footer ===== */
.site-nav { margin-inline-start: 0; }
.mark img { transition: opacity var(--t) var(--ease), filter var(--t) var(--ease); }
.mark:hover img { content: url('../img/logo-mark-color.webp'); opacity: 1; }

.btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
}
.site-nav__cta:hover,
.drawer__cta:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
}
.site-foot .u-link { transition: color var(--t) var(--ease); }
.site-foot .u-link:hover { color: var(--brand); }
.site-foot__mark:hover { opacity: 1; }
.site-foot__mark img { transition: filter var(--t) var(--ease); }
.site-foot__mark:hover img { filter: brightness(0.72); }


/* Project wall: gently coloured at rest, richer on hover. */
@media (hover: hover) {
  .wall .tile__media { filter: saturate(0.58) contrast(1.015); }
  .wall .tile:hover .tile__media,
  .wall .tile:focus-visible .tile__media { filter: saturate(1.08) contrast(1.02); }
}
/* Robust two-image hover for the header mark. */
.mark { position: relative; }
.mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/logo-mark-color.webp') center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.mark:hover::after { opacity: 1; }
.mark:hover img { opacity: 0; content: normal; }
/* Keep the header logo fully opaque while the colour mark fades in. */
.mark:hover { opacity: 1; }