/* ============================================================================
   ENGLISH HOMEPAGE HERO PARITY — reference hero treatment
   ----------------------------------------------------------------------------
   The reference homepage (website/en/index.html) ships its final hero look as
   a set of overrides that load AFTER sdeira-v2-en.css: the Liwa corrections
   layer (assets/css/sdeira-liwa.css), the shared carousel/glass treatment
   (assets/css/sdeira-hero-carousel.css), and the end-of-file unlayered rules
   inside the reference sdeira-v2-en.css itself (the Jais card veil, the
   brand-black hero-sectors ground).

   This file ports exactly those hero-only rules into WordPress. Every rule is
   scoped to #hero so no other section (about/needs/projects/companies/news/
   contact) or any sub-page is affected. It is enqueued LAST in the homepage
   cascade (see inc/enqueue.php) and is unlayered, so it wins over the
   @layer legacy rules in sdeira-v2-en.css regardless of specificity.
   ========================================================================== */

#hero {
  --hero-carousel-mark-padding: 0 .3em;
  --hero-carousel-heading-leading: normal;
  --hero-carousel-heading-tail: 0;
  --hero-carousel-lead-gap: 12px;
  --hero-carousel-lead-leading: normal;
  --hero-sector-gap: 4px;
  --button-photo-fill: var(--brand-black);
  --button-photo-ink: var(--brand-white);
  color: var(--brand-jais);
}

/* ---- hero scrim: removed, the photograph stays clean --------------------- */
#hero::after,
#hero .hero-content::after {
  background: none;
}

/* ---- hero content block: reference padding and height --------------------- */
#hero .hero-content {
  padding-block: 96px 48px;
}

/* ---- hero glass: p.43 corner marks, slats hidden -------------------------- */
#hero .hero-glass {
  display: block;
  opacity: 1;
  z-index: 1;
}

#hero .hero-glass span {
  display: none !important;
  height: 200%;
}

#hero .hero-glass::before,
#hero .hero-glass::after {
  content: "";
  position: absolute;
  inline-size: var(--photo-mark-width-hero);
  aspect-ratio: var(--photo-mark-p43-ratio);
  pointer-events: none;
}

#hero .hero-glass::before {
  inset: 0 auto auto 0;
  background: url("../images/patterns/lines-rotated-180.svg") no-repeat left top / 100% 100%;
}

#hero .hero-glass::after {
  inset: auto 0 0 auto;
  background: url("../images/patterns/lines.svg") no-repeat right bottom / 100% 100%;
}

/* ---- hero copy: the glass block that hugs its own text -------------------- */
#hero .hero-content-copy {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #ffffff;
  padding: 0;
  border-radius: var(--r);
  max-width: min(720px, 100%);
}

@media (min-width: 981px) {
  #hero .hero-content-copy {
    max-width: min(960px, 100%);
  }
}

/* ---- the line mark: a charcoal band behind each visual line --------------- */
#hero .hero-content-copy .hero-line-mark {
  display: inline;
  /* background: var(--scrim-hero); */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0;
}

#hero .hero-content-copy h1:has(.hero-line-mark) {
  display: block;
  line-height: var(--hero-carousel-heading-leading);
  margin-block: 0;
  padding-bottom: var(--hero-carousel-heading-tail);
}

#hero .hero-content-copy p:has(.hero-line-mark) {
  display: block;
  margin-block: 0;
  margin-block-start: var(--hero-carousel-lead-gap);
  line-height: var(--hero-carousel-lead-leading);
}

#hero .hero-content-copy p {
  color: var(--brand-black);
}

/* ---- the emphasised phrase: plain coloured text, no filled badge ---------- */
#hero .hero-content-copy .em {
  display: inline;
  white-space: normal;
  background: none;
  color: var(--brand-liwa);
  font-weight:700;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  transform: none;
}

/* ---- eyebrow: the reference homepage hero has no eyebrow ------------------ */
#hero .eyebrow {
  display: none;
}

/* ---- ghost button: solid brand-black fill -------------------------------- */
#hero .hero-content-copy .btn-ghost {
  color: var(--brand-white);
  border-color: var(--button-photo-fill);
  background: var(--button-photo-fill);
}

#hero .hero-content-copy .btn-ghost:is(:hover, :focus-visible) {
  border-color: var(--button-photo-fill);
  background: var(--button-photo-fill);
}

/* #hero .hero-content-copy .btn-ghost::before {
  background: var(--scrim-control);
} */

/* ---- scroll cue + slide rail ---------------------------------------------- */
#hero .scroll-hint {
  color: var(--brand-white);
}

#hero .scroll-hint .dot {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .95);
}

#hero .scroll-hint .dot::after {
  background: var(--brand-white);
}

#hero .hero-slide-line {
  background-image: linear-gradient(
    rgba(0, 0, 0, 0) calc(50% - 1.5px),
    rgba(255, 255, 255, .38) calc(50% - 1.5px),
    rgba(255, 255, 255, .38) calc(50% + 1.5px),
    rgba(0, 0, 0, 0) calc(50% + 1.5px));
}

#hero .hero-slide-line.active::after,
#hero .hero-slide-line.done::after {
  background: var(--accent);
}

/* ---- hero sectors band: solid brand black, 4px grid seam ------------------ */
#hero .hero-sectors {
  background: var(--brand-black);
}

#hero .hero-sectors .sector-grid {
  gap: var(--hero-sector-gap);
  background: var(--scrim-bar);
}

/* ---- sector card veil: Jais, not black (reference end-of-file rule) ------- */
#hero .hero-sectors .sector-card-veil {
  background: linear-gradient(180deg,
    rgba(89, 89, 92, .03) 0%,
    rgba(89, 89, 92, .04) 10%,
    rgba(89, 89, 92, .06) 20%,
    rgba(89, 89, 92, .09) 30%,
    rgba(89, 89, 92, .15) 40%,
    rgba(89, 89, 92, .22) 50%,
    rgba(89, 89, 92, .28) 55%,
    rgba(89, 89, 92, .34) 60%,
    rgba(89, 89, 92, .41) 65%,
    rgba(89, 89, 92, .47) 70%,
    rgba(89, 89, 92, .54) 80%,
    rgba(89, 89, 92, .59) 90%,
    rgba(89, 89, 92, .62) 100%);
}

/* ---- sector card photo: subtle charcoal dim + p.43 corner mark ------------ */
#hero .sector-card .sector-card-media::after {
  background: rgba(65, 64, 66, .16);
  inset: 0;
  clip-path: none;
  transform: none;
  opacity: 1;
}

#hero .sector-card:hover .sector-card-media::after,
#hero .sector-card:focus-within .sector-card-media::after {
  transform: none;
}

#hero .sector-card .sector-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/patterns/lines.svg") no-repeat right -28px bottom 0 / auto 80%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: scale(1);
  transform-origin: 100% 100%;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-normal, 200ms) var(--ease-out, ease-out);
}

#hero .sector-card:is(:hover, :focus-within) .sector-card-media::before {
  opacity: 1;
  transform: scale(1.1);
}

/* ---- sector card hover panel: brand-black, no shadow ---------------------- */
#hero .sector-card-panel {
  background: rgba(65, 64, 66, .92);
  box-shadow: none;
}

/* ---- hover-preview panel: sharp photo only + p.43 mark -------------------- */
#hero .sector-hover-visual {
  filter: none !important;
}

#hero .sector-hover-visual::before {
  display: none !important;
}

#hero .sector-hover-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/patterns/lines.svg") no-repeat right -28px bottom 0 / auto 80%;
  pointer-events: none;
  z-index: 2;
  transform: scale(1);
  transform-origin: 100% 100%;
}

/* ---- hover-preview panel typography --------------------------------------- */
#hero .sector-hover-copy > span {
  color: var(--brand-liwa);
  font-size: var(--type-meta);
  font-weight: 700;
}

#hero .sector-hover-copy h3 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.15;
}

#hero .sector-card-panel-copy h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.2;
}

/* ============================================================================
   ENGLISH HOMEPAGE ABOUT PARITY
   ----------------------------------------------------------------------------
   The reference homepage hides the retired identity stripes (section-glass /
   ribbon-frame / split-ribbon) site-wide via sdeira-sections.css; the
   WordPress copy of that shared file is missing the hide, so the retired
   decorations still render here. This ports the reference #about treatment,
   scoped to #about only: hide the stripes, draw the p.43 corner mark on the
   photograph (reference sdeira-liwa.css), and pin the two-line title.
   ========================================================================== */

#about .section-glass,
#about .ribbon-frame,
#about .split-ribbon {
  display: none !important;
}

/* Match the reference's computed values on the (hidden) retired decorations so
   the audit compares identical values rather than the shared sheet's defaults. */
#about .section-glass span,
#about .section-glass span.b1,
#about .section-glass span.b2,
#about .section-glass span.b3 {
  height: 200%;
  background: transparent;
  color: var(--brand-jais);
}

#about .split-ribbon {
  color: var(--brand-jais);
}

#about .split-ribbon::after {
  background: rgba(145, 8, 17, .05);
}

#about .about-visual {
  position: relative;
}

/* The primary p.43 corner mark, top-left, content tier (ref sdeira-liwa.css).
   ::before is the retired mirrored instance - present in the reference as an
   empty, hidden layer, so replicate its computed values exactly. */
#about .about-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/patterns/lines.svg") no-repeat right -28px bottom -28px / auto 80%;
  pointer-events: none;
  z-index: 2;
  transform: rotate(180deg) scale(1);
  transform-origin: 100% 100%;
  display: none;
}

#about .about-visual::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  inline-size: var(--photo-mark-width);
  aspect-ratio: var(--photo-mark-p43-ratio);
  background: url("../images/patterns/lines-rotated-180.svg") no-repeat left top / 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* The two fixed title phrases never wrap to a third line (ref v2-en.css). */
#about .about-title-line {
  white-space: nowrap;
}

/* ---- About stat strip (ref sdeira-sections.css) --------------------------
   The shared section sheet in WordPress diverged: the stat cells lost their
   sunken ground and the diagonal separator is drawn in Sweihan with a taller
   blade. The reference homepage draws the ground in light grey and the
   separator at the mark's own Liwa slant. Scoped to #about only. */
#about .stat-strip .stat {
  background: var(--surface-sunken);
}

#about .stat + .stat::before {
  left: calc(clamp(18px, 1.9vw, 30px) / -2);
  height: 24px;
  background: var(--brand-liwa);
}