/* Design 1 palette, complete photographs, and database-backed project names. */
.anchor-projects-wrap { max-width: 1440px; width: 100%; margin-inline: auto; padding-inline: clamp(18px,4vw,56px); }
.anchor-featured-projects { padding-block: clamp(64px,8vw,112px); background: #0b0e13; color: #fff; scroll-margin-top: 72px; }
.anchor-projects-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px,4vw,48px); }
.anchor-projects-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #ffb31a; font-family: 'IBM Plex Mono',monospace; font-size: 12px; letter-spacing: .12em; }
.anchor-projects-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,179,26,.12); }
.anchor-projects-heading h2 { font-family: 'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif; font-size: clamp(2rem,4.2vw,3.4rem); font-weight: 800; line-height: 1.4; margin: 16px 0 0; }
.anchor-projects-heading h2 span, .anchor-projects-page-hero h1 span { color: #ffb31a; }
.anchor-projects-page-hero h1 span { display: inline-block; margin-inline-start: .06em; }
.anchor-projects-all { display: inline-flex; flex-shrink: 0; color: #ffb31a; font-size: 18px; font-weight: 600; text-decoration: none; padding-block: 10px; border-bottom: 1px solid rgba(255,179,26,.4); transition: color .25s,border-color .25s; }
.anchor-projects-all:hover { color: #fff; border-color: #fff; }
.anchor-project-rail { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 8px 16px; overflow-anchor: none; }
.anchor-project-rail.is-looping { scroll-snap-type: none; scroll-behavior: auto; }
.anchor-project-track { display: flex; flex: 0 0 100%; min-width: 0; gap: inherit; transform: translate3d(0,0,0); }
.anchor-project-rail::-webkit-scrollbar { display: none; }
.anchor-project-slide { flex: 0 0 clamp(280px,30vw,420px); min-width: 0; display: flex; scroll-snap-align: start; }
.anchor-project-card { position: relative; display: block; min-width: 0; border-radius: 20px; overflow: hidden; background: #131821; border: 1px solid rgba(255,255,255,.1); color: #fff; text-decoration: none; transition: border-color .3s,box-shadow .3s; }
.anchor-project-card:hover { border-color: rgba(255,179,26,.6); color: #fff; }
.anchor-project-card-image { position: relative; aspect-ratio: 4/3; padding: 0; display: grid; place-items: center; background: #e9e6dd; overflow: hidden; }
.anchor-project-card img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: clamp(12px,2vw,24px); min-height: 0; object-fit: contain; transition: filter .45s; }
.anchor-project-card:hover img { filter: brightness(1.035); }
.anchor-project-card-info { padding: clamp(20px,3vw,40px); }
.anchor-project-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font-size: 13px; line-height: 1.7; }
.anchor-project-card-tags > span { padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.08); }
.anchor-project-card-tags > .anchor-project-card-count { background: #ffb31a; color: #0b0e13; font-weight: 600; }
.anchor-project-card h3 { font-family: 'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif; font-size: clamp(1.35rem,2vw,1.8rem); font-weight: 700; line-height: 1.65; color: inherit; overflow-wrap: anywhere; margin: 0; }
.anchor-project-card-description { color: #9aa3b1; font-size: 17px; line-height: 1.95; margin: 20px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.anchor-project-card-link { display: inline-block; color: #ffb31a; font-size: 15px; margin-top: 28px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,179,26,.35); }
.anchor-project-no-photo { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; font-size: 15px; color: #5c6472; }
/* Design 1's tall row of cards, with space reserved for the complete photo. */
.anchor-project-slide .anchor-project-card { transition: transform .5s cubic-bezier(.2,.7,.1,1),border-color .4s,box-shadow .4s; display: flex; flex-direction: column; width: 100%; min-height: clamp(400px,37.5vw,525px); border-radius: 18px; }
.anchor-project-slide .anchor-project-card:is(:hover,:focus-visible) { transform: translateY(-5px); box-shadow: 0 18px 36px -24px rgba(255,179,26,.35); }
.anchor-project-slide .anchor-project-card-image { flex: 1; min-height: clamp(210px,23vw,320px); aspect-ratio: auto; background: #131821; }
.anchor-project-slide .anchor-project-card img { padding: 12px; }
.anchor-project-slide .anchor-project-no-photo { color: #9aa3b1; }
.anchor-project-slide .anchor-project-card-info { padding: 24px 22px 22px; background: linear-gradient(#131821,rgba(8,10,14,.92)); }
.anchor-project-slide .anchor-project-card-tags { font-size: 12.5px; margin-bottom: 10px; }
.anchor-project-slide .anchor-project-card-tags > span { padding: 3px 11px; background: rgba(255,255,255,.12); }
.anchor-project-slide .anchor-project-card-tags > .anchor-project-card-count { background: #ffb31a; }
.anchor-project-slide .anchor-project-card h3 { font-size: 1.45rem; line-height: 1.65; }
.anchor-project-slide .anchor-project-card-description { display: none; }
.anchor-project-slide .anchor-project-card-link { font-size: 13px; margin-top: 14px; }
.anchor-project-slide .anchor-project-card::after { content: '↖'; position: absolute; top: 18px; inset-inline-end: 18px; width: 46px; height: 46px; border-radius: 50%; background: #ffb31a; color: #0b0e13; display: grid; place-items: center; font-size: 20px; transform: scale(.6) rotate(45deg); opacity: 0; transition: transform .45s cubic-bezier(.2,.7,.1,1),opacity .3s; }
.anchor-project-slide .anchor-project-card:hover::after, .anchor-project-slide .anchor-project-card:focus-visible::after { transform: none; opacity: 1; }
.anchor-project-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; color: #9aa3b1; font-size: 14px; }
.anchor-project-position { font: 12px 'IBM Plex Mono',monospace; }
.anchor-project-progress { height: 2px; background: rgba(255,255,255,.1); margin-top: 18px; }
.anchor-project-progress i { display: block; height: 100%; width: 0; background: #ffb31a; transition: width .85s; }
.anchor-projects-empty { margin: 32px 0; color: #9aa3b1; font-size: 17px; line-height: 1.85; }
.anchor-featured-projects a:focus-visible, .anchor-project-rail:focus-visible { outline: 2px solid #ffb31a; outline-offset: 4px; }
body.anchor-projects-page { background: #f3f1eb; color: #11151b; font-family: 'IBM Plex Sans Arabic',system-ui,sans-serif; }
.anchor-projects-page-hero { background: #0b0e13; color: #fff; padding-block: clamp(36px,6vw,80px); }
.anchor-projects-page-hero h1 { font-family: 'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif; font-size: clamp(2.6rem,6vw,5.5rem); font-weight: 900; line-height: 1.3; margin: 18px 0 0; letter-spacing: -.025em; }
.anchor-projects-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #9aa3b1; font-size: 17px; line-height: 1.85; margin-bottom: 36px; }
.anchor-projects-breadcrumb a { text-decoration: none; }
.anchor-projects-breadcrumb a:hover { color: #ffb31a; }
.anchor-projects-page-hero p { color: #9aa3b1; max-width: 56ch; font-size: clamp(17px,1.6vw,20px); line-height: 1.9; margin: 24px 0 0; }
.anchor-project-catalogue { padding-block: 28px clamp(64px,8vw,110px); min-height: 55svh; overflow-anchor: none; }
.anchor-project-filters { display: flex; gap: 10px; overflow-x: auto; padding-block: 8px 16px; border-bottom: 1px solid rgba(17,21,27,.12); }
.anchor-project-filters a { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 10px 18px; border: 1px solid rgba(17,21,27,.12); border-radius: 99px; color: #5c6472; text-decoration: none; font-size: 16px; transition: color .2s,background .2s; }
.anchor-project-filter-count { display: inline-grid; place-items: center; min-width: 24px; padding: 1px 6px; border-radius: 99px; background: rgba(17,21,27,.06); font: 12px/1.7 'IBM Plex Mono',monospace; }
.anchor-project-filters a:hover, .anchor-project-filters a.is-selected { background: #0b0e13; color: #fff; border-color: #0b0e13; }
.anchor-project-filters a.is-selected .anchor-project-filter-count { background: #ffb31a; color: #0b0e13; }
.anchor-project-results { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-block: 28px; }
.anchor-project-results h2 { font-family: 'Alexandria','IBM Plex Sans Arabic',system-ui,sans-serif; font-size: 20px; line-height: 1.6; margin: 0; }
.anchor-project-results > span { color: #5c6472; font-size: 16px; }
.anchor-project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 28px; overflow-anchor: none; }
.anchor-project-grid-item { min-width: 0; }
.anchor-project-grid .anchor-project-card { height: 100%; background: #fff; border-color: rgba(17,21,27,.12); color: #11151b; box-shadow: 0 16px 40px -32px rgba(17,21,27,.25); }
.anchor-project-grid .anchor-project-card:hover { border-color: #f29100; box-shadow: 0 24px 48px -32px rgba(17,21,27,.35); }
.anchor-project-grid .anchor-project-card-info { padding: clamp(20px,3vw,32px); }
.anchor-project-grid .anchor-project-card-tags > span { background: #f3f1eb; color: #5c6472; }
.anchor-project-grid .anchor-project-card-tags > .anchor-project-card-count { background: #ffb31a; color: #0b0e13; }
.anchor-project-grid .anchor-project-card-description { display: none; }
.anchor-project-grid .anchor-project-card-link { color: #11151b; border-color: rgba(17,21,27,.2); margin-top: 20px; }
.anchor-project-grid .anchor-project-card:hover .anchor-project-card-link { color: #f29100; border-color: #f29100; }
.anchor-projects-page .anchor-projects-empty { color: #5c6472; }
.anchor-project-grid-item[hidden], .anchor-projects-empty[hidden] { display: none !important; }
.anchor-projects-page a:focus-visible { outline: 2px solid #f29100; outline-offset: 3px; }
/* Four readable cards on wide desktops, three on smaller laptops. */
@media (min-width: 1366px) {
    .anchor-project-rail { gap: 20px; }
    .anchor-project-slide { flex-basis: calc((100% - 60px)/4); }
    .anchor-project-slide .anchor-project-card { min-height: 440px; }
    .anchor-project-slide .anchor-project-card-image { min-height: 240px; }
    .anchor-project-slide .anchor-project-card h3 { font-size: 1.25rem; }
    .anchor-project-slide .anchor-project-card-info { padding-inline: 20px; }
}
@media (min-width: 1025px) and (max-width: 1365.98px) {
    .anchor-project-slide { flex-basis: calc((100% - 48px)/3); }
}
@media (max-width: 1024px) and (min-width: 600px) {
    .anchor-project-slide { flex-basis: calc((100% - 24px)/2); }
}
@media (max-width: 599.98px) {
    .anchor-project-rail { gap: 16px; }
    .anchor-project-slide { flex-basis: 88%; }
    .anchor-project-slide .anchor-project-card { min-height: 400px; }
    .anchor-project-slide .anchor-project-card h3 { font-size: clamp(1.15rem,4.8vw,1.45rem); }
}
@media (max-width: 767.98px) {
    .anchor-projects-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
    .anchor-project-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
    .anchor-project-card-tags { font-size: 12px; margin-bottom: 16px; }
    .anchor-projects-breadcrumb { font-size: 16px; }
    .anchor-projects-page-hero h1 { font-size: clamp(2.35rem,10vw,4rem); }
    .anchor-project-filters a { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .anchor-project-slide, .anchor-project-progress i, .anchor-project-card, .anchor-project-card img, .anchor-project-card::after { transition: none; } .anchor-project-slide .anchor-project-card:is(:hover,:focus-visible) { transform: none; } }