/* ==========================================================================
   SEC 2026 — Homepage sections
   Hero · intro + credentials · services · projects · process · clients ·
   quotation band · map
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  height: clamp(460px, 64vh, 660px);
  background: var(--sec-black);
  isolation: isolate;
  overflow: hidden;   /* the slow ken-burns scale must not widen the page */
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease);
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 9s linear;
}
.hero__slide.is-active .hero__media img { transform: scale(1); }

.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-hero);
}
.hero__slide[data-theme="light"]::before { background: var(--scrim-hero-light); }

.hero__content {
  width: 100%;
  max-width: var(--container);
  color: var(--sec-white);
}
.hero__slide[data-theme="light"] .hero__content { color: var(--sec-black); }

.hero__inner { max-width: 44ch; }

.hero__eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.hero__title {
  margin: 0 0 var(--space-4);
  font-size: var(--step-5);
  line-height: 1.05;
  text-transform: uppercase;
}

.hero__text {
  margin: 0 0 var(--space-6);
  font-size: var(--step-1);
  font-weight: var(--fw-light);
  max-width: 48ch;
}

/* --- Labelled progress dots (the reference's signature control) ----------- */
.hero-nav { background: var(--color-panel); border-top: 1px solid var(--color-line-invert); }

.hero-nav__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-dot {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-3) var(--space-5);
  border: 0;
  background: none;
  color: var(--sec-gray);
  text-align: start;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.hero-dot:hover { color: var(--sec-white); }
.hero-dot[aria-selected="true"] { color: var(--sec-white); }

.hero-dot__bar {
  display: block;
  height: 2px;
  margin-bottom: var(--space-3);
  background: var(--color-line-invert);
  overflow: hidden;
}
.hero-dot__bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--sec-white);
  transform: scaleX(0);
  transform-origin: left center;
}
[dir="rtl"] .hero-dot__bar i { transform-origin: right center; }

.hero-dot[aria-selected="true"] .hero-dot__bar i {
  animation: hero-progress var(--hero-interval) linear forwards;
}
.hero[data-paused="true"] .hero-dot[aria-selected="true"] .hero-dot__bar i {
  animation-play-state: paused;
}
.hero[data-autoplay="false"] .hero-dot[aria-selected="true"] .hero-dot__bar i {
  animation: none;
  transform: scaleX(1);
}

@keyframes hero-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.hero-dot__label {
  display: block;
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: var(--lh-snug);
}

@media (max-width: 799.98px) {
  .hero-nav__list { grid-auto-flow: row; grid-auto-columns: auto; }
  .hero-dot { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
  .hero-dot__bar { width: 34px; flex: none; margin: 0; }
}

/* ==========================================================================
   INTRO + CREDENTIALS
   ========================================================================== */
.intro__grid {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 1000px) {
  .intro__grid { grid-template-columns: 1.35fr 1fr; gap: var(--space-10); }
}

.intro__statement {
  margin: 0 0 var(--space-6);
  font-size: var(--step-4);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.intro__body { color: var(--color-muted); max-width: 62ch; }

.credentials {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
@media (min-width: 520px) { .credentials { grid-template-columns: repeat(2, 1fr); } }

.credential {
  padding: var(--space-5);
  background: var(--color-bg);
}
.credential__value {
  display: block;
  font-size: var(--step-4);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
}
.credential__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-muted);
}

/* ==========================================================================
   SERVICE TILES — the reference's 50/25/25 + trio rhythm
   ========================================================================== */
.tile-row {
  display: grid;
  gap: 2px;
}
.tile-row + .tile-row { margin-top: 2px; }

.tile-row--lead { grid-template-columns: 1fr; }
.tile-row--trio { grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .tile-row--lead { grid-template-columns: repeat(2, 1fr); }
  .tile-row--trio { grid-template-columns: repeat(2, 1fr); }
  .tile-row--lead .tile:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .tile-row--lead { grid-template-columns: 2fr 1fr 1fr; }
  .tile-row--trio { grid-template-columns: repeat(3, 1fr); }
  .tile-row--lead .tile:first-child { grid-column: auto; }
}

.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--row-h-sm);
  padding: var(--space-5);
  overflow: hidden;
  isolation: isolate;
  color: var(--sec-white);
  text-decoration: none;
  background: var(--sec-black);
}
@media (min-width: 700px) {
  .tile-row--lead .tile { min-height: var(--row-h-md); }
  .tile-row--trio .tile { min-height: var(--row-h-md); }
}
@media (min-width: 1000px) {
  .tile-row--lead .tile { min-height: var(--row-h-lg); }
}

.tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-tile);
  transition: background var(--dur) var(--ease);
}
.tile:hover::after,
.tile:focus-visible::after { background: var(--scrim-tile-hover); }
.tile:hover .tile__media img { transform: scale(1.05); }

.tile__body { display: block; position: relative; }
.tile__category {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.tile__title {
  margin: 0;
  font-size: var(--step-2);
  text-transform: uppercase;
  line-height: var(--lh-snug);
}
.tile__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--step--1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover .tile__more,
.tile:focus-visible .tile__more { opacity: 1; transform: none; }
@media (hover: none) { .tile__more { opacity: 1; transform: none; } }

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.projects__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .projects__grid { grid-template-columns: repeat(4, 1fr); } }

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  padding: var(--space-5);
  overflow: hidden;
  isolation: isolate;
  color: var(--sec-white);
  text-decoration: none;
  background: var(--sec-black);
}
.project-card__media { position: absolute; inset: 0; z-index: -2; }
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-project);
  transition: background var(--dur) var(--ease);
}
.project-card:hover::after { background: rgba(0, 0, 0, 0.55); }
.project-card:hover .project-card__media img { transform: scale(1.05); }

.project-card__type {
  margin-bottom: var(--space-2);
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--sec-gray);
}
.project-card__title {
  margin: 0;
  font-size: var(--step-1);
  text-transform: uppercase;
  line-height: var(--lh-snug);
}
.project-card__arrow {
  margin-top: var(--space-4);
  width: 30px;
  height: 30px;
  transition: transform var(--dur) var(--ease);
}
.project-card:hover .project-card__arrow { transform: translateX(5px); }
[dir="rtl"] .project-card:hover .project-card__arrow { transform: translateX(-5px); }

.projects__footer { margin-top: var(--space-8); display: flex; justify-content: center; }

/* ==========================================================================
   PROCESS — "How we do it"
   ========================================================================== */
.process { position: relative; isolation: isolate; overflow: hidden; }
.process__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
}

.process__grid {
  display: grid;
  gap: 1px;
  background: var(--color-line-invert);
  border: 1px solid var(--color-line-invert);
}
@media (min-width: 620px) { .process__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .process__grid { grid-template-columns: repeat(4, 1fr); } }

.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  background: var(--color-panel);
  transition: background var(--dur) var(--ease);
}
.process-step:hover { background: var(--color-panel-2); }
.process-step__num {
  font-size: var(--step-3);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--sec-gray);
  font-variant-numeric: tabular-nums;
}
.process-step__text {
  margin: 0;
  font-size: var(--step-0);
  font-weight: var(--fw-light);
  color: var(--color-muted-invert);
}

/* ==========================================================================
   CLIENTS / PARTNERS
   ========================================================================== */
.logo-grid {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  /*
   * minmax(0, 1fr), not 1fr. A bare 1fr is minmax(auto, 1fr), and that auto
   * floor is the emblem's own width attribute - so the track refuses to shrink
   * below it and the grid pushes past the viewport. At 320px (iPhone SE and
   * older small Androids) that overflowed the page by 29px.
   */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) { .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .logo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.logo-grid__item {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  padding: var(--space-4);
  background: var(--color-bg);
}

/* The bundled emblems carry their display size in their width/height attributes
   and are already normalised to a common optical area, so the browser should use
   those dimensions as-is. Declaring width/height here would override the
   attributes and send every emblem back to its full intrinsic size, so the rule
   only caps: max-width keeps it inside the cell, max-height guards against a
   large logo uploaded through the Clients post type later. */
.logo-grid__item img {
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
  filter: var(--logo-filter);
  opacity: 0.75;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.logo-grid__item:hover img { filter: var(--logo-filter-hover); opacity: 1; }

/* Fallback for a client with no emblem on file. */
.logo-grid__item span {
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-muted);
  line-height: var(--lh-snug);
}

/* ==========================================================================
   QUOTATION BAND
   ========================================================================== */
.quote-band {
  display: grid;
  background: var(--color-panel);
  color: var(--sec-white);
}
@media (min-width: 900px) { .quote-band { grid-template-columns: 1fr 1fr; } }

.quote-band__media { position: relative; min-height: 280px; }
.quote-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.quote-band__body {
  padding: var(--section-y) max(var(--gutter-min), 7%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quote-band__title {
  margin: 0 0 var(--space-4);
  font-size: var(--step-4);
  text-transform: uppercase;
}
.quote-band__intro { color: var(--color-muted-invert); margin-bottom: var(--space-6); max-width: 48ch; }

/* Form — styles both the native fallback and Contact Form 7 output */
.sec-form { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .sec-form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }

.sec-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--step--2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--sec-gray);
}
.sec-form input[type="text"],
.sec-form input[type="email"],
.sec-form input[type="tel"],
.sec-form select,
.sec-form textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid var(--color-line-invert);
  color: var(--sec-white);
  font-size: var(--step-0);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sec-form input::placeholder,
.sec-form textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.sec-form input:focus,
.sec-form select:focus,
.sec-form textarea:focus {
  outline: none;
  border-color: var(--sec-white);
  background: rgba(255, 255, 255, 0.05);
}
.sec-form textarea { min-height: 120px; resize: vertical; }
.sec-form select option { color: var(--sec-black); }

.sec-form__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.sec-form__note { font-size: var(--step--2); color: var(--sec-gray); }

/* Honeypot for the native fallback form */
/*
 * Spam honeypot. It must stay in the layout for bots but never be seen.
 *
 * The usual `left: -9999px` is NOT safe here: in a right-to-left document the
 * inline start is the right edge, so a far-negative left DOES extend the
 * scrollable area — it gave every Arabic page an 11,000px horizontal scrollbar.
 * Clipping hides it without affecting scroll width in either direction.
 */
.sec-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.form-message { padding: var(--space-4); border: 1px solid var(--color-line-invert); font-size: var(--step--1); }
.form-message--ok { border-color: var(--sec-white); }

/* Contact Form 7 normalisation */
.wpcf7 form .wpcf7-response-output {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line-invert);
  font-size: var(--step--1);
}
.wpcf7-not-valid-tip { color: #ff9c9c; font-size: var(--step--2); margin-top: var(--space-1); }
.wpcf7 .wpcf7-submit { /* inherits .btn via the shortcode markup in the README */ }

/* ==========================================================================
   MAP + CONTACT DETAILS
   ========================================================================== */
.map-band { display: grid; }
@media (min-width: 900px) { .map-band { grid-template-columns: 1fr 1.6fr; } }

.map-band__info {
  padding: var(--section-y) max(var(--gutter-min), 5%);
  background: var(--color-surface);
}
.map-band__map { min-height: 340px; position: relative; background: var(--color-surface); }
.map-band__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: var(--map-filter); }

.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--color-line); }
.contact-list .icon { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--sec-gray); }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* Two switchboard numbers stack under one icon in the contact list, and stay
   left-to-right even when the page is Arabic. */
.contact-list__phones {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.contact-list__phones a {
  direction: ltr;
  unicode-bidi: isolate;
  width: fit-content;
}

/* Click-to-load map placeholder.
   Fills the same absolutely-positioned box as the iframe it is swapped for
   (see .map-band__map iframe above), so asking for the map shifts nothing. */
.map-consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
  background: var(--color-surface);
}
.map-consent__text { max-width: 38ch; font-size: var(--step--1); color: var(--color-text-muted); }
.map-consent__alt { font-size: var(--step--1); }