/* 7Code — /about + legal pages (/privacy, /terms, /cookies). Builds on the tokens and inner-page classes in styles.css. */

/* =========================== ABOUT =========================== */
/* hero */
.ab-t{font-size:clamp(40px,7.6vw,118px);line-height:.9;max-width:none}
.ab-t .ln{display:block}
.ab-t .red{color:var(--red)}
.ab-ph .ph-lead{max-width:62ch}

/* our story */
.ab-story-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,84px);border-top:1.5px solid var(--ink);margin-top:14px;padding-top:clamp(28px,4vw,52px)}
.ab-year .y{display:block;font-weight:900;font-size:clamp(96px,15vw,230px);line-height:.8;letter-spacing:-.055em;color:transparent;-webkit-text-stroke:1.5px var(--ink);direction:ltr;text-align:start}
html[dir=rtl] .ab-year .y{text-align:right}
.ab-year .cap{margin-top:22px;font-weight:800;font-size:clamp(17px,1.6vw,21px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.2}
.ab-year .cap::before{content:"";display:inline-block;width:10px;height:10px;background:var(--red);margin-inline-end:10px;vertical-align:1px}
.ab-year .tags{margin-top:12px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink45)}
.ab-story-text p{font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--ink70);max-width:60ch}
.ab-story-text p:first-child{font-size:clamp(20px,2vw,28px);line-height:1.35;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.ab-story-text p+p{margin-top:18px}

/* tagline */
.ab-motto{margin-top:clamp(64px,8vw,110px);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--panel)}
.ab-motto ol{list-style:none}
.ab-motto li{display:grid;grid-template-columns:44px minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(20px,2.6vw,34px) 0;border-bottom:1.5px solid var(--line)}
.ab-motto li:last-child{border-bottom:0}
.ab-motto .n{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink45)}
.ab-motto .w{font-weight:900;font-size:clamp(38px,6vw,92px);line-height:.9;text-transform:uppercase;letter-spacing:-.035em}
.ab-motto .w i{font-style:normal;color:var(--red)}
.ab-motto p{color:var(--ink70);font-size:clamp(16px,1.35vw,19px);max-width:40ch}

/* how we work */
.ab-steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);margin-top:14px}
.ab-steps li{padding:26px 20px 30px;border-inline-end:1.5px solid var(--ink);transition:background .25s}
.ab-steps li:last-child{border-inline-end:0}
.ab-steps li:hover{background:var(--panel)}
.ab-steps .n{font-family:var(--mono);font-weight:700;color:var(--red);font-size:14px}
.ab-steps h3{font-weight:800;text-transform:uppercase;font-size:clamp(18px,1.6vw,23px);letter-spacing:-.01em;margin:14px 0 10px;line-height:1.05}
.ab-steps p{color:var(--ink70);font-size:15px}

/* values */
.ab-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink);margin-top:14px}
.ab-val{position:relative;padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,32px);border-bottom:1.5px solid var(--ink);border-inline-end:1.5px solid var(--ink)}
.ab-val:nth-child(3n){border-inline-end:0}
.ab-val::before{content:"";position:absolute;inset-inline-start:0;top:-1.5px;height:3px;width:0;background:var(--red);transition:width .4s cubic-bezier(.2,.7,0,1)}
.ab-val:hover::before{width:100%}
.ab-val .n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink45);transition:color .25s}
.ab-val:hover .n{color:var(--red)}
.ab-val h3{font-weight:900;text-transform:uppercase;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;line-height:1;margin:22px 0 12px}
.ab-val p{color:var(--ink70);font-size:15.5px;max-width:38ch}

/* selected work */
.ab-work{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:14px}
.ab-wcard{position:relative;display:block;aspect-ratio:3/4.2;overflow:hidden;border:1.5px solid var(--ink);background:var(--panel);transition:border-color .25s}
.ab-wcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.7,0,1)}
.ab-wcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.9))}
.ab-wcard .m{position:absolute;inset-inline:0;bottom:0;z-index:1;padding:16px;color:#fff;display:flex;flex-direction:column;gap:6px}
.ab-wcard .t{font-weight:900;font-size:clamp(18px,1.6vw,24px);text-transform:uppercase;line-height:.95;letter-spacing:-.02em}
.ab-wcard .tg{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.82}
.ab-wcard .go{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-top:6px;align-self:flex-start;border:1.5px solid rgba(255,255,255,.5);padding:5px 8px;transition:.25s}
.ab-wcard:hover{border-color:var(--red)}
.ab-wcard:hover img{transform:scale(1.05)}
.ab-wcard:hover .go{background:var(--red);border-color:var(--red)}

/* clients */
.ab-clients{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--ink);margin-top:14px}
.ab-clients li{display:flex;align-items:baseline;gap:12px;min-width:0;padding:20px 0;padding-inline-end:14px;border-bottom:1.5px solid var(--line);font-weight:800;font-size:clamp(16px,1.5vw,21px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.2}
.ab-clients .n{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--red);flex:0 0 auto}
.ab-clients img{height:26px;width:auto;filter:grayscale(1) brightness(1.6);opacity:.8;align-self:center}

/* team (same look as the homepage; the photo uses .mph because .ph is the page hero) */
.member .mph{aspect-ratio:3/3.4;background:#17171b center/cover no-repeat;display:grid;place-items:center;color:var(--ink45);font-family:var(--mono);font-size:11px}

/* Arabic */
html[dir=rtl] .ab-t{line-height:1.3;font-size:clamp(36px,6.4vw,100px)}
html[dir=rtl] .ab-year .cap,html[dir=rtl] .ab-val h3,html[dir=rtl] .ab-steps h3,html[dir=rtl] .ab-wcard .t{line-height:1.45}
html[dir=rtl] .ab-motto .w{line-height:1.35}
html[dir=rtl] .ab-story-text p:first-child{line-height:1.6}
html[dir=rtl] .ab-story-text p{line-height:1.85}
html[dir=rtl] .ab-year .tags,html[dir=rtl] .ab-wcard .tg,html[dir=rtl] .ab-wcard .go{font-size:13.5px}


@media(max-width:1100px){
  .ab-steps{grid-template-columns:1fr}
  .ab-steps li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:10px;border-inline-end:0;border-bottom:1.5px solid var(--line);padding:20px 0}
  .ab-steps li:last-child{border-bottom:0}
  .ab-steps .n{grid-row:1/3;padding-top:4px}
  .ab-steps h3{margin:0 0 6px}
  .ab-steps li:hover{background:none}
  .ab-work{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,40%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--red) transparent}
  .ab-wcard{scroll-snap-align:start}
  .ab-clients{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .ab-story-grid{grid-template-columns:1fr}
  .ab-motto li{grid-template-columns:34px minmax(0,1fr);row-gap:8px}
  .ab-motto p{grid-column:2}
  .ab-vals{grid-template-columns:1fr 1fr}
  .ab-val:nth-child(3n){border-inline-end:1.5px solid var(--ink)}
  .ab-val:nth-child(2n){border-inline-end:0}
  .ab-clients{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .ab-vals{grid-template-columns:1fr}
  .ab-val,.ab-val:nth-child(3n){border-inline-end:0}
  .ab-val h3{margin-top:14px}
  .ab-work{grid-auto-columns:68%}
  .ab-clients li{font-size:15px;padding:16px 0;padding-inline-end:8px}
}

/* =========================== LEGAL =========================== */
.lg-ph .ph-t{font-size:clamp(40px,6.6vw,100px);line-height:.92}
.lg-ph .ph-lead{max-width:60ch}
.lg-note{flex-basis:100%;margin-top:2px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink45)}

.lg{padding:clamp(44px,6vw,84px) 0 clamp(56px,7vw,96px);border-bottom:1.5px solid var(--ink)}
.lg-grid{display:grid;grid-template-columns:minmax(200px,270px) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:start}
.lg-grid>.lg-body:only-child{grid-column:1/-1}
.lg-side{align-self:stretch;min-width:0}   /* full row height, so the TOC inside can stay sticky */

/* table of contents: sticky list on desktop, collapsible on phones */
.lg-toc-d{position:sticky;top:92px;max-height:calc(100vh - 120px);overflow:auto;border-top:1.5px solid var(--ink);padding-top:16px;scrollbar-width:thin}
.lg-toc-d h2{font-family:var(--mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--ink45);margin-bottom:8px}
.lg-toc-l{list-style:none;counter-reset:toc}
.lg-toc-l a{display:flex;gap:10px;padding:7px 0;font-size:14px;line-height:1.35;color:var(--ink70);transition:color .2s}
.lg-toc-l a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);flex:0 0 auto;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--ink45);padding-top:2px}
.lg-toc-l a:hover{color:var(--red)}
.lg-toc-m{display:none;border:1.5px solid var(--ink);margin-bottom:30px}
.lg-toc-m summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;padding:0 16px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.lg-toc-m summary::-webkit-details-marker{display:none}
.lg-toc-m summary::after{content:"+";font-size:22px;line-height:1;color:var(--red);transition:transform .25s}
.lg-toc-m[open] summary::after{transform:rotate(45deg)}
.lg-toc-m .lg-toc-l{border-top:1.5px solid var(--line);padding:4px 16px 8px}
.lg-toc-m .lg-toc-l a{padding:11px 0;font-size:15px}

/* body text */
.lg-body{max-width:78ch;min-width:0;counter-reset:sec;font-size:17px;line-height:1.7;color:var(--ink70)}
.lg-body h2{counter-increment:sec;display:flex;gap:14px;align-items:baseline;margin:56px 0 18px;padding-top:22px;border-top:1.5px solid var(--ink);font-weight:900;font-size:clamp(22px,2.3vw,32px);line-height:1.05;text-transform:uppercase;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:90px}
.lg-body h2:first-child{margin-top:0}
.lg-body h2::before{content:counter(sec,decimal-leading-zero);flex:0 0 auto;font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;letter-spacing:0;color:var(--red)}
.lg-body h3{margin:30px 0 10px;font-family:var(--mono);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink);scroll-margin-top:90px}
.lg-body p{margin:0 0 14px}
.lg-body strong{color:var(--ink);font-weight:700}
.lg-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px;text-decoration-thickness:1.5px}
.lg-body a:hover{color:var(--red)}
.lg-body ul,.lg-body ol{list-style:none;margin:0 0 20px;border-top:1.5px solid var(--line)}
.lg-body li{position:relative;padding:11px 0;padding-inline-start:26px;border-bottom:1.5px solid var(--line)}
.lg-body ul li::before{content:"";position:absolute;inset-inline-start:0;top:24px;width:12px;height:2px;background:var(--red)}
.lg-body code{font-family:"JetBrains Mono",monospace;font-size:.85em;color:var(--ink);background:rgba(255,255,255,.07);padding:1px 6px;unicode-bidi:isolate}
.lg-body blockquote{margin:0 0 18px;padding:14px 18px;border-inline-start:3px solid var(--red);background:var(--panel);color:var(--ink)}

/* contact block */
.lg-body .lg-contact{border-top:1.5px solid var(--ink)}
.lg-body .lg-contact li{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;padding-inline-start:0}
.lg-body .lg-contact li::before{display:none}
.lg-contact .k{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink45)}
.lg-contact a,.lg-contact span:last-child{color:var(--ink);font-weight:600;overflow-wrap:anywhere}

/* cookie table */
.lg-tablewrap{margin:8px 0 22px;border:1.5px solid var(--ink)}
.lg-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.lg-table th{padding:12px 14px;border-bottom:1.5px solid var(--ink);background:var(--panel);text-align:start;font-family:var(--mono);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--ink45)}
.lg-table td{padding:14px;border-bottom:1.5px solid var(--line);vertical-align:top;color:var(--ink70)}
.lg-table tr:last-child td{border-bottom:0}
.lg-table td:first-child{width:1%;white-space:nowrap}
.lg-table td:last-child{min-width:140px}
.lg-table code{font-family:"JetBrains Mono",monospace;font-size:13.5px;color:var(--ink);background:rgba(255,255,255,.07);padding:2px 7px}
.lg-type{display:inline-block;padding:3px 8px;border:1.5px solid var(--line);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);white-space:nowrap}
.lg-type.is-ess{border-color:var(--ink)}
.lg-type.is-opt{border-color:var(--red);color:var(--red)}
.lg-cond{display:block;margin-top:7px;font-size:12.5px;line-height:1.35;color:var(--ink45)}

/* "change cookie settings" */
.lg-settings{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:6px 0 20px;padding:20px;border:1.5px solid var(--ink);background:var(--panel)}
.lg-settings p{margin:0;max-width:52ch;font-size:15.5px;line-height:1.6}
.lg-settings .btn{min-height:46px}
.lg-settings.is-off{border-color:var(--line)}
.lg-settings.is-off p{max-width:none}

/* other policies */
.lg-more{margin-top:clamp(56px,7vw,96px);border-top:1.5px solid var(--ink)}
.lg-more a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 0;border-bottom:1.5px solid var(--ink);font-weight:900;font-size:clamp(20px,2.4vw,32px);text-transform:uppercase;letter-spacing:-.02em;transition:.25s}
.lg-more a span{font-family:var(--mono);font-weight:500}
.lg-more a:hover{background:var(--red);color:#fff;padding-inline:14px}

/* Arabic */
html[dir=rtl] .lg-ph .ph-t{line-height:1.3}
html[dir=rtl] .lg-note,html[dir=rtl] .lg-toc-d h2,html[dir=rtl] .lg-toc-m summary,html[dir=rtl] .lg-contact .k,html[dir=rtl] .lg-table th,html[dir=rtl] .lg-type{font-size:13.5px}
html[dir=rtl] .lg-toc-l a{font-size:15px}
html[dir=rtl] .lg-body{font-size:17.5px;line-height:1.95}
html[dir=rtl] .lg-body h2{line-height:1.45;align-items:center}
html[dir=rtl] .lg-body h3{font-size:16px;font-weight:800}
html[dir=rtl] .lg-body ul li::before{top:27px}
html[dir=rtl] .lg-table{line-height:1.75}
html[dir=rtl] .lg-more a{line-height:1.4}

@media(max-width:900px){
  .lg-grid{grid-template-columns:1fr;gap:0}
  .lg-toc-d{display:none}
  .lg-toc-m{display:block}
  .lg-body{font-size:16.5px}
  .lg-body h2{margin-top:44px}
}
@media(max-width:700px){
  .lg-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .lg-table,.lg-table tbody,.lg-table tr,.lg-table td{display:block;width:100%}
  .lg-table tr{padding:8px 0;border-bottom:1.5px solid var(--ink)}
  .lg-table tr:last-child{border-bottom:0}
  .lg-table td,.lg-table td:first-child{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;width:100%;padding:7px 14px;border:0;white-space:normal}
  .lg-table td::before{content:attr(data-l);padding-top:2px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink45)}
  html[dir=rtl] .lg-table td::before{font-size:13px}
  .lg-table td>code{justify-self:start}
  .lg-body .lg-contact li{grid-template-columns:1fr;gap:2px}
  .lg-settings{padding:16px}
  .lg-settings .btn{width:100%;justify-content:center}
}