/* ==========================================================================
   High Concept Egypt — the "cut sheet" layer (2026-09-02)
   Loaded last, after brand.css. It owns the site shell (header, footer, the
   inner-page title band) and the homepage. One accent (oxide red), flat
   surfaces on mineral grey, hairline rules, the photographs do the talking.
   Logical properties throughout, so /ar/ (dir="rtl") needs no overrides.
   ========================================================================== */

:root {
  --hcx-wrap: 1180px;
  --hcx-r: 14px;
  --hcx-r-lg: 20px;
  --hcx-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- shell reset for the new blocks (the template styles ul/h/a globally) ---------- */
.hc-header *, .hc-footer *, .hcx *, .hc-header *::before, .hc-header *::after { box-sizing: border-box; }
.hc-header ul, .hc-footer ul, .hcx ul { list-style: none; margin: 0; padding: 0; }
.hc-header a, .hc-footer a, .hcx a { text-decoration: none; }
.hcx h1, .hcx h2, .hcx h3, .hc-footer h4 { margin: 0; }

.hc-wrap { max-width: var(--hcx-wrap); margin-inline: auto; padding-inline: var(--hc-gutter); width: 100%; }

/* ==========================================================================
   1. Header
   ========================================================================== */
.hc-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(245, 246, 243, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hc-line);
}
.hc-header .hc-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 72px;
}
.hc-logo { display: block; line-height: 0; flex: 0 0 auto; }
.hc-logo img { height: 44px; width: auto; }

.hc-nav { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; }
.hc-nav > li { position: relative; }
.hc-nav > li > a,
.hc-nav > li > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  font: 500 14.5px/1 var(--hc-body);
  color: var(--hc-kraft);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.hc-nav > li > a:hover, .hc-nav > li > button:hover,
.hc-nav > li > a:focus-visible, .hc-nav > li > button:focus-visible { color: var(--hc-core); background: rgba(23, 22, 26, 0.06); }
.hc-nav > li > a[aria-current="page"] { color: var(--hc-core); font-weight: 600; box-shadow: inset 0 -2px 0 var(--hc-oxide); border-radius: 9px 9px 0 0; }
.hc-nav > li > button svg { width: 12px; height: 12px; transition: transform .2s var(--hcx-ease); }
.hc-nav > li.is-open > button svg { transform: rotate(180deg); }

.hc-sub {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  min-width: 230px;
  padding: 6px;
  background: var(--hc-surface);
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(23, 22, 26, 0.14);
  display: none;
}
.hc-nav > li.is-open > .hc-sub { display: block; }
.hc-sub a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font: 400 14px/1.3 var(--hc-body);
  color: var(--hc-kraft);
}
.hc-sub a:hover { background: rgba(23, 22, 26, 0.06); color: var(--hc-core); }
.hc-sub a[aria-current="page"] { color: var(--hc-oxide-ink); font-weight: 600; }

.hc-lang {
  font-family: var(--hc-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}
.hc-cta, .hc-nav > li > a.hc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--hc-oxide);
  color: #fff !important;
  font: 600 14px/1 var(--hc-body);
  white-space: nowrap;
  transition: transform .2s var(--hcx-ease), background-color .15s ease;
}
.hc-cta:hover, .hc-nav > li > a.hc-cta:hover { background: var(--hc-oxide-ink); color: #fff; transform: translateY(-1px); }
.hc-cta svg { width: 16px; height: 16px; }

.hc-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--hc-line);
  border-radius: 10px;
  background: transparent;
  color: var(--hc-core);
  align-items: center; justify-content: center;
  cursor: pointer;
  margin-inline-start: auto;
}
.hc-burger svg { width: 22px; height: 22px; }

@media (max-width: 1040px) {
  .hc-burger { display: inline-flex; }
  .hc-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px var(--hc-gutter) 18px;
    background: var(--hc-surface);
    border-bottom: 1px solid var(--hc-line);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .hc-nav.is-open { display: flex; }
  .hc-nav > li > a, .hc-nav > li > button { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 16px; }
  .hc-nav > li > a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--hc-oxide); border-radius: 8px; }
  .hc-sub { position: static; box-shadow: none; border: 0; padding: 0 0 6px 10px; background: transparent; min-width: 0; }
  .hc-cta { justify-content: center; margin-top: 8px; }
}

/* ==========================================================================
   2. Footer
   ========================================================================== */
.hc-footer {
  margin-top: 0;
  background: var(--hc-core);
  color: var(--hc-slate-lit);
  border-top: 3px solid var(--hc-oxide);
  font-family: var(--hc-body);
}
.hc-footer .hc-wrap { padding-block: clamp(44px, 6vw, 72px) 26px; }
.hc-footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(26px, 4vw, 48px);
  padding-bottom: 34px;
  border-bottom: 1px solid var(--hc-line-dark);
}
.hc-footer-brand img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.hc-footer-brand p { margin: 16px 0 0; font-size: 14px; line-height: 1.7; max-width: 42ch; color: var(--hc-slate-lit); }
.hc-footer h4 {
  font: 600 11.5px/1 var(--hc-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.hc-footer li + li { margin-top: 9px; }
.hc-footer li a, .hc-footer li span { color: var(--hc-slate-lit); font-size: 14px; line-height: 1.5; }
.hc-footer li a:hover { color: #fff; }
.hc-footer .hc-mono { font-family: var(--hc-mono); }
.hc-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  font: 400 12.5px/1.4 var(--hc-mono);
}
.hc-footer-bottom a { color: var(--hc-slate-lit); }
.hc-footer-bottom a:hover { color: #fff; }
.hc-social { display: flex; gap: 8px; }
.hc-social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hc-line-dark);
  border-radius: 50%;
  color: var(--hc-slate-lit);
  transition: border-color .15s, color .15s, background-color .15s;
}
.hc-social a:hover { border-color: var(--hc-oxide); color: #fff; background: var(--hc-oxide); }
.hc-social svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .hc-footer-grid { grid-template-columns: 1fr 1fr; } .hc-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .hc-footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   3. Homepage
   ========================================================================== */
.hcx { font-family: var(--hc-body); color: var(--hc-core); }
.hcx section { padding-block: clamp(64px, 8.5vw, 120px); }
.hcx h2 {
  font-family: var(--hc-display);
  font-variation-settings: "wdth" 110;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 20ch;
  color: var(--hc-core);
}
.hcx .lede { color: var(--hc-slate); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; max-width: 58ch; margin: 16px 0 0; }
.hcx .btn-x {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font: 600 15.5px/1 var(--hc-body);
  border: 1.5px solid transparent;
  transition: transform .2s var(--hcx-ease), background-color .15s, color .15s, border-color .15s;
}
.hcx .btn-x svg { width: 16px; height: 16px; }
.hcx .btn-x.solid { background: var(--hc-oxide); color: #fff; }
.hcx .btn-x.solid:hover { background: var(--hc-oxide-ink); transform: translateY(-2px); color: #fff; }
.hcx .btn-x.ghost { border-color: var(--hc-core); color: var(--hc-core); background: transparent; }
.hcx .btn-x.ghost:hover { background: var(--hc-core); color: #fff; }
.hcx .btn-x.light { border-color: rgba(255,255,255,.5); color: #fff; }
.hcx .btn-x.light:hover { background: #fff; color: var(--hc-core); }

/* hero */
.hx-hero { padding-top: clamp(64px, 9vw, 120px) !important; padding-bottom: 0 !important; text-align: center; }
.hx-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--hc-line);
  background: var(--hc-surface);
  border-radius: 999px;
  font: 500 13px/1 var(--hc-body);
  color: var(--hc-slate);
  margin-bottom: 26px;
}
[dir="rtl"] .hx-kicker { padding: 6px 6px 6px 14px; }
.hx-kicker b {
  font: 600 11px/1 var(--hc-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--hc-oxide);
  border-radius: 999px; padding: 5px 9px;
}
.hx-hero h1 {
  font-family: var(--hc-display);
  font-variation-settings: "wdth" 110;
  font-weight: 700;
  font-size: clamp(38px, 6.2vw, 78px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--hc-core);
  max-width: 16ch;
  margin: 0 auto 22px;
  text-wrap: balance;
}
.hx-hero h1 em { font-style: normal; color: var(--hc-oxide-ink); }
.hx-hero .sub { color: var(--hc-slate); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; max-width: 54ch; margin: 0 auto 32px; }
.hx-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.hx-fine { margin: 18px 0 0; font: 400 12.5px/1.5 var(--hc-mono); color: var(--hc-slate); letter-spacing: 0.02em; }

.hx-shot {
  margin: clamp(44px, 6vw, 72px) auto 0;
  max-width: var(--hcx-wrap);
  padding-inline: var(--hc-gutter);
}
.hx-shot figure {
  margin: 0;
  position: relative;
  border-radius: var(--hcx-r-lg) var(--hcx-r-lg) 0 0;
  overflow: hidden;
  border: 1px solid var(--hc-line);
  border-bottom: 0;
  background: var(--hc-core);
  box-shadow: 0 30px 70px rgba(23, 22, 26, 0.18);
  aspect-ratio: 16 / 8.2;
}
.hx-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-shot figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px;
  background: linear-gradient(to top, rgba(23,22,26,.82), rgba(23,22,26,0));
  color: #fff;
  font: 500 13px/1.3 var(--hc-mono);
  text-align: start;
}
.hx-shot figcaption span { opacity: .8; }

/* runs line */
.hx-marks {
  padding-block: 20px !important;
  border-block: 1px solid var(--hc-line);
  background: var(--hc-surface);
}
.hx-marks .hc-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 32px; }
.hx-marks .k { font: 500 11.5px/1 var(--hc-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hc-slate); }
.hx-marks .m { font: 700 17px/1 var(--hc-display); font-variation-settings: "wdth" 110; color: var(--hc-kraft); letter-spacing: -0.01em; }

/* what we make: four photographs on a rule */
.hx-make .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(30px, 4vw, 52px); }
.hx-make a { display: block; color: var(--hc-core); }
.hx-make figure { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--hcx-r); overflow: hidden; background: var(--hc-line); }
.hx-make img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--hcx-ease); }
.hx-make a:hover img { transform: scale(1.04); }
.hx-make h3 { font: 700 20px/1.2 var(--hc-display); font-variation-settings: "wdth" 110; letter-spacing: -0.02em; margin: 16px 0 6px; padding-top: 14px; border-top: 2px solid var(--hc-core); }
.hx-make p { margin: 0; color: var(--hc-slate); font-size: 14.5px; line-height: 1.55; }
.hx-make .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--hc-oxide-ink); font-weight: 600; font-size: 14px; }
@media (max-width: 980px) { .hx-make .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .hx-make .grid { grid-template-columns: 1fr; } }

/* materials: two flat panels */
.hx-mat { background: var(--hc-surface); border-block: 1px solid var(--hc-line); }
.hx-mat .panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(30px, 4vw, 52px); }
.hx-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 28px;
  background: var(--hc-mineral);
  border: 1px solid var(--hc-line);
  border-radius: var(--hcx-r-lg);
}
.hx-panel .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hx-panel .head img { height: 36px; width: auto; }
.hx-panel h3 { font: 700 26px/1.1 var(--hc-display); font-variation-settings: "wdth" 110; letter-spacing: -0.02em; }
.hx-panel figure { margin: 0; aspect-ratio: 16 / 8; border-radius: var(--hcx-r); overflow: hidden; }
.hx-panel figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-panel dl { margin: 0; display: grid; }
.hx-panel dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hc-line); font-size: 14px; }
.hx-panel dt { font: 400 12.5px/1.4 var(--hc-mono); color: var(--hc-slate); }
.hx-panel dd { margin: 0; font-weight: 600; text-align: end; color: var(--hc-core); }
.hx-panel .go { display: inline-flex; align-items: center; gap: 8px; color: var(--hc-oxide-ink); font-weight: 600; }
@media (max-width: 820px) { .hx-mat .panels { grid-template-columns: 1fr; } }

/* figures: the accent as a surface */
.hx-fig .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(30px, 4vw, 52px); }
.hx-figure {
  background: var(--hc-oxide);
  color: #fff;
  border-radius: var(--hcx-r-lg);
  padding: 26px 26px 22px;
  min-height: 176px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hx-figure small { font: 500 13.5px/1.4 var(--hc-body); opacity: .92; }
.hx-figure b { font: 600 clamp(40px, 5vw, 62px)/1 var(--hc-mono); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.hx-figure b small { font: 600 .42em/1 var(--hc-mono); opacity: .9; margin-inline-start: 4px; }
@media (max-width: 720px) { .hx-fig .grid { grid-template-columns: 1fr; } .hx-figure { min-height: 130px; } }

/* projects */
.hx-work .head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.hx-work .names { margin: 14px 0 0; font: 400 13px/1.6 var(--hc-mono); color: var(--hc-slate); max-width: 70ch; }
.hx-work .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.hx-work .grid a { display: block; aspect-ratio: 4 / 3; border-radius: var(--hcx-r); overflow: hidden; background: var(--hc-line); border: 1px solid var(--hc-line); }
.hx-work .grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--hcx-ease); }
.hx-work .grid a:hover img { transform: scale(1.04); }
@media (max-width: 720px) { .hx-work .grid { grid-template-columns: 1fr 1fr; } }

/* clients + video */
.hx-proof { background: var(--hc-surface); border-block: 1px solid var(--hc-line); }
.hx-proof .row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hx-logos { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 22px; }
.hx-logos img { height: 44px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.hx-logos img:hover { filter: none; opacity: 1; }
.hx-video { position: relative; border-radius: var(--hcx-r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--hc-core); border: 1px solid var(--hc-line); }
.hx-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.hx-video .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.hx-video .play span {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--hc-oxide);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(23,22,26,.35);
  transition: transform .2s var(--hcx-ease);
}
.hx-video .play:hover span { transform: scale(1.06); }
.hx-video .play svg { width: 26px; height: 26px; margin-inline-start: 3px; }
.hx-video figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 12px 16px; font: 500 12.5px/1.3 var(--hc-mono); color: #fff; background: linear-gradient(to top, rgba(23,22,26,.8), transparent); }
@media (max-width: 820px) { .hx-proof .row { grid-template-columns: 1fr; } }

/* close: contact */
.hx-close { background: var(--hc-core); color: #fff; }
.hx-close h2 { color: #fff; }
.hx-close .lede { color: var(--hc-slate-lit); }
.hx-close .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.hx-close dl { margin: 0; display: grid; }
.hx-close dl div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hc-line-dark); }
.hx-close dt { font: 500 11.5px/1.6 var(--hc-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-slate-lit); }
.hx-close dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: #fff; }
.hx-close dd a { color: #fff; border-bottom: 1px solid var(--hc-line-dark); }
.hx-close dd a:hover { border-color: var(--hc-oxide-lit); color: var(--hc-oxide-lit); }
.hx-close .hx-actions { justify-content: flex-start; margin-top: 26px; }
@media (max-width: 820px) { .hx-close .row { grid-template-columns: 1fr; } }

/* ==========================================================================
   4. Inner pages: the title band is flat, the stock photo goes
   ========================================================================== */
.page-title {
  background-image: none !important;
  background-color: var(--hc-surface) !important;
  border-bottom: 1px solid var(--hc-line);
  padding: clamp(44px, 6vw, 76px) 0 clamp(32px, 4vw, 48px) !important;
  min-height: 0 !important;
}
.page-title::before, .page-title::after { display: none !important; }
.page-title .title-box h1 {
  font-family: var(--hc-display) !important;
  font-variation-settings: "wdth" 110;
  font-size: clamp(32px, 4.6vw, 54px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
  color: var(--hc-core) !important;
  margin: 0 !important;
}
.page-title .title-box .text, .page-title .text { display: none !important; }
.page-title .bread-crumb, .page-title .bread-crumb li, .page-title .bread-crumb a { color: var(--hc-slate) !important; font-family: var(--hc-mono) !important; font-size: 12.5px !important; }
.page-title .bread-crumb a:hover { color: var(--hc-oxide-ink) !important; }
.page-title .inner-container { display: flex; flex-direction: column; gap: 12px; padding: 0 !important; min-height: 0 !important; }
.page-title .inner-container > *, .page-title .title-box, .page-title .bread-crumb { margin: 0 !important; padding: 0 !important; position: static !important; float: none !important; }
.page-title h2, .page-title p, .page-title .title-box h2, .page-title .title-box p { display: none !important; }
.page-title .bread-crumb li { display: inline-block; margin-inline-end: 6px !important; }
.page-title .bread-crumb li::after { content: '/'; margin-inline-start: 6px; color: var(--hc-line); }
.page-title .bread-crumb li:last-child::after { content: none; }

/* the template's "Just call us" aside becomes a quiet card */
.sidebar .call-widget, .call-widget .inner-box, .service-detail .info-box { background-image: none !important; }

/* motion: one reveal, no floats */
@media (prefers-reduced-motion: reduce) {
  .hcx *, .hc-header *, .hc-footer * { transition-duration: .01ms !important; animation: none !important; }
}

/* ==========================================================================
   5. Generated media (2026-09-02): the hero frame plays a clip, inner title
   bands carry a page picture on their end side, two material pages a film.
   ========================================================================== */
.hx-shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-title.has-pic {
  /* The scene is a picture, not a texture: give the band real height and let
     the image cover its end half. `auto 100%` used to shrink a 16:9 frame to
     the band's height, which read as a stray strip pinned to the edge. */
  background-image: var(--pt-img) !important;
  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  position: relative;
  /* tracks the viewport width: a capped 300px band cropped the scene to
     8.5:1 at 2560 and worse at 4K, which is what read as "squashed" */
  min-height: min(clamp(220px, 20vw, 720px), 70vh) !important;
  display: flex;
  align-items: center;
}
[dir="rtl"] .page-title.has-pic { background-position: left center !important; }
.page-title.has-pic::before {
  content: '' !important;
  display: block !important;
  position: absolute; inset: 0;
  /* the template ships .page-title:before at opacity .2 - without this the
     whole scrim is a 20% ghost and the heading sits on bare photograph */
  opacity: 1 !important;
  background: linear-gradient(90deg, var(--hc-surface) 0%, var(--hc-surface) 34%, rgba(245,246,243,.88) 52%, rgba(245,246,243,.35) 72%, rgba(245,246,243,.12) 100%);
}
[dir="rtl"] .page-title.has-pic::before { opacity: 1 !important; background: linear-gradient(270deg, var(--hc-surface) 0%, var(--hc-surface) 34%, rgba(245,246,243,.88) 52%, rgba(245,246,243,.35) 72%, rgba(245,246,243,.12) 100%); }
.page-title.has-pic .auto-container { position: relative; z-index: 1; width: 100%; }
@media (max-width: 760px) {
  .page-title.has-pic { min-height: clamp(170px, 40vw, 260px) !important; background-position: center !important; }
  .page-title.has-pic::before { opacity: 1 !important; background: linear-gradient(180deg, rgba(245,246,243,.94) 0%, rgba(245,246,243,.88) 100%) !important; }
}
.hc-film { max-width: var(--hcx-wrap); margin: clamp(28px, 4vw, 48px) auto 0; padding-inline: var(--hc-gutter); }
.hc-film figure { margin: 0; position: relative; aspect-ratio: 16 / 9; border-radius: var(--hcx-r-lg); overflow: hidden; border: 1px solid var(--hc-line); background: var(--hc-core); box-shadow: 0 24px 60px rgba(23,22,26,.16); }
.hc-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-film figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 12px 18px; font: 500 12.5px/1.3 var(--hc-mono); color: #fff; background: linear-gradient(to top, rgba(23,22,26,.8), transparent); }

.hx-shot figure video.hc-clip { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.hx-shot figure video.hc-clip.is-live { opacity: 1; }
.hx-dots { position: absolute; inset-inline: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.hx-dots button { width: 26px; height: 4px; border: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.35); cursor: pointer; transition: background .25s, width .25s; }
.hx-dots button[aria-current="true"] { background: var(--hc-oxide); width: 40px; }

/* a picture band: the page's own branded scene, used as a closing divider */
.hc-band { max-width: var(--hcx-wrap); margin: clamp(36px,5vw,64px) auto clamp(36px,5vw,64px); padding-inline: var(--hc-gutter); }
.hc-band figure { margin: 0; }
.hc-band .frame { border-radius: var(--hcx-r-lg); overflow: hidden; border: 1px solid var(--hc-line); aspect-ratio: 16 / 7; background: var(--hc-surface); box-shadow: 0 20px 50px rgba(23,22,26,.12); }
.hc-band img, .hc-band video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-band figcaption { margin-top: 12px; font: 500 12.5px/1.4 var(--hc-mono); color: var(--hc-slate); text-align: center; }

/* ==========================================================================
   6. Inner-page content (2026-09-02). Everything below the title band came
   from the old template at 14px grey on grey, one measure wide, with the
   paragraph breaks collapsed - which is what made the long About and material
   pages read as a wall. This gives that content the same type scale and the
   same measure as the rest of the site, and turns the two floating template
   widgets (the call aside, the sponsor strip) into cards on the system.
   ========================================================================== */
.page-title .title-box .title,
.page-title .title-box span.title {
  display: block !important;
  font: 500 12.5px/1.5 var(--hc-mono) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--hc-slate) !important;
  margin-top: 10px !important;
}

.project-details-section, .service-detail, .sidebar-page-container { background: var(--hc-mineral); }
.project-details-section .lower-content .inner-column,
.service-detail .inner-column {
  font-family: var(--hc-body);
  font-size: 16.5px;
  line-height: 1.75;
  color: #2C2B31;
  max-width: var(--hc-measure);
}
.project-details-section .inner-column h2,
.service-detail .inner-column h2 {
  font-family: var(--hc-display); font-variation-settings: "wdth" 110;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--hc-core); margin: 0 0 18px;
}
.project-details-section .inner-column h3,
.project-details-section .inner-column h4,
.service-detail .inner-column h4 {
  font-family: var(--hc-display); font-variation-settings: "wdth" 108;
  font-size: clamp(20px, 2.3vw, 26px); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--hc-core); margin: 40px 0 14px;
  padding-top: 22px; border-top: 1px solid var(--hc-line);
}
.project-details-section .inner-column p,
.service-detail .inner-column p { margin: 0 0 18px; color: #2C2B31; }
.project-details-section .inner-column p:last-child { margin-bottom: 0; }
.project-details-section .inner-column em,
.project-details-section .inner-column i {
  font-style: normal; font-family: var(--hc-mono); font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--hc-oxide-ink);
  display: inline-block; margin-top: 8px;
}
.project-details-section .inner-column a { color: var(--hc-oxide-ink); text-decoration: underline; text-underline-offset: 3px; }

/* the template's "Just call us" aside */
.help-box-two, .help-box-two .inner {
  background: var(--hc-surface) !important; background-image: none !important;
  border: 1px solid var(--hc-line); border-radius: var(--hcx-r-lg);
  padding: 26px 24px !important; box-shadow: none !important;
}
.help-box-two .inner { border: 0; padding: 0 !important; }
.help-box-two .title {
  font: 500 12.5px/1.4 var(--hc-mono) !important; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hc-oxide-ink) !important; display: block; margin-bottom: 10px;
}
.help-box-two h2, .help-box-two h3, .help-box-two h4 {
  font-family: var(--hc-display) !important; font-size: clamp(20px, 2.4vw, 26px) !important;
  line-height: 1.15 !important; color: var(--hc-core) !important; margin: 0 0 18px !important;
}
.help-box-two .theme-btn, .help-box-two .btn-style-two {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hc-oxide) !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 11px 22px !important; font: 600 14px/1 var(--hc-body) !important;
  letter-spacing: .01em; box-shadow: none !important; text-transform: none !important;
}
.help-box-two .theme-btn:hover { background: var(--hc-oxide-ink) !important; }

/* the client / sponsor strip */
.clients-section, .clients-section.style-two { background: var(--hc-surface); border-block: 1px solid var(--hc-line); padding-block: clamp(40px, 6vw, 68px) !important; }
.clients-section .sponsors-carousel .slide-item .image-box {
  display: flex; align-items: center; justify-content: center;
  height: 108px; margin: 0 6px; padding: 14px 18px;
  background: var(--hc-mineral); border: 1px solid var(--hc-line); border-radius: var(--hcx-r);
}
.clients-section .sponsors-carousel img {
  height: 100% !important; width: auto !important; max-width: 100%; object-fit: contain;
  filter: grayscale(1); opacity: .68 !important; transition: filter .28s var(--hcx-ease), opacity .28s var(--hcx-ease);
}
.clients-section .sponsors-carousel .image-box:hover img { filter: none; opacity: 1 !important; }

/* RTL: the title band's crumb trail follows the heading to the start edge.
   The template left-aligns it from an .rtl rule written for the old layout. */
[dir="rtl"] .page-title .inner-container,
[dir="rtl"] .page-title .title-box,
[dir="rtl"] .page-title .bread-crumb { text-align: right !important; }
[dir="rtl"] .page-title .bread-crumb li { float: none !important; }