/* Creative Circle — v2 additions: footer services column, profile download, testimonials, review form, insights, careers */

/* footer: five columns on wide screens */
@media (min-width:1100px){.fcols{grid-template-columns:1.3fr 1fr 1fr 1.1fr 1.2fr}}
.fprofile{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:12px 18px;border:1px solid rgba(228,238,240,.28);border-radius:999px;background:none;color:var(--sand);font:500 13px/1 var(--body);letter-spacing:.06em;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.fprofile:hover,.fprofile:focus-visible{background:var(--sand);color:var(--ink);border-color:var(--sand)}
.fprofile svg{width:14px;height:14px}
html[lang="ar"] .fprofile{letter-spacing:0;font-size:14px}

/* profile download dialog */
.pdl{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(22,35,43,.62);backdrop-filter:blur(4px)}
.pdl[hidden]{display:none}
.pdl-box{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--white);color:var(--ink);padding:clamp(28px,5vw,44px)}
.pdl-box h3{margin:10px 0 8px;font:300 clamp(26px,3vw,34px)/1.15 var(--display)}
.pdl-box p{margin:0 0 22px;color:var(--muted);font-size:15px}
.pdl-box form{display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding:0;border:0;background:none}
.pdl-box label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.pdl-box input{width:100%;padding:12px 14px;border:1px solid var(--rule);background:transparent;color:var(--ink);font:400 15px/1.4 var(--body)}
.pdl-box input:focus{outline:2px solid var(--orange);outline-offset:1px}
.pdl-box .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pdl-box .btn{justify-self:start;margin-top:6px}
.pdl-x{position:absolute;top:12px;inset-inline-end:12px;width:40px;height:40px;border:0;background:none;font-size:26px;line-height:1;color:var(--ink);cursor:pointer}
.pdl-msg{font-size:14px;color:var(--teal,#075056)}
@media (max-width:520px){.pdl-box .row2{grid-template-columns:1fr}}

/* testimonials (homepage) */
.testi[hidden]{display:none}
.testi .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,4vw,56px);margin-top:48px}
.testi figure{margin:0;padding-top:28px;border-top:1px solid var(--rule)}
.testi blockquote{margin:0;font:300 clamp(19px,1.8vw,24px)/1.5 var(--display)}
.testi blockquote::before{content:"“";display:block;color:var(--orange);font-size:56px;line-height:.6;margin-bottom:12px}
.testi figcaption{margin-top:22px;font-size:14px;color:var(--muted)}
.testi figcaption b{display:block;color:var(--ink);font-weight:500}
.testi .stars{color:var(--orange);letter-spacing:.2em;font-size:13px;margin-top:6px}
.testi .cta{margin-top:40px;font-size:15px}
.testi .cta a{color:var(--ink);border-bottom:1px solid var(--orange);text-decoration:none;padding-bottom:3px}

/* review form page */
.rv{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,96px);align-items:start}
.rv form{display:grid;grid-template-columns:1fr;gap:18px;margin:0;padding:0;border:0;background:none}
.rv label{display:grid;gap:8px;font-size:13px;letter-spacing:.04em;color:var(--muted)}
.rv input,.rv textarea{width:100%;padding:14px 16px;border:1px solid var(--rule);background:var(--white);color:var(--ink);font:400 16px/1.5 var(--body)}
.rv textarea{min-height:170px;resize:vertical}
.rv input:focus,.rv textarea:focus{outline:2px solid var(--orange);outline-offset:1px}
.rv .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rv .rate{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px}
html[dir="rtl"] .rv .rate{justify-content:flex-end}
.rv .rate input{position:absolute;opacity:0;width:1px;height:1px}
.rv .rate label{font-size:32px;line-height:1;color:var(--rule);cursor:pointer;letter-spacing:0;transition:color .2s}
.rv .rate input:checked~label,.rv .rate label:hover,.rv .rate label:hover~label{color:var(--orange)}
.rv .rate input:focus-visible+label{outline:2px solid var(--orange);outline-offset:2px}
.rv .consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;letter-spacing:0;color:var(--ink)}
.rv .consent input{width:18px;height:18px;margin-top:3px;flex:none}
.rv .note{font-size:14px;color:var(--muted)}
.rv-done{padding:22px 24px;border:1px solid var(--rule);background:var(--white);font-size:16px}
@media (max-width:860px){.rv{grid-template-columns:1fr}.rv .row2{grid-template-columns:1fr}}

/* insights */
.ins-list{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:40px}
.ins-list a{display:grid;grid-template-columns:140px 1fr auto;gap:28px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.ins-list time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ins-list h3{margin:0;font:300 clamp(22px,2.4vw,32px)/1.25 var(--display);text-wrap:balance}
.ins-list p{margin:10px 0 0;color:var(--muted);max-width:62ch}
.ins-list .go{color:var(--orange);font-size:22px}
.ins-list a:hover h3{color:var(--orange)}
@media (max-width:760px){.ins-list a{grid-template-columns:1fr;gap:8px}.ins-list .go{display:none}}
.art{max-width:72ch;margin-inline:auto}
.art .meta{font-size:13px;color:var(--muted);margin-top:18px}
.page-head .art h1,.art h1{font:300 clamp(34px,4.6vw,60px)/1.12 var(--display);margin:18px 0 0;text-wrap:balance}
.art .dek{font:300 clamp(19px,1.8vw,23px)/1.55 var(--display);color:var(--muted);margin:24px 0 0}
.art figure{margin:40px 0}
.art figure img{width:100%;height:auto;display:block}
.art figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.art h2{font:400 clamp(22px,2.2vw,28px)/1.3 var(--display);margin:48px 0 14px;text-wrap:balance}
.art p,.art li{font-size:17px;line-height:1.8}
.art ol,.art ul{padding-inline-start:22px}
.art li{margin-bottom:10px}
.art .box{margin:48px 0 0;padding:28px 30px;background:var(--white);border-inline-start:3px solid var(--orange)}
.art .box p{margin:0 0 16px}
.art .box .btn{margin-top:4px}
html[lang="ar"] .art p,html[lang="ar"] .art li{font-size:18px;line-height:1.9}

/* careers */
.jobs{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:40px}
.job{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,64px);padding:40px 0;border-bottom:1px solid var(--rule)}
.job h3{margin:0;font:300 clamp(24px,2.6vw,34px)/1.2 var(--display)}
.job .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.job .tags span{font-size:12px;padding:6px 12px;border:1px solid var(--rule);border-radius:999px;color:var(--muted)}
.job ul{margin:0;padding-inline-start:20px}
.job li{margin-bottom:8px;line-height:1.7}
.job .apply{margin-top:18px;font-size:15px}
.job .apply a{color:var(--ink);border-bottom:1px solid var(--orange);text-decoration:none}
@media (max-width:820px){.job{grid-template-columns:1fr}}
.page-head{padding-block:clamp(150px,16vw,210px) clamp(48px,6vw,80px)}
.page-head h1{font:300 clamp(40px,5.6vw,84px)/1.05 var(--display);margin:22px 0 0;max-width:16ch;text-wrap:balance}
.page-head p{margin:26px 0 0;max-width:56ch;color:var(--muted);font-size:clamp(16px,1.4vw,19px)}

.page-head .art{padding-top:0}
.page-head:has(.art){padding-top:clamp(130px,13vw,170px)}
[data-profile] svg{width:15px;height:15px;flex:none}

/* ---- v2.1 mobile refinements ---- */
.links .m-only{display:none}
@media (max-width:980px){
  nav.top .links.open .m-only{display:flex}
  nav.top .links .m-call{align-items:center;gap:10px;font-variant-numeric:tabular-nums}
  nav.top .links .m-call::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
  nav.top .links .m-cta{justify-content:center;margin-top:14px;padding:16px 22px;border-radius:999px;background:var(--orange);color:#fff!important;border:0}
}
@media (max-width:700px){
  .hero .bg::before,.r-hero .bg::before{background:linear-gradient(180deg,rgba(18,30,37,.25) 0,rgba(18,30,37,.55) 40%,rgba(18,30,37,.88) 100%)}
  .hero .bg::after,.r-hero .bg::after{background:linear-gradient(180deg,rgba(18,30,37,.55) 0,rgba(18,30,37,0) 28%)}
  .s-hero .bg::after{background:linear-gradient(180deg,rgba(18,30,37,.45) 0,rgba(18,30,37,.6) 45%,rgba(18,30,37,.92) 100%)!important}
  .hero p.lead,.r-hero p.lead{color:rgba(255,255,255,.9)}
  .hero .cta .btn,.r-hero .cta .btn{flex:1 1 auto;justify-content:center}
  /* comfortable tap targets */
  .fcols ul{gap:0}
  .fcols ul a{display:inline-block;padding-block:9px}
  .fcols ul li:not(:has(a)){padding-block:9px}
  nav.top .lang{padding:12px 6px}
  .filters{gap:8px!important}
  .filters button{min-height:42px;padding-inline:16px!important}
  .direct a,.contact .direct b{display:inline-block;padding-block:8px}
  .svc-cases a,.ins-list a,.art p a{padding-block:6px}
  .fprofile{padding:14px 20px}
  .chips label{min-height:42px;display:inline-flex;align-items:center}
  body{-webkit-text-size-adjust:100%}
}
.hero .inner,.r-hero .inner{z-index:2}
