/* About page v2: portrait wall hero, dark figures band, editorial rules rows */

/* portrait wall */
.wall { position: relative; width: 100%; height: min(78vh, 720px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.wall-col { display: flex; flex-direction: column; gap: 14px; will-change: transform; }
.wall-col.c2 { margin-top: -90px; }
.wall-card { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--plum); flex: 0 0 auto; }
.wall-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.wall-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20,4,26,.85)); }
.wall-card span { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; }
.wall-card span i { display: block; font-style: normal; font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--heather); margin-top: 3px; }
html[dir="rtl"] .wall-card span i { letter-spacing: 0; font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .wall-col.c1 { animation: wall-up 70s linear infinite; }
  .wall-col.c2 { animation: wall-down 80s linear infinite; }
  .wall-col.c3 { animation: wall-up 90s linear infinite; }
  .wall:hover .wall-col { animation-play-state: paused; }
  @keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
  @keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
}
.p-hero .p-art.wall-art { aspect-ratio: auto; max-width: 640px; }
@media (max-width: 900px) { .wall { height: 460px; } }
@media (max-width: 560px) { .wall { height: 380px; gap: 8px; } .wall-col { gap: 8px; } .wall-card span { display: none; } }

/* figures band, dark */
.figs2 { background: var(--aub); color: #fff; position: relative; overflow: hidden; padding: clamp(56px,7vw,96px) 0; }
.figs2 .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,3vw,40px); position: relative; }
.f2 { padding-top: 26px; position: relative; }
.f2::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(199,155,232,.22); }
.f2::after { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--heather); transition: width 1.6s var(--ease); }
html[dir="rtl"] .f2::after { left: auto; right: 0; }
.in .f2::after { width: 100%; }
.in .f2:nth-child(2)::after { transition-delay: .2s; } .in .f2:nth-child(3)::after { transition-delay: .4s; } .in .f2:nth-child(4)::after { transition-delay: .6s; }
.f2 .v { font-family: 'Rebelton',sans-serif; color: var(--heather); font-size: clamp(40px,5vw,76px); line-height: 1; white-space: nowrap; }
.f2 .v.small { font-size: clamp(28px,3.2vw,48px); padding-top: clamp(8px,1vw,16px); }
.f2 .l { margin-top: 18px; font-size: 15px; color: rgba(255,255,255,.75); line-height: 1.55; max-width: 26ch; }
.figs2 .bg-arcs { position: absolute; right: -14vw; top: -18vw; width: 44vw; min-width: 340px; opacity: .2; pointer-events: none; }
html[dir="rtl"] .figs2 .bg-arcs { right: auto; left: -14vw; }
@media (max-width: 860px) { .figs2 .grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } }

/* firm statement */
.statement { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,6vw,96px); align-items: start; }
.statement .big { font-family: 'Rebelton',sans-serif; text-transform: uppercase; word-spacing: -0.14em; font-size: clamp(26px,3.2vw,46px); line-height: 1.12; color: var(--aub); border-left: 3px solid var(--heather); padding-left: clamp(18px,2vw,28px); }
html[dir="rtl"] .statement .big { border-left: 0; border-right: 3px solid var(--heather); padding-left: 0; padding-right: clamp(18px,2vw,28px); font-family: 'Tajawal',sans-serif; font-weight: 700; text-transform: none; line-height: 1.4; }
.statement p { font-size: clamp(16px,1.4vw,18px); line-height: 1.8; color: var(--ink-soft); margin-bottom: 18px; }
@media (max-width: 860px) { .statement { grid-template-columns: 1fr; } }

/* rules as editorial rows */
.rrows { border-top: 1px solid var(--aub); }
.rrow { position: relative; display: grid; grid-template-columns: 140px minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(16px,3vw,48px); align-items: center; padding: clamp(30px,3.5vw,48px) 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.rrow::before { content: ""; position: absolute; inset: 0; background: var(--aub); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); z-index: 0; }
html[dir="rtl"] .rrow::before { transform-origin: right; }
.rrow:hover::before { transform: scaleX(1); }
.rrow > * { position: relative; z-index: 1; transition: color .4s ease; }
.rrow .n { font-family: 'Rebelton',sans-serif; color: var(--heather); font-size: clamp(48px,5vw,80px); line-height: 1; padding-left: 8px; }
.rrow h3 { font-family: 'Rebelton',sans-serif; font-weight: 400; word-spacing: -0.14em; font-size: clamp(26px,3vw,44px); letter-spacing: .01em; color: var(--aub); }
html[dir="rtl"] .rrow h3 { font-family: 'Tajawal',sans-serif; font-weight: 700; }
.rrow p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.7; max-width: 52ch; }
.rrow:hover h3 { color: #fff; }
.rrow:hover p { color: rgba(255,255,255,.78); }
@media (max-width: 760px) { .rrow { grid-template-columns: 70px 1fr; } .rrow p { grid-column: 1 / -1; } .rrow .n { font-size: 40px; } }

/* people strip polish */
.person .ph { position: relative; }
.person .ph::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 6px; transition: border-color .3s ease; }
.person:hover .ph::after { border-color: var(--heather); }
@media (max-width: 860px) {
  .figs2 .grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .f2 .v.small { white-space: normal; font-size: 26px; line-height: 1.15; }
  .f2 .v { font-size: 44px; }
}

/* brand seal hero (replaces the portrait wall) */
.seal { width: 100%; height: 100%; overflow: visible; }
.seal .s-draw { fill: none; stroke: var(--heather); stroke-width: 1.2; stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: seal-draw 2.6s var(--ease) forwards; }
.seal .d1 { opacity: .45; } .seal .d2 { animation-delay: .35s; opacity: .7; } .seal .d3 { animation-delay: .7s; opacity: .35; }
.seal .s-ticks line { stroke: rgba(199,155,232,.45); stroke-width: 1; }
.seal .s-ring { font-family: 'Montserrat',sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .38em; fill: rgba(255,255,255,.82); }
html[dir="rtl"] .seal .s-ring { font-family: "Montserrat",sans-serif; font-size: 15px; letter-spacing: .38em !important; direction: ltr; }
.seal .s-core { fill: rgba(199,155,232,.08); stroke: rgba(199,155,232,.55); stroke-width: 1; }
.seal .s-mp { font-family: 'Rebelton',sans-serif; font-size: 64px; fill: var(--heather); letter-spacing: .02em; }
.seal .s-node { fill: var(--heather); }
.seal .s-node.n2 { fill: #fff; }
@keyframes seal-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .seal .s-rot { transform-origin: 300px 300px; animation: p-spin 60s linear infinite; }
  .seal .s-ticks { transform-origin: 300px 300px; animation: p-spin 180s linear infinite reverse; }
  .seal .s-orb { transform-origin: 300px 300px; animation: p-spin 24s linear infinite; }
  .seal .s-orb2 { transform-origin: 300px 300px; animation: p-spin 16s linear infinite reverse; }
  .seal .s-core { animation: seal-breathe 6s ease-in-out infinite; transform-origin: 300px 300px; }
  @keyframes seal-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
}
@media (prefers-reduced-motion: reduce) { .seal .s-draw { animation: none; stroke-dashoffset: 0; } }

/* About: focus band (same pattern as /team/) */
.rb { background: #12051A; border-top: 1px solid rgba(199,155,232,0.14); border-bottom: 1px solid rgba(199,155,232,0.14); }
.rb-in { display: flex; align-items: center; gap: clamp(18px,3vw,44px); padding-top: 28px; padding-bottom: 28px; }
.rb-label { flex-shrink: 0; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--heather, #C79BE8); display: flex; align-items: center; gap: 14px; }
.rb-label::after { content: ""; width: 40px; height: 1px; background: rgba(199,155,232,0.5); }
.rb-items { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; }
.rb-i { font-family: 'Rebelton','Montserrat',sans-serif; font-size: clamp(17px,1.6vw,22px); color: #fff; letter-spacing: 0.01em; word-spacing: -0.12em; }
.rb-d { width: 6px; height: 6px; margin: 0 clamp(16px,2vw,28px); background: var(--heather, #C79BE8); transform: rotate(45deg); opacity: .75; flex-shrink: 0; }
.rb-side { margin: 0 0 0 auto; font-size: 13px; letter-spacing: 0.04em; color: rgba(255,255,255,0.62); text-align: right; max-width: 34ch; }
.rb-link { flex-shrink: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; text-decoration: none; padding: 12px 18px; border: 1px solid rgba(199,155,232,0.5); max-width: none; transition: background .25s, border-color .25s; }
.rb-link:hover { background: var(--heather, #C79BE8); border-color: var(--heather, #C79BE8); color: #26092B; }
html[dir="rtl"] .rb-side { margin: 0 auto 0 0; text-align: left; }
@media (max-width: 900px) { .rb-in { flex-wrap: wrap; } .rb-side { margin: 0; text-align: left; flex-basis: 100%; } html[dir="rtl"] .rb-side { text-align: right; } .rb-link { flex-basis: auto; } }
@media (max-width: 600px) { .rb-in { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 22px; padding-bottom: 22px; } .rb-d { margin: 0 14px; } }

/* Mobile: stack the coverage list with a leading diamond instead of trailing separators */
@media (max-width: 600px) {
  .rb-items { flex-direction: column; align-items: flex-start; }
  .rb-d { display: none; }
  .rb-i { display: inline-flex; align-items: center; gap: 14px; }
  .rb-i::before { content: ""; width: 6px; height: 6px; background: var(--heather, #C79BE8); transform: rotate(45deg); opacity: .75; flex-shrink: 0; }
}
.rb-about .rb-i { font-size: clamp(15px,1.4vw,20px); }
@media (min-width: 1000px) { .rb-about .rb-items { flex-wrap: nowrap; white-space: nowrap; } }